يجعل الرمز النظيف والمرتّب والمتسق من 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://menoufy.me//">Visit our Home page</a>
الاستخدام الخاطئ
<a HREF="https://menoufy.me//">Visit our Home page</a>
استخدم دائمًا علامات اقتباس لقيم الخصائص (صفات العناصر)
رغم أن لغة HTML تسمح بكتابة قيم الخصائص (صفات العناصر) بدون علامات اقتباس، فإننا نوصي بشدة باستخدامها دائمًا.
إليك الأسباب:
- اتفاق عام: غالبية المطورين يستخدمون علامات الاقتباس لقيم الخصائص، مما يجعل الكود متسقًا وسهل الفهم.
- وضوح أفضل: استخدام الاقتباس يوضح بشكل واضح بداية ونهاية قيمة الخاصية، ويحسن قابلية قراءة الكود.
- إلزامية في حالات معينة: يجب عليك استخدام الاقتباس إذا كانت قيمة الخاصية تحتوي على مسافات، وإلا سيقرأ المتصفح قيمة وخاصية منفصلتين، مما قد يؤدي إلى خطأ في عرض الصفحة.
الإستخدام الجيد:
<table class="striped">
الاستخدام السئ
<table class=striped>
الاستخدام السئ جدا
<table class=table striped>
حدد دائمًا خصائص (صفات) alt, width, و height للصور
1. خصيصة alt (وصف الصورة):
حدد دائمًا خاصيّة alt لجميع صورك. توضح هذه الخاصية محتوى الصورة في حال تعذر عرضها لسبب ما، وهي مهمة لتحسين إمكانية الوصول للموقع لذوي الإعاقة وكيفية قراءة محتوى الموقع من قبل محركات البحث.
2. خصيصة width (عرض الصورة):
حدد دائمًا عرض الصورة باستخدام خاصيّة width. يساعد تحديد العرض على منع تحرك وتذبذب محتوى الصفحة أثناء تحميل الصورة، حيث يُخصص المتصفح المساحة المطلوبة للصورة قبل عرضها.
3. خصيصة height (ارتفاع الصورة):
حدد دائمًا ارتفاع الصورة باستخدام خاصيّة height. تعمل هذه الخاصية بالشكل نفسه لخاصيّة width، حيث تقلل من تحرك محتوى الصفحة وتوفر عرضًا أكثر سلاسة عند تحميل الصورة.
مثال للإستخدام الجيد:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
الاستخدام السئ
<img src="html5.gif">
مسافات وعلامات المساواة في HTML
يسمح HTML باستخدام مسافات حول علامات المساواة (=) في صفات العناصر (مثل class و id).
لكن، نوصي بشدة بعدم استخدام المسافات، وذلك للمزايا التالية:
- قابلية قراءة أفضل: يُعد الكود الخالي من المسافات أكثر سهولة في القراءة والتنقل بين الأسماء والصفات والقيم.
- تجميع أفضل: يساعد عدم استخدام المسافات على تجميع الكيان الواحد (اسم الخاصية، علامة المساواة، وقيمة الخاصية) معًا، ما يزيد من وضوح وترتيب الكود.
- اتفاق عام: غالبية المطورين يتبعون قاعدة عدم استخدام المسافات حول علامات المساواة، مما يسهل فهم أكواد الآخرين والتعاون المشترك.
مثال للإستخدام الجيد:
<link rel="stylesheet" href="styles.css">
الاستخدام السئ
<link rel = "stylesheet" href = "styles.css">
تجنب كتابة أسطر طويلة من الكود في HTML
عند استخدام برامج تحرير HTML، يعد التمرير يمينًا ويسارًا لقراءة الكود أمرًا غير مريحًا ويؤثر على فعالية عملك. لذلك، من المهم تجنب كتابة أسطر طويلة جدًا من الكود.
تجنب الفراغات وسطور البياض والتباعد دون سبب
في حين أن HTML يسمح باستخدام الفراغات وسطور البياض والتباعد، فمن الأفضل تجنب إضافتها بدون سبب وجيه.
إليك ما يوصى به لزيادة قابلية قراءة الكود وتنظيمه:
▪ تجنب إضافة الفراغات وسطور البياض لتنسيق العرض فقط:
يعتمد عرض الصفحة بشكل أساسي على ملف CSS منفصل، لذلك لا تحاول تحسين التباعد عن طريق إضافة فراغات أو سطور بيضاء غير ضرورية داخل الكود HTML.
▪ أضف سطورًا بيضاء لفصل كتلة كبيرة أو منطقية من الكود:
يمكنك إضافة سطور بيضاء فارغة لفصل أقسام أو وحدات منطقية مختلفة داخل الكود، مثل فصل رأس الصفحة عن المحتوى الرئيسي أو فصل قائمة من الفقرات.
▪ استخدم تباعدًا بمقدار مسافتين (Spaces) وليس علامة التبويب (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.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</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.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</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.
أهمية عنصر <title>:
- تحسين ترتيب محركات البحث (SEO): يلعب محتوى عنوان الصفحة دورًا مهمًا في تحديد ترتيب ظهورها في نتائج البحث. تعمل خوارزميات محركات البحث على تحليل عناوين الصفحات لتقييم مدى صلتها بكلمات البحث التي يستخدمها المستخدمون.
- شريط عنوان المتصفح: يظهر محتوى عنصر
<title>في شريط عنوان المتصفح، ويعطي لمحة سريعة عن موضوع الصفحة للمستخدم. - المفضلات (Bookmarks): عند حفظ صفحة في قائمة المفضلات، عادةً يتم حفظ عنوان الصفحة كمُسمى لها.
- نتائج البحث: يعرض محرك البحث محتوى عنصر
<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> دائمًا!
صحيحٌ من الناحية التقنية أنه يمكن لصفحة HTML أن تكون صالحةً حتى بدون العناصر <html> و <body>. لكن، نؤكد على أهمية استخدامها دائمًا لأسبابٍ عديدة:
- تجنب الأخطاء: قد يؤدي حذف العنصر
<body>إلى أخطاء عرضٍ وصياغةٍ في بعض المتصفحات القديمة، مما يُفسد تجربة المستخدم. - حماية البرامج: حذف كلٍ من
<html>و<body>قد يتسبب في تعطل برامج معالجة مستندات HTML (DOM) وبرامج معالجة XML، لأنها تعتمد على هذه العناصر الأساسية لبناء وتفسير المحتوى بشكلٍ صحيح. - أفضل الممارسات: يعد استخدام هذين العنصرين من أفضل الممارسات في كتابة أكواد HTML منظمةٍ ومتوافقةٍ مع المعايير، مما يسهّل صيانتها وتطويرها لاحقًا.
- بنية واضحة: توفر عناصر
<html>و<body>هيكلًا واضحًا للصفحة، يُعرّف المتصفح بطبيعة المحتوى ويضمن عرضه بشكلٍ متناسقٍ وسليم.
هل يمكن إغفال عنصر <head>؟
من الناحية الفنية، نعم، يمكن إغفال عنصر <head> في لغة HTML. فالمتصفحات ستقوم تلقائيًا بإضافة جميع العناصر التي تاتي قبل عنصر <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، احتفظ بعلامة الإغلاق (/)
رغم أن إغلاق العناصر الفارغة اختياري في HTML الأساسي، إلا أنّه ضروريٌ عند توقع معالجة صفحتك ببرمجيات مخصصة لمعايير XML أو XHTML.
أضف الخاصية lang في عنصر <html>
من أهم الممارسات في كتابة أكواد HTML تضمين الخاصية 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>
بيانات ميتا: تحديد اللغة وتشفير الأحرف
لضمان التفسير الصحيح وفهرسة محركات البحث بدقة، يجب تعريف كلًا من:
- اللغة: يُحدد باستخدام خاصية
langداخل عنصر<html>. على سبيل المثال،lang="ar"للغة العربية. - تشفير الأحرف: يُحدد باستخدام علامة
metaداخل عنصر<head>. على سبيل المثال،meta charset="UTF-8"لتشفير يوتف-8 الشائع.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
ضبط منطقة العرض (Viewport)
منطقة العرض (Viewport) هي المساحة المرئية للمستخدم من صفحة الويب. وتختلف هذه المساحة حسب الجهاز المستخدم، حيث تكون أصغر على الهاتف المحمول مقارنة بشاشة الكمبيوتر.
من الجيد تضمين عنصر <meta> التالي في جميع صفحات الويب الخاصة بك:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
يعطي هذا الرمز إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وتكبيرها.
width=device-width: يضبط عرض الصفحة ليتناسب مع عرض شاشة الجهاز المُستخدم (والذي يختلف حسب الجهاز).initial-scale=1.0: يضبط مستوى التكبير الافتراضي عند تحميل الصفحة لأول مرة في المتصفح.
مثال:
إليك مثالًا لصفحة ويب بدون عنصر meta لضبط منطقة العرض، وصفحة أخرى بنفس المحتوى ولكن مع العنصر المذكور:
- مثال بدون ضبط منطقة العرض
- مثال مع ضبط منطقة العرض
نصيحة:
إذا كنت تتصفح هذه الصفحة باستخدام هاتف أو جهاز لوحي، يمكنك النقر على الرابطين المذكورين أعلاه لرؤية الفرق.
باستخدام عنصر meta لضبط منطقة العرض، ستضمن تجربة مستخدم أفضل وعرضًا متناسقًا على جميع الأجهزة بغض النظر عن حجم شاشاتها.
ضبط منطقة العرض (Viewport)
منطقة العرض (Viewport) هي المساحة المرئية للمستخدم من صفحة الويب. وتختلف هذه المساحة حسب الجهاز المستخدم، حيث تكون أصغر على الهاتف المحمول مقارنة بشاشة الكمبيوتر.
من الجيد تضمين عنصر <meta> التالي في جميع صفحات الويب الخاصة بك:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
يعطي هذا الرمز إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وتكبيرها.
width=device-width: يضبط عرض الصفحة ليتناسب مع عرض شاشة الجهاز المُستخدم (والذي يختلف حسب الجهاز).initial-scale=1.0: يضبط مستوى التكبير الافتراضي عند تحميل الصفحة لأول مرة في المتصفح.
مثال:
إليك مثالًا لصفحة ويب بدون عنصر meta لضبط منطقة العرض، وصفحة أخرى بنفس المحتوى ولكن مع العنصر المذكور:
- مثال بدون ضبط منطقة العرض
- مثال مع ضبط منطقة العرض
نصيحة:
إذا كنت تتصفح هذه الصفحة باستخدام هاتف أو جهاز لوحي، يمكنك النقر على الرابطين المذكورين أعلاه لرؤية الفرق.
باستخدام عنصر meta لضبط منطقة العرض، ستضمن تجربة مستخدم أفضل وعرضًا متناسقًا على جميع الأجهزة بغض النظر عن حجم شاشاتها.
ضبط منطقة العرض (Viewport)
منطقة العرض (Viewport) هي المساحة المرئية للمستخدم من صفحة الويب. وتختلف هذه المساحة حسب الجهاز المستخدم، حيث تكون أصغر على الهاتف المحمول مقارنة بشاشة الكمبيوتر.
من الجيد تضمين عنصر <meta> التالي في جميع صفحات الويب الخاصة بك:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
يعطي هذا الرمز إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وتكبيرها.
width=device-width: يضبط عرض الصفحة ليتناسب مع عرض شاشة الجهاز المُستخدم (والذي يختلف حسب الجهاز).initial-scale=1.0: يضبط مستوى التكبير الافتراضي عند تحميل الصفحة لأول مرة في المتصفح.
مثال:
إليك مثالًا لصفحة ويب بدون عنصر meta لضبط منطقة العرض، وصفحة أخرى بنفس المحتوى ولكن مع العنصر المذكور:
- مثال بدون ضبط منطقة العرض
- مثال مع ضبط منطقة العرض
نصيحة:
إذا كنت تتصفح هذه الصفحة باستخدام هاتف أو جهاز لوحي، يمكنك النقر على الرابطين المذكورين أعلاه لرؤية الفرق.
باستخدام عنصر meta لضبط منطقة العرض، ستضمن تجربة مستخدم أفضل وعرضًا متناسقًا على جميع الأجهزة بغض النظر عن حجم شاشاتها.
بدون علامة meta لضبط منفذ العرض:
تحتوي علي علامة meta لضبط منفذ العرض:
تعليقات HTML
في 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.
-->
يُرجى استخدام الرمز بحذر.
نصيحة: يُفضل تنزيل التعليقات الطويلة بمقدار مسافتين (Spaces) لزيادة التناسق وسهولة القراءة.
تذكر: التعليقات غير مرئية للمستخدم ولكنها هامة جدًا للمطورين، لذا استخدمها بكفاءة لتوضيح أكوادك وتحسين صيانتها وتطويرها لاحقًا.
استخدام جداول التصميم (CSS)
إليك بعض النصائح لكتابة أكواد CSS نظيفة وفعالة:
ربط جداول التصميم:
- استخدم تركيبة بسيطة لربط ملفات CSS بالصفحة، بدون الحاجة لخاصية
type:
<link rel="stylesheet" href="styles.css">
قواعد CSS القصيرة:
- يمكنك كتابة القواعد القصيرة (قاعدة واحدة في سطر) بشكل مضغوط، كما في المثال التالي:
CSS
p.intro {font-family:Verdana;font-size:16em;}
قواعد CSS الطويلة:
- اكتب القواعد الطويلة على عدة أسطر لتحسين القراءة والوضح، مع اتباع التنسيق التالي:
CSS
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
أفضل الممارسات:
- ضع القوس الافتتاحي (“) في نفس سطر العناصر المستهدفة (selector).
- استخدم مسافة واحدة قبل القوس الافتتاحي.
- استخدم مسافتين للتنسيق عند كتابة القواعد على عدة أسطر.
- استخدم نقطة فاصلة (;) بعد كل ثنائي <خاصية:قيمة>، بما في ذلك آخر زوج في القاعدة.
- استخدم علامات اقتباس (“”) حول قيمة الخاصية فقط إذا كانت القيمة تحتوي على مسافات.
- ضع القوس الختامي (“) في سطر جديد بدون مسافات.
بإتباع هذه النصائح، ستحصل على أكواد CSS منظمة وسهلة القراءة والصيانة، مما يسهّل عليك العمل ويضمن أداءً أفضل لصفحاتك.
تحميل ملفات JavaScript في HTML
من أفضل الممارسات لتحميل ملفات JavaScript (JS) الخارجية استخدام تركيبة بسيطة وواضحة:
<script src="myscript.js">
الوصول إلى عناصر HTML باستخدام JavaScript
استخدام أكواد HTML غير منظمة (“غير أنيقة”) يمكن أن يؤدي إلى أخطاء في JavaScript.
مثال:
هذان البيانان من JavaScript سيعطيان نتائج مختلفة:
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
استخدم حروفًا صغيرة لأسماء الملفات!
تختلف خوادم الويب في طريقة تعاملها مع أحرف الكبيرة والصغيرة في أسماء الملفات:
- خوادم حساسة لحالة الأحرف: على خوادم مثل Apache وUnix، يعتبر “london.jpg” ملفًا مختلفًا تمامًا عن “London.jpg”. لن تتمكن من الوصول للملف بأحرف كبيرة باستخدام رابط مكتوب بأحرف صغيرة.
- خوادم غير حساسة لحالة الأحرف: على خوادم مثل Microsoft وIIS، يعتبر “london.jpg” و”London.jpg” نفس الملف. يمكنك الوصول للملف باستخدام أي طريقة كتابة.
إذا كنت تستخدم مزيجًا من الأحرف الكبيرة والصغيرة في أسماء ملفاتك، فيجب أن تضع هذا الاختلاف في الحسبان.
لماذا نوصي باستخدام الأحرف الصغيرة دائمًا؟
- تجنب الأخطاء: قد يؤدي نقل موقعك من خادم غير حساس لحالة الأحرف إلى خادم حساس لحالة الأحرف إلى توقف عمل العديد من الروابط والصور والمكونات الأخرى بسبب اختلاف كتابة أحرف أسماء الملفات.
- تحسين التوافقية: تعمل أسماء الملفات الصغيرة الحروف بشكل متوافق على جميع أنواع خوادم الويب، بغض النظر عن حساسيتها لحالة الأحرف.
- تسهيل الإدارة: استخدام الأحرف الصغيرة يجعل من السهل عليك وعلى الآخرين العثور على الملفات وتذكر أسمائها بشكل صحيح.
لذلك، نوصي بشدة باستخدام الأحرف الصغيرة دائمًا لأسماء ملفاتك على الويب. فهذا يجنبك الأخطاء ويضمن توافق موقعك مع جميع الخوادم ويحسن إدارته وتنظيمه.
ملحقات الملفات
في عالم تطوير الويب، من المهم استخدام ملحقات الملفات الصحيحة لضمان التعرف عليها وعملها بشكل صحيح. إليك ملخص للملحقات الموصى بها لبعض الملفات الأساسية:
- ملفات HTML: يجب أن يكون ملحق ملفات HTML هو
.html. يُسمح أيضًا باستخدام.htmولكنه أقل شيوعًا. - ملفات CSS: يجب أن يكون ملحق ملفات CSS هو
.css. - ملفات JavaScript: يجب أن يكون ملحق ملفات JavaScript هو
.js.
هل هناك فرق بين .htm و .html؟
لا يوجد فرق في الأداء أو التفسير بين امتداد الملفين .htm و .html على الإطلاق!
كلاهما يُفسّران كملفات HTML من قبل جميع المتصفحات وخوادم الويب. ويعود استخدام إحداهما على الأخرى لأسباب تاريخية وعادات شخصية.
لمحة تاريخية:
- في البداية، استخدم مطورو أنظمة التشغيل القديمة مثل MS-DOS امتداد .htm لملفات HTML.
- أما أنظمة التشغيل الأحدث مثل Unix استخدمت .html بشكل أكبر.
- مع تطور الإنترنت وتوحيد المعايير، أصبح كلا الامتدادين مقبولين ومتوافقين تمامًا.
أسماء الملفات الافتراضية
عندما لا يتضمن رابط الويب اسم ملف محددًا في نهايته (مثل “https://www.w3schools.com/“), يقوم الخادم بإضافة اسم ملف افتراضي تلقائيًا، مثل “index.html” أو “index.htm” أو “default.html” أو “default.htm”.
ملاحظات مهمة:
- التوافقية مع خادمك: إذا تمّ تكوين خادمك فقط باستخدام “index.html” كاسم ملف افتراضي، فيجب أن تسمّي ملفك “index.html” بالضبط، وليس “default.html”.
- الأسماء الافتراضية المتعددة: يمكن تكوين الخوادم لاستخدام عدة أسماء ملفات افتراضية في نفس الوقت، مما يمنحك مرونة أكبر في اختيار أسماء ملفاتك.
