دليل النمط والتعقيدات في HTML(5)

تعاقدات HTML

يكون مطورو الويب غالباً ما لا يكونون متأكدين من أنماط الكود والنحو المستخدمة في HTML.

بين عام 2000 و2010، غالباً ما انتقل مطورو الويب من HTML إلى XHTML.

من خلال XHTML، كان على المطورين كتابة كود صالح

HTML5 أكثر لطفاً في التحقق من صحة الكود.

من خلال HTML5، يجب أن تنشئ الخاص بكأفضل الممارسات، دليل النمط والتعاقدات البرمجية.

ذكي وضمان المستقبل

استخدام النمط المنطقي يمكن أن يجعل الآخرين يفهمون ويستخدمون HTML الخاص بك بشكل أسهل.

في المستقبل، قد تحتاج برامج مثل قارئ XML إلى قراءة HTML الخاص بك.

استخدام نحو XHTML النظيف يمكن أن يكون أكثر ذكاءً.

التعليقات:الرجاء الحفاظ على أن تكون أنظمة النمط الذكية والنظيفة والنقية والصحيحة النمطية.

الرجاء استخدام نوع الوثيقة الصحيح

الرجاء دائمًا إعلان نوع الوثيقة في الصف الأول من المستند:

<!DOCTYPE html>

إذا كنت متسلسلاً في استخدام علامات التبويب الصغيرة، يمكنك استخدام:

<!doctype html>

استخدم أسماء العناصر الصغيرة

يسمح HTML5 باستخدام خليط من الحروف الكبيرة والصغيرة في أسماء العناصر.

نوصي باستخدام أسماء العناصر الصغيرة:

  • الأسماء المختلطة من الحروف الكبيرة والصغيرة ليست جيدة
  • يستخدم المطورون عادة الأسماء الصغيرة (مثل في XHTML)
  • الصغيرات تبدو أكثر نقاء
  • الصغيرات أسهل في الكتابة

سيئ نوعاً ما:

<SECTION> 
  <p>هذا فقرة.</p>
</SECTION>

سيئ للغاية:

<Section> 
  <p>هذا فقرة.</p>
</SECTION>

جيد نوعاً ما:

<section> 
  <p>هذا فقرة.</p>
</section>

إغلاق جميع عناصر HTML

في HTML5، لا تحتاج إلى إغلاق جميع العناصر (مثل عنصر <p>).

نحن نوصي بإغلاق جميع عناصر HTML:

يبدو سيئًا:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

يبدو جيدًا:

<section>
  <p>هذا فقرة.</p>
  <p>هذا فقرة.</p>
</section>

إغلاق العناصر الفارغة للHTML

في HTML5، يمكن إغلاق العناصر الفارغة اختياريًا.

يسمح بهذا الشكل:

<meta charset="utf-8">

ويسمح بهذا الشكل أيضًا:

<meta charset="utf-8" />

الشقاطة (\/) ضرورية في XHTML و XML.

إذا كنت تتوقع من برمجيات XML الوصول إلى صفحتك، فإن الحفاظ على هذه العادة هو فكرة جيدة.

استخدم اسماء الخصائص الصغيرة

يُسمح في HTML5 باستخدام اسماء الخصائص المختلطة.

نوصي باستخدام اسماء الخصائص الصغيرة:

  • الاسماء المختلطة للخصائص ليست جيدة
  • يستخدم المطورون عادة اسماء الخصائص الصغيرة (مثل في XHTML)
  • اسماء الخصائص الصغيرة نظيفة عند استخدامها في الحالة
  • اسماء الخصائص الصغيرة سهلة الكتابة

يبدو سيئًا:

<div CLASS="menu">

يبدو جيدًا:

<div class="menu">

القيم المقدرة للصفات

يُسمح في HTML5 باستخدام القيم المقدرة بدون اقتباسات

نوصي بتحديد القيم المقدرة للخصائص:

  • إذا كانت قيمة الخصائص تحتوي على قيم، فإنها يجب أن تكون مقوّاة
  • النمط المختلط ليس جيدًا
  • القيم المقدقة تجعل القراءة أسهل

قيمة هذا الخصائص غير صالحة لأنها تحتوي على فراغات:

