اتفاقيات الترميز HTML
مطوري الويب غالبا ما تكون غير مؤكدة عن أسلوب الترميز وتركيب لاستخدامها في HTML.
بين عامي 2000 و 2010، تحويل العديد من مطوري الويب من HTML إلى XHTML.
مع XHTML، أجبر المطورين لكتابة صحيحة و "well-formed" التعليمات البرمجية.
HTML5 هو أكثر قليلا قذرة عندما يتعلق الأمر رمز التحقق من الصحة.
مع HTML5، يجب عليك إنشاء الخاصة أفضل الممارسات، دليل نمط وترقيمها اتفاقيات بك.
تكون ذكية والمستقبل برهان
ويترتب على ذلك استخدام أسلوب، يجعل من السهل للآخرين لفهم واستخدام HTML الخاص بك.
في المستقبل، برامج مثل قراء XML، قد ترغب في قراءة HTML الخاص بك.
باستخدام بشكل جيد "close to XHTML" لغوي، ويمكن أن تكون ذكية.
احتفظ دائما طريقتك ذكية ومرتبة ونظيفة، وبشكل جيد.
الاستخدام الصحيح نوع الوثيقة
نعلن دائما نوع المستند كما هو السطر الأول في المستند:
<!DOCTYPE html>إذا كنت تريد الاتساق مع به الحالة الأدنى، يمكنك استخدام:
<!DOCTYPE html>استخدام السفلى حالة أسماء العنصر
HTML5 يسمح المزج بين الأحرف الكبيرة والصغيرة في أسماء العناصر.
نوصي باستخدام أسماء العناصر الصغيرة:
- خلط الأسماء الكبيرة والصغيرة أمر سيء
- وتستخدم للمطورين باستخدام أسماء صغيرة (as in XHTML)
- نظافة نظرة صغيرة
- صغيرة هي أسهل في الكتابة
سيئة:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>سيئ جدا:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>جيد:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>انهيار جميع عناصر HTML
في HTML5، لم يكن لديك لإغلاق كافة العناصر (for example the <p> element) .
نوصي إغلاق جميع عناصر HTML:
أبحث السيئة:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>تبحث جيدا:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>انهيار الخالي عناصر HTML
في HTML5، وهو اختياري لإغلاق العناصر الفارغة.
يسمح هذا:
<meta charset="utf-8">يسمح هذا أيضا:
<meta charset="utf-8" />الخط المائل (/) هو مطلوب في XHTML و XML.
إذا كنت تتوقع برنامج XML الوصول إلى الصفحة الخاصة بك، فإنه قد يكون فكرة جيدة للحفاظ عليه.
استخدام حالة السفلى السمة أسماء
HTML5 يسمح المزج بين الأحرف الكبيرة والصغيرة في أسماء السمة.
نوصي باستخدام أسماء سمة صغيرة:
- خلط الأسماء الكبيرة والصغيرة أمر سيء
- وتستخدم للمطورين باستخدام أسماء صغيرة (as in 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 حرفا.
خطوط فارغة والمسافة البادئة
لا تضيف أسطر فارغة دون سبب.
من أجل قراءة، إضافة أسطر فارغة لفصل كتل رمز كبير أو منطقية.
من أجل قراءة، إضافة 2 فضاءات المسافة البادئة. لا تستخدم TAB.
لا تستخدم أسطر فارغة لا لزوم لها والمسافة البادئة. وليس من الضروري استخدام الأسطر الفارغة بين العناصر قصيرة وذات الصلة. وليس من الضروري أن البادئة كل عنصر:
غير ضروري:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>أفضل:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>الجدول على سبيل المثال:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>قائمة مثال:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>حذف <html> و <body> ؟
في معيار HTML5، و <html> العلامة و <body> العلامة يمكن حذفها.
سوف التعليمة البرمجية التالية التحقق من صحة كما HTML5:
مثال
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> انها محاولة لنفسك » نحن لا ننصح إهمال <html> و <body> العلامات.
و <html> العنصر هو جذر المستند. هذا هو المكان الموصى بها لتحديد لغة الصفحة:
<!DOCTYPE html>
<html lang="en-US">معلنا لغة المهم للتطبيقات الوصول (screen readers) ومحركات البحث.
حذف <html> أو <body> يمكن أن تحطم DOM والبرمجيات XML.
حذف <body> يمكن أن تنتج أخطاء في المتصفحات القديمة (IE9) .
حذف <head> ؟
في معيار HTML5، و <head> ويمكن أيضا أن يتم حذف العلامة.
افتراضيا، سوف المتصفحات إضافة جميع العناصر قبل <body> ، لالافتراضي <head> عنصر.
يمكنك تقليل تعقيد HTML، بحذف <head> العلامة:
مثال
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</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 تعليقات
تعليقات قصيرة يجب أن يكتب على سطر واحد، مع مسافة بعد <!-- and a space before --> :
<!-- This is a comment -->تعليقات طويلة، تمتد خطوط كثيرة، ينبغي أن تكون مكتوبة مع <!-- and --> في أسطر منفصلة:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->تعليقات طويلة هي أسهل للاحتفال، وإذا كانت بادئة 2 مسافات.
أوراق الأنماط
استخدام جملة بسيطة لربط أوراق الأنماط (the type attribute is not necessary) :
<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;
}- وضع قوس على نفس السطر مثل محدد.
- استخدام مسافة واحدة قبل قوس.
- استخدام 2 فضاءات المسافة البادئة.
- استخدام القولون بالإضافة إلى مسافة واحدة بين كل الممتلكات وقيمته.
- استخدام الفضاء بعد كل فاصلة أو فاصلة منقوطة.
- استخدام الفاصلة المنقوطة بعد كل زوج الممتلكات ذات القيمة، بما في ذلك آخر.
- فقط استخدام علامات الاقتباس حول القيم إذا كانت قيمة تحتوي على مسافات.
- وضع قوس الإغلاق في سطر جديد، دون المسافات البادئة.
- تجنب خطوط أكثر من 80 حرفا.
إضافة مسافة بعد فاصلة أو فاصلة منقوطة، هو القاعدة العامة في جميع أنواع الكتابة.
تحميل الجافا سكربت في HTML
استخدام جملة بسيطة لتحميل البرامج النصية الخارجية (the type attribute is not necessary) :
<script src="myscript.js">الوصول إلى عناصر HTML مع جافا سكريبت
ونتيجة لاستخدام "untidy" أنماط HTML، قد يؤدي إلى أخطاء جافا سكريبت.
وهذه بيانين جافا سكريبت تنتج نتائج مختلفة:
إذا كان ذلك ممكنا، استخدم اصطلاح التسمية نفسها (as JavaScript) في HTML.
استخدام حالة السفلى أسماء الملفات
معظم خوادم الويب (Apache, Unix) هي قضية حساسة حول أسماء الملفات:
لا يمكن الوصول london.jpg كما London.jpg.
خوادم الويب الأخرى (Microsoft, IIS) ليست القضية حساسة:
london.jpg يمكن الوصول إليها كما London.jpg أو london.jpg.
إذا كنت تستخدم مزيجا من الحروف الكبيرة والصغيرة، عليك أن تكون متسقة للغاية.
إذا كنت الانتقال من حالة الأحرف، إلى خادم قضية حساسة، وحتى الأخطاء الصغيرة كسر الويب الخاص بك.
لتجنب هذه المشاكل، استخدم دائما أقل أسماء ملف القضية (if possible) .
ملحقات الملفات
يجب أن يكون ملفات HTML على امتداد .html (or .htm ) .
يجب أن يكون ملفات CSS تمديد .CSS.
يجب أن يكون جافا سكريبت ملفات تمديد شبيبة.
الاختلافات بين .htm و هتمل
لا يوجد فرق بين .htm و ملحقات. هتمل. سيعامل على حد سواء كما HTML بواسطة أي متصفح ويب أو خادم الويب.
الاختلافات الثقافية:
.htm "smells" أنظمة DOS في وقت مبكر حيث نظام الحد من ملحقات 3 أحرف.
.html "smells" من أنظمة التشغيل يونيكس التي لم يكن لديك هذا القيد.
الاختلافات التقنية
عندما لا تحدد URL اسم ملف (like http://www.w3ii.com/css/) ، الملقم بإرجاع اسم الملف الافتراضي. أسماء الافتراضية شيوعا هي index.html و، ملف index.htm، default.html، وملف default.htm.
إذا تم تكوين الخادم الخاص بك فقط مع "index.html" كما اسم الملف الافتراضي، يجب تسمية الملف الخاص بك "index.html" ، وليس "index.htm."
ومع ذلك، يمكن تكوين ملقمات مع اسم الملف الافتراضي أكثر من واحد، وعادة ما يمكنك إعداد والعديد من أسماء الافتراضية حسب الحاجة.
على أي حال، والامتداد الكامل لملفات HTML هو أتش تي أم أل، وليس هناك سبب لذلك لا ينبغي أن تستخدم.