دليل نمط HTML
تسهل تعليمات HTML البرمجية المتسقة والنظيفة والمرتبة على الآخرين قراءة التعليمات البرمجية وفهمها.
فيما يلي بعض الإرشادات والنصائح لإنشاء كود HTML جيد.
قم دائمًا بالإعلان عن نوع المستند
قم دائمًا بالإعلان عن نوع المستند باعتباره السطر الأول في المستند.
نوع المستند الصحيح لـ HTML هو:
<!DOCTYPE html>
استخدم أسماء العناصر الصغيرة
يسمح HTML بمزج الأحرف الكبيرة والصغيرة في أسماء العناصر.
ومع ذلك ، نوصي باستخدام أسماء العناصر الصغيرة ، للأسباب التالية:
- يبدو خلط الأسماء الكبيرة والصغيرة سيئًا
- يستخدم المطورون عادةً أسماء صغيرة
- تبدو الأحرف الصغيرة أنظف
- الأحرف الصغيرة أسهل في الكتابة
حسن:
<body>
<p>This is a paragraph.</p>
</body>سيئة:
<BODY>
<P>This is a paragraph.</P>
</BODY>أغلق كافة عناصر HTML
في HTML ، لا يتعين عليك إغلاق جميع العناصر (على سبيل المثال <p>العنصر).
ومع ذلك ، نوصي بشدة بإغلاق جميع عناصر HTML ، مثل هذا:
حسن:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>سيئة:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>استخدم أسماء السمات الصغيرة
يسمح HTML بمزج الأحرف الكبيرة والصغيرة في أسماء السمات.
ومع ذلك ، نوصي باستخدام أسماء السمات الصغيرة ، للأسباب التالية:
- يبدو خلط الأسماء الكبيرة والصغيرة سيئًا
- يستخدم المطورون عادةً أسماء صغيرة
- تبدو الأحرف الصغيرة أنظف
- الأحرف الصغيرة أسهل في الكتابة
حسن:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>سيئة:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>اقتبس دائمًا قيم السمات
يسمح HTML بقيم السمات بدون علامات اقتباس.
ومع ذلك ، نوصي باقتباس قيم السمات ، للأسباب التالية:
- عادة ما يقتبس المطورون قيم السمات
- القيم المقتبسة أسهل في القراءة
- يجب عليك استخدام علامات الاقتباس إذا كانت القيمة تحتوي على مسافات
حسن:
<table
class="striped">سيئة:
<table class=striped>سيئ جدا:
لن يعمل هذا ، لأن القيمة تحتوي على مسافات:
<table class=table striped>حدد دائمًا alt والعرض والارتفاع للصور
حدد دائمًا altسمة للصور. هذه السمة مهمة إذا تعذر عرض الصورة لسبب ما.
أيضا ، دائما تحديد widthو
heightمن الصور. هذا يقلل من الوميض ، لأن المتصفح يمكنه حجز مساحة للصورة قبل التحميل.
حسن:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">سيئة:
<img
src="html5.gif">مسافات وعلامات متساوية
يسمح HTML بمسافات حول علامات متساوية. لكن المساحة الخالية أسهل في القراءة وتجميع الكيانات معًا بشكل أفضل.
حسن:
<link rel="stylesheet" href="styles.css">سيئة:
<link
rel = "stylesheet" href = "styles.css">تجنب خطوط الكود الطويلة
عند استخدام محرر HTML ، ليس من الملائم التمرير يمينًا ويسارًا لقراءة كود HTML.
حاول تجنب أسطر التعليمات البرمجية الطويلة جدًا.
الأسطر الفارغة والمسافة البادئة
لا تضف أسطرًا فارغة أو مسافات أو مسافات بادئة بدون سبب.
لسهولة القراءة ، أضف أسطرًا فارغة لفصل كتل التعليمات البرمجية الكبيرة أو المنطقية.
لسهولة القراءة ، أضف مسافتين من المسافة البادئة. لا تستخدم مفتاح الجدولة.
حسن:
<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>
مثال على قائمة جيدة:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
لا تقم بتخطي عنصر <title> مطلقًا
العنصر <title>مطلوب في HTML.
تعتبر محتويات عنوان الصفحة مهمة جدًا لتحسين محرك البحث (SEO)! يتم استخدام عنوان الصفحة بواسطة خوارزميات محرك البحث لتحديد الترتيب عند سرد الصفحات في نتائج البحث.
العنصر <title>:
- يحدد العنوان في شريط أدوات المتصفح
- يوفر عنوانًا للصفحة عند إضافتها إلى المفضلة
- يعرض عنوان الصفحة في نتائج محرك البحث
لذا ، حاول أن تجعل العنوان دقيقًا وذا مغزى قدر الإمكان:
<title>HTML
Style Guide and Coding Conventions</title>
حذف <html> و <body>؟
سيتم التحقق من صحة صفحة HTML بدون العلامات <html>والعلامات
<body>:
مثال
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
ومع ذلك ، نوصي بشدة بإضافة العلامات <html>والعلامات
دائمًا <body>!
يمكن أن ينتج عن الحذف <body>أخطاء في المتصفحات القديمة.
الحذف <html>ويمكن <body>
أن يؤدي أيضًا إلى تعطل برامج DOM و XML.
حذف <head>؟
يمكن أيضًا حذف علامة HTML <head>.
ستضيف المتصفحات جميع العناصر من قبل <body>إلى عنصر افتراضي <head>
.
مثال
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ومع ذلك ، نوصي باستخدام <head>العلامة.
هل تريد إغلاق عناصر HTML الفارغة؟
في HTML ، يعد إغلاق العناصر الفارغة اختياريًا.
مسموح:
<meta
charset="utf-8">
مسموح أيضا:
<meta charset="utf-8" />
إذا كنت تتوقع وصول برنامج XML / XHTML إلى صفحتك ، احتفظ بشرطة الإغلاق المائلة (/) ، لأنها مطلوبة في XML و XHTML.
أضف سمة اللغة
يجب عليك دائمًا تضمين langالسمة داخل <html>العلامة للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.
مثال
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
البيانات الوصفية
لضمان التفسير الصحيح والفهرسة الصحيحة لمحرك البحث ، يجب تحديد اللغة وترميز الأحرف في أقرب وقت ممكن في مستند HTML:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
إعداد منفذ العرض
منفذ العرض هو المنطقة المرئية للمستخدم لصفحة الويب. يختلف باختلاف الجهاز - سيكون أصغر على الهاتف المحمول منه على شاشة الكمبيوتر.
يجب عليك تضمين <meta>العنصر التالي في جميع صفحات الويب الخاصة بك:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يوفر هذا إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها.
يضبط الجزء width=device-widthعرض الصفحة لتتبع عرض شاشة الجهاز (والذي سيختلف تبعًا للجهاز).
يضبط الجزء initial-scale=1.0مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.
فيما يلي مثال لصفحة ويب لا تحتوي على العلامة الوصفية لإطار العرض ، ونفس صفحة الويب التي تحتوي على العلامة الوصفية لإطار العرض:
نصيحة: إذا كنت تتصفح هذه الصفحة بهاتف أو كمبيوتر لوحي ، فيمكنك النقر فوق الرابطين أدناه لمعرفة الفرق.
تعليقات HTML
يجب كتابة التعليقات القصيرة في سطر واحد ، مثل هذا:
<!-- This is a comment -->
يجب كتابة التعليقات التي تمتد لأكثر من سطر على النحو التالي:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
من السهل ملاحظة التعليقات الطويلة إذا تم وضع مسافة بادئة لها بمسافتين.
استخدام أوراق الأنماط
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.