تساعد أفضل ممارسات HTML المطورين على تقديم مواقع ويب وتطبيقات ويب مبتكرة وشديدة التفاعل. تساعدك أفضل الممارسات هذه على تطوير التطبيقات الأكثر ثراءً بالميزات والتي تتمحور حول الأعمال. بالإضافة إلى ذلك ، يمكن للمؤسسات الاستفادة من أفضل الممارسات لتوفير تجربة مستخدم سلسة.
اليوم ، عندما نتحدث عن HTML ، فإننا عادة ما نناقش HTML5 (وليس سابقاتها المباشرة) . HTML5 هي لغة ترميز قوية تسمح لمطوري الويب بإنشاء مستند ويب. إنه سهل الاستخدام والفهم ، وتدعمه جميع المتصفحات تقريبًا. أيضًا ، إنه أساس جميع أنظمة إدارة المحتوى (CMS) تقريبًا
بصفتك مطور ويب بأقل خبرة ، أسئلة مثل “كيف يمكنني كتابة HTML بشكل أفضل؟” غالبا ما تنشأ. تهدف هذه المقالة إلى مساعدتك على البدء في القدم اليمنى.
من المحتمل أن تكون لديك بالفعل فكرة عن لغة الترميز هذه ، ولكن إليك بعض أفضل ممارسات HTML5 التي ستتيح لك الترميز بشكل أفضل.
عند إنشاء مستند HTML ، DOCTYPEيلزم الإعلان لإعلام المتصفح بالمعايير التي تستخدمها. والغرض منه هو تقديم الترميز الخاص بك بشكل صحيح.
على سبيل المثال:
إصدار إعلان Doctype
أتش تي أم أل 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.1.0 تحديث
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML5
<!DOCTYPE html>و <DOCTYPE>ينبغي أن يكون إعلان في السطر الأول من وثيقة HTML الخاص بك. وهنا مقارنة بين تطبيقه الصحيح والخطأ:
افضل تمرين سوء الممارسة
<!DOCTYPE html>
<html>...</html>
<html>...</html>بدلاً من ذلك ، يمكنك استخدام نوع المستند المطابق لإصدار HTML / XHTML الذي تريد استخدامه. تعرف على قائمة إقرارات نوع الدكتوراة الموصى بها لمساعدتك في اختيار النوع المناسب.
يعرف المطورون أن الغرض من العلامات هو مساعدة متصفحات الويب على التمييز بين محتوى HTML والمحتوى العادي. تحتوي علامات HTML على علامة فتح ومحتوى وعلامة إغلاق. ومع ذلك ، غالبًا ما يتم الخلط بينهم حول الموضع المناسب للعلامات ، أو العناصر التي تتطلب علامات الإغلاق ، أو متى يتم حذف العلامات.
على سبيل المثال ، ما هو أفضل مكان لوضع <script>العلامات؟
عادةً ما يتم وضع علامات البرنامج النصي داخل <head>العنصر. ولكن من أفضل الممارسات الحديثة في HTML هي وضعها في أسفل المستند بدلاً من ذلك ، قبل إغلاق <body>العلامة ، لتأخير تنزيلها . ستقوم صفحة الويب بتحميل نموذج كائن المستند (DOM) أولاً ، وإظهاره للمستخدم ، ثم طلب البرامج النصية بعد ذلك ، مما يقلل الوقت إلى البايت الأول (TTFB) .
يفسر المتصفح مستند HTML الخاص بك سطراً بسطر من أعلى إلى أسفل. لذلك ، عندما يقرأ الرأس ويصادف علامة البرنامج النصي ، فإنه يبدأ طلبًا إلى الخادم للحصول على الملف. لا يوجد شيء خاطئ بطبيعته في هذه العملية ، ولكن إذا كانت الصفحة تقوم بتحميل ملف ضخم ، فسوف يستغرق الأمر وقتًا طويلاً وسيؤثر بشكل كبير على تجربة المستخدم.
تحت عنصر الجذر توجد السمة <lang>أو اللغة . تساعد هذه السمة في ترجمة مستند HTML إلى اللغة المناسبة. أفضل ممارسة هي الحفاظ على قيمة هذه السمة قصيرة قدر الإمكان.
على سبيل المثال ، تُستخدم اللغة اليابانية في الغالب في اليابان. لذلك ، فإن رمز البلد ليس ضروريًا عند استهداف اللغة اليابانية .
افضل تمرين سوء الممارسة
<html lang="ja"> <html lang="ja-JP">أحد أفضل ممارسات HTML شيوعًا هو التحقق من ما يجب فعله وما لا يجب فعله . في ما يلي بعض الأمور التي يجب تجنبها في ترميز HTML:
وصف ممارسة جيدة سوء الممارسة
في النص ، استخدم رمز HTML المكافئ لأحرف Unicode بدلاً من الحرف نفسه.
<p>Copyright © 2021 W3C<sup>®</sup></p> <p>Copyright © 2021 W3C<sup>®</sup></p>تخلص من المسافات البيضاء حول العلامات وقيم السمات.
<h1 class="title">HTML5 Best Practices</h1> <h1 class=" title " > HTML5 Best Practices </h1>اتساق الممارسة وتجنب خلط حالات الأحرف.
<a href="#status">Status</a> <a HREF="#status">Status</a>لا تفصل بين السمات بمسافتين أو أكثر.
<input type="text" name="LastName"> <input type="text" name="LastName">مثل أي ممارسة للتشفير ، فإن مبدأ “الحفاظ على البساطة” ينطبق بشكل كبير على HTML و HTML5. بشكل عام ، HTML5 متوافق مع إصدارات HTML القديمة و XHTML. لهذا السبب ، نوصي بتجنب استخدام بيانات أو سمات XML .
على سبيل المثال:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>لست بحاجة إلى التصريح عن الكود على هذا النحو إلا إذا كنت تريد كتابة مستند XHTML. وبالمثل ، لا تحتاج إلى سمات XML ، مثل:
<p lang="en" xml:lang="en">...</p> يجب على المطورين البرمجة مع وضع تحسين محركات البحث في الاعتبار . لا يتم أيضًا فهرسة محتويات الويب التي لم يتم العثور عليها. لهذا السبب ، إليك بعض أفضل ممارسات تحسين محركات البحث التي يجب مراعاتها:
أضف بيانات وصفية ذات مغزى
تعتبر <base>العلامة علامة سهلة الاستخدام ، ولكن قد يؤدي إساءة استخدامها إلى بعض السلوكيات غير البديهية. وبالتالي ، إذا قمت بتعريف علامة أساسية ، فسيكون كل رابط في المستند نسبيًا ما لم يتم تحديده صراحة:
<base href="http://www.kinsta.com/" />يغير بناء الجملة هذا السلوك الافتراضي لبعض الروابط. على سبيل المثال ، الارتباط بصفحة ويب خارجية باستخدام اسم الصفحة وملحقها فقط:
href="coding.org"أو سيفسرها المتصفح على النحو التالي:
href="http://www.kinsta.com/coding.org"يصبح هذا التفسير فوضويًا ، لذلك من الأفضل دائمًا استخدام المسارات المطلقة للروابط الخاصة بك.
من ناحية أخرى ، لا تعد كتابة أوصاف العلامات الوصفية جزءًا من أفضل ممارسات HTML ، ولكنها لا تزال مهمة بنفس القدر. و <meta name=”description”>السمة هي ما بحث الزواحف محرك مرجع عندما مؤشر صفحتك، لذلك من المهم أن لديك SEO الصحية .
و <title>هذا الكود يجعل صديقة للصفحة محرك البحث على شبكة الإنترنت. لسبب واحد ، يظهر النص الموجود داخل <title>العلامة في صفحات نتائج محرك البحث من Google (SERP) وشريط متصفح الويب وعلامات التبويب الخاصة بالمستخدم.
خذ ، على سبيل المثال ، عند البحث عن الكلمة الرئيسية “HTML5”. يشير العنوان في نتيجة البحث هذه إلى سمة العنوان المحددة والمؤلف. هذا مهم جدًا في تحسين محركات البحث وتوليد حركة المرور على الموقع .
يعد استخدام سمة alt ذات مغزى مع <img>العناصر أمرًا ضروريًا لكتابة رمز صالح ودلالي.
في الجدول أدناه ، يُظهر عمود الممارسة السيئة <img>عنصرًا بدون سمة النص البديل. على الرغم من أن المثال الثاني في نفس العمود يحتوي على سمة alt ، إلا أن قيمتها لا معنى لها.
سوء الممارسة ممارسة جيدة
<img id="logo" src="images/kinsta_logo.png" alt="Kinsta logo" />
<img id="logo" src="images/kinsta_logo.png" />
<img id="logo" src="images/kinsta_logo.png" alt="kinsta_logo.png" />و وصف ميتا هو عنصر HTML التي تصف ويلخص محتويات صفحة ويب. والغرض منه هو أن يجد المستخدمون سياق الصفحة. على الرغم من أن البيانات الوصفية لا تساعد بعد الآن في تصنيفات تحسين محركات البحث ، إلا أن الوصف التعريفي لا يزال يلعب دورًا مهمًا في تحسين محركات البحث على الصفحة.
فيما يلي نموذج التعليمات البرمجية الذي يتضمن الكلمات الأساسية والوصف واسم المؤلف ومجموعة الأحرف. تُستخدم مجموعة الأحرف لدعم جميع الأحرف والرموز من لغات مختلفة تقريبًا. من ناحية أخرى ، يمكنك تعيين ملفات تعريف الارتباط وإضافة تاريخ المراجعة والسماح للصفحة بالتحديث.
<!DOCTYPE html>
<html>
<head>
<title>HTML Best Practices in Website Design</title>
<meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
<meta name = "description" content = "Learn about HTML best practices." />
<meta name = "author" content = "John Doe" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Let's learn how to code HTML5!</p>
</body>
</html>في عناصر الارتساء ، تتمثل أفضل الممارسات في استخدام سمات العنوان لتحسين إمكانية الوصول. تزيد سمة العنوان من معنى علامة الارتساء. و <a>العلامة (أو عنصر مرساة) يقترن بها hrefالسمة، يخلق ارتباط تشعبي إلى صفحات الويب وعناوين البريد الإلكتروني، والملفات. يتم استخدامه لربط المواقع داخل نفس الصفحة أو العناوين الخارجية.
تحقق من المثال الموجود أسفل عمود الممارسة السيئة – فهو موجود لكونه زائدًا عن الحاجة. يتضح هذا النوع من الممارسة إذا كان المستخدم يستخدم قارئ الشاشة لقراءة علامة الربط وقراءة نفس النص مرتين للمستمع. قارئ الشاشة عبارة عن تقنية مساعدة يتم توفيرها للمكفوفين أو الذين يعانون من إعاقة في التعلم. كممارسة جيدة ، إذا كنت تكرر نص المرساة فقط ، فمن الأفضل عدم استخدام عنوان على الإطلاق.
ممارسة جيدة سوء الممارسة
<a href=”http://kinsta.com/our-pricing” title=”Learn about our products.”>Click here</a> <a href=”http://kinsta.com/our-pricing” title=”Click Here”>Click here</a>
تطوير موقع الويب ليس مجرد مسألة إنشاء كتلة من النص والعناوين وصفحات الارتباط ، وقد انتهيت. هناك بعض أفضل الممارسات في HTML يجب مراعاتها لتحقيق أقصى استفادة من موقع الويب الخاص بك.
فإن وثائق HTML لا تزال تعمل دون عناصر رئيسية هي: <html>، <head>، و <body>. ومع ذلك ، قد لا يتم عرض الصفحات بشكل صحيح إذا كانت هذه العناصر مفقودة. تحقيقا لهذه الغاية ، من المهم استخدام بنية وثيقة مناسبة باستمرار.
ل تجمع مواضيعي من المحتويات ، استخدم عنصر القسم. وفقًا لمواصفات W3C ، <section>يجب أن يحتوي a على عنوان (H1 ، H2 ، إلخ). يتخطى بعض المطورين استخدام عنصر العنوان تمامًا ، لكننا نوصي بتضمينه للوصول إلى أولئك الذين يستخدمون برامج قراءة الشاشة بشكل أفضل:
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
ممارسة جيدة سوء الممارسة
<section>
<h1>HTML Best Practices 2021</h1>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>
<section>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>و <embed>يخدم العلامة كما حاوية لمورد خارجي. يتضمن ذلك صفحات الويب أو الصور أو مقاطع الفيديو أو المكونات الإضافية. ومع ذلك ، يجب مراعاة أن معظم المستعرضات لم تعد تدعم تطبيقات Java الصغيرة والمكونات الإضافية. علاوة على ذلك ، لم تعد عناصر تحكم ActiveX مدعومة في أي مستعرض ، كما تم إيقاف تشغيل دعم Shockwave Flash في المستعرضات الحديثة.
نوصي بما يلي:
للحصول على صورة ، استخدم <img>العلامة.
بالنسبة إلى HTML الذي تم سحبه من موقع آخر ، استخدم <iframe>العلامة.
لمقاطع الفيديو أو الصوتيات ، استخدم العلامات <video>و <audio>.
توفر سمة alt في <img>العنصر وصفًا للصورة مفيدًا لمحركات البحث وقارئات الشاشة. يمكن أن يكون مفيدًا بشكل خاص للمستخدمين عندما لا يمكن معالجة الصور:
ممارسة جيدة سوء الممارسة
<img alt="HTML Best Practices"
src="/img/logo.png"> <img src="/img/logo.png">اترك سمة alt فارغة إذا كان هناك نص إضافي لشرح الصورة. هذا لتجنب التكرار:
ممارسة جيدة سوء الممارسة
<img alt=""
src="/img/icon/warning.png">
Warning
<img alt="Warning Sign"
src="/img/icon/warning.png"> Warningاترك <iframe>العناصر فارغة في حالة وجود بعض القيود في محتواها. عنصر iframe الفارغ يكون دائمًا آمنًا:
ممارسة جيدة سوء الممارسة
<iframe src="/default.html"></iframe>
<iframe src="/default.html">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</iframe>يجب على المطورين توفير محتوى احتياطي ، أو روابط احتياطية ، لأي عنصر <audio>أو <video>عناصر ، تمامًا كما هو الحال مع الصور. هناك حاجة إلى محتوى احتياطي ، خاصة بالنسبة للعناصر التي تم إدخالها حديثًا في HTML:
ممارسة جيدة سوء الممارسة
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>تصبح مستندات HTML معقدة ، خاصة بالنسبة لصفحات الويب التي تحتوي على الكثير من المحتوى. من الأفضل تقليل عدد العناصر الموجودة على الصفحة إلى أقل عدد يمكنك إدارته. تعلم كيفية استخدام عناصر العنوان بحكمة وتابع كيف <h1>ل <h6>عناصر HTML دلالة على التسلسل الهرمي المحتوى. هذا يجعل المحتوى الخاص بك أكثر فائدة للقراء ، وبرامج قراءة الشاشة ، ومحركات البحث.
مثال:
<h1>The topmost heading</h1>
<h2>This is a subheading that follows the topmost heading.</h2>
<h3>This is a subheading that follows the h2 heading.</h3>
<h4>This is a subheading that follows the h3 heading.</h4>
<h5>This is a subheading that follows the h4 heading.</h5>
<h6>This is a subheading that follows the h5 heading.</hل مطوري وورد والإبداع، استخدم <h1>عنصر على لقب بلوق وظيفة بدلا من اسم الموقع. يساعد هذا في الزحف إلى محرك البحث ، وهذا النهج مناسب لكبار المسئولين الاقتصاديين.
بالإضافة إلى ذلك ، استخدم عنصر HTML الصحيح لنقل المعلومات التي يحتوي عليها لتحقيق بنية محتوى دلالية وذات مغزى. على سبيل المثال ، استخدم <em>للتأكيد وللتشديد <strong>الشديد بدلاً من سابقاتها <i>أو <b>التي تم إهمالها الآن.
مثال:
هل سئمت من دعم استضافة وورد بريس من المستوى 1 دون الإجابات؟ جرب فريق الدعم العالمي! تحقق من خططنا
<em>emphasized text</em>
<strong>strongly emphasized text</strong>بنفس القدر من الأهمية ، استخدم <p>للفقرات ، وتجنب استخدامها <br />لإضافة سطر جديد بين الفقرات. بدلاً من ذلك ، استخدم هامش CSS و / أو خصائص المساحة المتروكة لوضع المحتوى الخاص بك بشكل أفضل. في بعض الأحيان ، قد تجد نفسك تميل إلى استخدام <blockquote>العلامة لأغراض المسافة البادئة. تجنب هذا المأزق – استخدمه حصريًا عند اقتباس نص.
من أفضل ممارسات HTML استخدام العناصر الملائمة لغويًا في تخطيط صفحتك. ستساعدك عدة عناصر على تنظيم التخطيط الخاص بك في أقسام.
مع اتساع نطاق الموضوعات ضمن تخطيط HTML ، من الأفضل إبراز ما يجب فعله وما لا يجب فعله في التخطيط بسرعة. على سبيل المثال ، يعطي HTML معنى دلاليًا أكثر لعناصر الرأس والتذييل ، لذلك لا تهمل استخدام <header>العلامة لأنها تُستخدم في أي قسم أو مقالة معينة. وبصرف النظر عن السيطرة على <title>و <meta>العلامات والعناصر الأسلوبية الأخرى من الوثيقة، انها تستخدم في العناوين، ونشر التواريخ، وغيرها من المحتويات التمهيدي من صفحتك أو المقطع. وبالمثل ، يمكنك التخلص من فكرة أن التذييلات تنتمي إلى قسم حقوق النشر فقط – الآن ، يمكنك استخدامها في كل مكان تقريبًا.
بالنسبة <nav>للعنصر ، يجب استخدامه للتنقل على مستوى الموقع. ليست هناك حاجة للإعلان عن دور لأن الاستخدام مضمن بالفعل في العلامة.
ممارسة جيدة سوء الممارسة
<nav></nav> <nav role="navigation"></nav>بالنسبة <main>للعنصر ، فهو بالفعل جزء من أحدث إصدارات HTML5 ، والتي تشير إلى المحتوى الرئيسي لجسم المستند. لذلك ، لم تعد هناك حاجة للاستخدام <div>عندما يكون لدينا علامة أكثر تحديدًا لمحتوياتنا الرئيسية.
ممارسة جيدة سوء الممارسة
<main id="content"></main> <div id="content"></div>و <article>يستخدم لكتلة المحتوى. إنها قائمة بذاتها ومنطقية دون الحاجة إلى تقديم مزيد من التوضيح ، بينما <section>تُستخدم العلامة لتقسيم صفحة إلى مجالات موضوع مختلفة أو لتقسيم مقالة فردية. لسوء الحظ ، لا يزال العديد من المطورين يستخدمون الاثنين بالتبادل.
ضع في اعتبارك أن <section>العلامة هي علامة عامة أكثر من <article>العلامة. هذا يعني أن الأول يشير إلى المحتوى المرتبط بالموضوع المطروح ، ولكن ليس بالضرورة قائمًا بذاته. هذا الأخير ، على العكس من ذلك ، هو خاصية قائمة بذاتها.
ولكن في حالة عدم وجود علامة ترميز مناسبة لأغراضك ، ما الذي يجب عليك استخدامه؟ الإجابة هي الاستخدام <div>عندما لا يعمل أي عنصر آخر أو عندما يكون عنصرًا أسلوبيًا على وجه التحديد. لأغراضنا ، <div>يعد الاستخدام أيضًا ممارسة سيئة.
دعنا نعود إلى <section>العلامة ، وهي علامة ترميز دلالية. إنه ليس أسلوبًا أسلوبيًا ، ومن المهم التأكيد عليه. في الواقع ، يجب أن تتضمن ممارسة الترميز الجيدة علامة عنوان.
الآن ، <section>يجب عدم استخدام ما يلي لوضع علامة على غلاف أو حاوية أو أي كتلة أسلوبية بحتة. فيما يلي مثال على ممارسة الترميز السيئة <section>بالعلامة:
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>إليك طريقة أفضل ، لكنها تفرط في استخدام <div>العلامة:
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>ومن ثم ، فإن ممارسة الترميز الأفضل هي:
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>جزء شائع من العديد من التخطيطات عبارة عن أشكال لتمثيل البيانات ، ويتم استخدام <figure>العنصر في الغالب مع الصور. ومع ذلك ، فإنه يحتوي على نطاق أوسع من الاستخدامات الممكنة ، حيث يمكن وضع أي شيء متعلق بالمستند في أي مكان وتغليفه في <figure>عنصر. تتضمن بعض الأمثلة الرسوم التوضيحية أو الجداول أو الرسوم البيانية في كتاب.
السمة المثيرة للاهتمام <figure>هي أنها لا تساهم في مخطط الوثيقة. لذلك ، يمكنك استخدامه لتجميع العناصر ذات السمة المشتركة – على سبيل المثال ، عدة صور مع واحدة مشتركة <figcaption>، أو حتى كتلة من التعليمات البرمجية.
في تجميع العناصر مع <figure>، استخدم <figcaption>. و <figcaption>شرح يجب أن تذهب إما مباشرة بعد افتتاح <figure>العلامة، أو مباشرة قبل إغلاق </figure>العلامة:
<figure>
<img src="image1.jpg" alt="Bird Image">
<img src="image2.jpg" alt="Tree Image">
<img src="image3.jpg" alt="Sun Image">
<figcaption>Three images related to a topic</figcaption>
</figure>HTML هي إحدى التقنيات الأساسية في تطوير الويب. يتمتع بقوة وميزات رائعة جعلته مشهورًا بين المطورين وأصحاب الأعمال. يستمر تطوير الواجهة الأمامية في الابتكار ، ولمواكبة ذلك ، يجب على المطورين معرفة أفضل الممارسات في البرمجة النصية بتنسيق HTML .
ستجعل الأنماط المضمنة الكود الخاص بك مشوشًا وغير قابل للقراءة. لتحقيق هذه الغاية ، اربط دائمًا بأوراق الأنماط الخارجية واستخدمها. أيضًا ، تجنب استخدام عبارات الاستيراد في ملفات CSS الخاصة بك لأنها تنتج طلب خادم إضافي.
الشيء نفسه ينطبق على CSS و JavaScript المضمنة. بصرف النظر عن مشكلات قابلية القراءة ، فإن هذا سيجعل المستند الخاص بك أثقل ويصعب الحفاظ عليه بحيث يمكنك تجنب التعليمات البرمجية المضمنة.
يعد استخدام الأحرف الصغيرة في التعليمات البرمجية ممارسة متوافقة مع معايير الصناعة. على الرغم من أن استخدام الأحرف الكبيرة أو حالات النص الأخرى سيستمر في عرض صفحتك ، فإن المشكلة ليست التوحيد القياسي ولكن قابلية قراءة الكود.
تعد إمكانية قراءة الكود جانبًا مهمًا من جوانب الترميز لأنها تساعد في جعل التطبيقات قابلة للصيانة وآمنة. ليس ذلك فحسب ، فإن تطوير الويب يتكون في الغالب من فريق . جعل الكود الخاص بك قابلاً للقراءة يجعل عملك وعمل فريقك أقل تعقيدًا.
ممارسة جيدة سوء الممارسة
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>
<DIV>
<IMG SRC="images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>على الرغم من وجود العديد من الأمور المحظورة في ترميز HTML ، فسنشارك اثنين من الأساسيات المحظورة في البرمجة النصية:
اكتب رموزًا جيدة التنسيق ومتسقة: تعمل الشفرة النظيفة والمكتوبة جيدًا على تعزيز قابلية القراءة بشكل أفضل على موقعك ، وهو ما يعد مساعدة كبيرة لمطورك والأشخاص الآخرين الذين قد يعملون مع الموقع. كما يظهر أيضًا احترافية كبيرة واهتمامًا بالتفاصيل ، مما يعكس جيدًا موقفك كمطور.
الامتناع عن تضمين التعليقات المفرطة: التعليقات ضرورية وتجعل الكود الخاص بك أسهل في الفهم. ومع ذلك ، فإن صيغة HTML تشرح نفسها بنفسها ، لذا فإن التعليق ليس ضروريًا إلا إذا كان عليك توضيح الدلالات واصطلاحات التسمية.
يتم استخدام التحقق من صحة الرموز وتصغيرها لتحديد الأخطاء في وقت مبكر. لا تنتظر حتى تنتهي من مستند HTML الخاص بك – اجعل من المعتاد التحقق من الأخطاء وتحديدها بشكل متكرر. يمكنك إجراء التحقق يدويًا أو استخدام أي أداة تحقق معروفة مثل W3C Markup Validator.
في الوقت نفسه ، تدرب على التصغير عن طريق إزالة أي شيء غير ضروري مثل التعليقات أو المسافة البيضاء. تأكد من كتابة أكواد واضحة وموجزة لتقليل حجم ملف HTML الخاص بك. يمكنك استخدام أدوات مثل HTML Minifier وغيرها.
يتوفر العديد من موارد أفضل ممارسات HTML5 لعام 2021 عبر الإنترنت لمساعدتك. ومع ذلك ، تذكر القاعدة العامة في الترميز: الاتساق. قدمت هذه المقالة رؤى أساسية وساعدتك على بدء رحلة تطوير الواجهة الأمامية. باستخدام هذا الدليل ، ستكون خبيرًا في HTML5 الصحيح لغويًا في لمح البصر.
عندما تكون جاهزًا ، انظر إلى ما يمكن أن تقدمه HTML واستكشف بعض أطر عمل HTML مفتوحة المصدر أيضًا لإنشاء تطبيقات ويب حديثة من صفحة واحدة. إنها توفر مزامنة ممتازة بين البيانات وواجهة المستخدم وتعمل بسلاسة مع CSS و JavaScript.