<table class=table striped>

هذا صحيح:

<table class="table striped">

صفات الزامنية

استخدم دائمًا الصورة alt صفات. هذه الصفة مهمة عندما لا يمكن عرض الصورة.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

حدد دائمًا حجم الصورة. هذا سيساعد في تقليل الارتجاف، لأن المتصفح سيحجز مساحة للصورة قبل تحميلها.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

الفراغات والمساواة

الفراغات حول المساواة مسموح بها:

<link rel="stylesheet" href="styles.css">

لكن الفراغات الصغيرة أسهل للاستيعاب، لكن الفراغات الصغيرة أسهل للاستيعاب، وتجمع الكيانات معًا بشكل أفضل:

<link rel="stylesheet" href="styles.css">

تجنب سطور الكود الطويلة

عند استخدام محرر HTML، يصبح من غير المريح قراءة كود HTML من خلال التمرير الأيمن والأيسر.

حاول تجنب تجاوز طول السطر للكود 80 حرفًا.

خطوط الفراغ والتباعد

لا تضيف خطوط فراغ بدون سبب.

لتحسين قابلية القراءة، استخدم خطوط الفراغ لفصل الكوديات الكبيرة أو الكوديات المنطقية.

لتحسين قابلية القراءة، استخدم تباعدًا من مسافاتين. لا تستخدم TAB.

لا تستخدم خطوط الفراغ والتباعد غير الضرورية.

غير ضروري:

<body>
  <h1>مدن معروفة</h1>
  <h2>Tokyo</h2>
  <p>
    تокиو عاصمة اليابان، مركز منطقة توكيو الكبرى،
    وهي أكبر منطقة حضرية سكانية في العالم.
    وهي مقر الحكومة الإمبراطورية والقصر الإمبراطوري،
    وهي مقر العائلة الإمبراطورية اليابانية.
  </p>
</body>

أفضل:

<body>
<h1>مدن معروفة</h1>
<h2>Tokyo</h2>
<p>
تокиو عاصمة اليابان، مركز منطقة توكيو الكبرى،
وهي أكبر منطقة حضرية سكانية في العالم.
وهي مقر الحكومة الإمبراطورية والقصر الإمبراطوري،
وهي مقر العائلة الإمبراطورية اليابانية.
</p>
</body>

مثال على جدول:

<table>
  <tr>
    <th>الاسم</th>
    <th>الوصف</th>
  <tr>
  <tr>
    <td>A</td>
    <td>وصف A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>وصف B</td>
  <tr>
</table>

مثال على قائمة:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

هل تريد تقليل <html> و<body>؟

في معيار HTML5، يمكن تقليل علامات <html> و<body>.

الشيفرة التالية معتمدة كـ HTML5:

مثال

<!DOCTYPE html>
<head>
  <title>عنوان الصفحة</title>
</head>
<h1>هذا عنوان.</h1>
<p>هذا فقرة.</p>

جرب ذلك بنفسك

نحن لا نوصي بتقليل علامات <html> و<body>.

عنصر <html> هو العنصر الجذر للنص. إنه الموقع المثالي لتحديد لغة الصفحة.

<!DOCTYPE html>
<html lang="en-US">

للمنتجات المتاحة للوصول (قراء الشاشة) ومحركات البحث، يهم إعلان اللغة.

تقليل <html> أو <body> قد يؤدي إلى تدمير DOM وبرامج XML.

تقليل <body> قد يؤدي إلى خطأ في المتصفحات القديمة (IE9).

هل تريد تقليل <head>؟

في معيار HTML5، يمكن تقليل <head> العنصر.

بافتراض، سيفضل المتصفح إضافة جميع العناصر قبل <body> إلى العنصر <head> الافتراضي.

من خلال تقليل <head> العنصر، يمكنك تقليل تعقيد HTML:

مثال

<!DOCTYPE html>
<html>
<title>عنوان الصفحة</title>
<body>
  <h1>هذا عنوان.</h1>
  <p>هذا فقرة.</p>
</body>
</html>

جرب ذلك بنفسك

التعليقات:للمطورين على الإنترنت، يعتبر التخلي عن العلامات غير معتاد. يتطلب إنشاء القواعد وقتًا

المعلومات الإضافية

السطر <title> هو ضروري في HTML5. يجب أن تكون العناوين ذات معنى قدر الإمكان

<title>HTML5 Syntax and Coding Style</title>

من أجل ضمان التفسير الصحيح والفهرسة الصحيحة من قبل محركات البحث، يجب أن يتم تحديد لغة وترميز النص في بداية الوثيقة

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

تعليقات HTML

يجب كتابة التعليقات القصيرة في سطر واحد، ويجب إضافة مسافة بعد <!-- و قبل -->

<!-- This is a comment -->

التعليقات الطويلة التي تتخطى أسطر متعددة يجب أن تكتب من خلال <!-- و --> في سطور مستقلة:

<!-- 
  هذا مثال على تعليق طويل. هذا مثال على تعليق طويل. هذا مثال على تعليق طويل.
  هذا مثال على تعليق طويل. هذا مثال على تعليق طويل. هذا مثال على تعليق طويل.
-->

التعليقات الطويلة أكثر وضوحًا إذا كانت مدمجة بثلاثة مسافات

قوائم النمط

استخدم صيغة بسيطة للروابط إلى القوائم النمطية (لا يتطلب هذا السمة type)

<link rel="stylesheet" href="styles.css">

يمكن ضغط القواعد القصيرة في سطر واحد، مثل هذا:

p.into {font-family:"Verdana"; font-size:16em;}

يجب تقسيم القواعد الطويلة إلى أسطر متعددة:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • ضع الكسر في نفس السطر مع الملف المحدد
  • استخدم مسافة بعد السطر المفترق قبل الكسر
  • استخدم تدرج من حرفين
  • استخدم العلامة الثلاثية النقاط مع مسافة بعد الخاصية لتحديد القيمة
  • استخدم مسافة بعد كل comma أو سطر مفترق
  • استخدم السطر المفترق بعد كل زوج من الخاصية والقيمة (بما في ذلك الأخير)
  • استخدم العلامات المزدوجة فقط عندما تحتوي القيمة على مسافات
  • ضع الكسر في سطر جديد، دون مسافة قبلها
  • تجنب تجاوز 80 حرفًا في كل سطر

التعليقات:إضافة مسافة بعد الكomma أو السطر المفترق هو قاعدة عامة لجميع أنواع الكتابة.

تحميل الجافاسكربت في HTML

استخدم الجملة البسيطة لتحميل السكربت الخارجي (لا يلزم استخدام خاصية type):

<script src="myscript.js">

وصول JavaScript إلى عناصر HTML

النتيجة التي تأتي من استخدام نمط HTML غير النظيف يمكن أن تؤدي إلى أخطاء JavaScript

هذه الجملتين JavaScript ستنتج نتائج مختلفة:

var obj = getElementById("Demo")
var obj = getElementById("demo")

جرب ذلك بنفسك

استخدم نفس اتفاقية التسمية في HTML (مع JavaScript) إذا كان ذلك ممكنًا

يرجى زيارة دليل النمط لـ JavaScript

استخدم أسماء ملفات صغيرة الحجم

معظم خوادم الويب (مثل Apache وUnix) حساسة للحروف الكبيرة والصغيرة:

لا يمكن الوصول إلى London.jpg عبر london.jpg

معظم خوادم الويب (مثل Microsoft IIS) غير حساسة للحروف الكبيرة والصغيرة:

يمكن الوصول إلى London.jpg عبر london.jpg أو London.jpg

إذا كنت تستخدم الحجم المختلط، فعليك الحفاظ على التزام عالي

إذا انتقلت من خادم غير حساس للحروف الكبيرة والصغيرة إلى خادم حساس للحروف الكبيرة والصغيرة، فإن هذه الأخطاء الصغيرة ستدمج موقعك.

لتفادي هذه المشاكل، استخدم دائمًا أسماء ملفات صغيرة الحجم (إذا كان ذلك ممكنًا).

امتداد الملف

يجب استخدام امتداد ملف لـ HTML .html(بدلاً من .htm)

يجب استخدام امتداد ملف لـ CSS .css.

يجب استخدام امتداد ملف لـ JavaScript .js.