قواعد كتابة كود HTML5 بشكل صحيح وأهم الفروقات عن الإصدارات القديمة
في عالم تطوير الويب، كتابة كود HTML بشكل صحيح هي خطوة أساسية عشان تضمن إن الصفحة تشتغل على كل المتصفحات وتكون مفهومة للزائر ومحركات البحث. في المقال ده، هنتكلم عن السينتاكس بتاع HTML5، وهنتعرف على الفروقات بينه وبين الإصدارات القديمة زي XHTML.
يعني إيه Syntax في HTML؟
الـ Syntax هو "القواعد النحوية" اللي لازم تتبعها وإنت بتكتب الكود. يعني مثلًا لازم تفتح الوسم وتقفله صح، تحط الخصائص بشكل مظبوط، وتكتب التاجز بالترتيب. أي غلطة بسيطة ممكن تسبب إن الصفحة تظهر بشكل غريب أو ما تشتغلش أصلاً.
الـ Doctype في HTML5
في كل صفحة HTML5، لازم تبدأ بسطر بيحدد نوع المستند، وده اسمه Doctype Declaration واللي معناه "تصريح نوع المستند". الشكل الصحيح في HTML5 هو:
<!DOCTYPE html>السطر ده بيقول للمتصفح إن الكود اللي جاي مكتوب بلغة HTML5، وده مهم علشان المتصفح يتعامل مع الصفحة بشكل مظبوط. في الإصدارات القديمة، زي HTML 4.01، الدوك تايب كان بيبقى سطر طويل ومعقد. لكن HTML5 سهّلت الدنيا جدًا.
الفرق بين HTML و XHTML
HTML معناها HyperText Markup Language، وده النظام اللي بنستخدمه عشان نكتب صفحات الإنترنت. XHTML معناها Extensible HyperText Markup Language، ودي نسخة صارمة أكتر من HTML مبنية على XML.
في XHTML، لازم كل وسم يتقفل، ولازم تكتب الكود بحروف صغيرة وتلتزم بكل القواعد بدقة. أما HTML5 فهو مرن أكتر، وممكن تتجاهل بعض الحاجات بدون ما الصفحة تبوز. على سبيل المثال:
في XHTML لازم تكتب الوسوم الفارغة زي كده:
<br /> <img src="image.png" />لكن في HTML5 تقدر تكتبها كده بدون مشاكل:
<br> <img src="image.png">كتابة التاجز بالحروف الصغيرة
في HTML5 يُفضل جدًا إنك تكتب كل التاجز بالحروف الصغيرة (lowercase). يعني تكتب:
<html> <head> <body> <p>بدل ما تكتبها كده:
<HTML> <HEAD> <BODY>السبب هو إن المتصفحات الحديثة بتتعامل مع الحروف الصغيرة بشكل أدق، وبيخلي الكود أنظف وأسهل في القراءة.
تنسيق الخصائص (Attributes)
الـ Attributes هي الخصائص اللي بنضيفها لأي تاج علشان نتحكم في سلوكه. مثلًا:
<img src="logo.png" alt="لوجو الموقع">لازم تكتب كل Attribute بالحروف الصغيرة، والقيم بتاعته تكون بين علامات تنصيص مزدوجة (" "). وفي حالة وجود أكتر من خاصية، لازم تحط مسافة بينهم:
<a href="page.html" target="_blank">افتح الرابط</a>إغلاق الوسوم
مش كل الوسوم في HTML5 لازم تتقفل، بس الأفضل إنك تقفل الوسم علشان مايحصلش أي تعارض. يعني مثلًا:
<p>دي فقرة</p>
لكن الوسوم الفارغة زي <br> و <hr> و
<img> مش لازم يتقفلوا، لكن لو قفلتهم مش هيأثر.
ترتيب الوسوم بشكل صحيح (Nesting)
واحدة من أكتر الأخطاء اللي بنقع فيها هي ترتيب الوسوم غلط. لازم الوسم اللي اتفتح أول هو اللي يتقفل آخر. شوف المثال ده:
غلط:
<b><i>نص</b></i>صح:
<b><i>نص</i></b>الترتيب الصح بيساعد المتصفح يفهم البنية، ويمنع ظهور مشاكل في عرض الصفحة.
تعليقات في كود HTML
ممكن تضيف تعليقات داخل كود HTML علشان توضح لنفسك أو لأي حد يقرأ الكود الهدف من جزء معين. ودي بتكتب كده:
<!-- دي تعليق في الكود -->التعليقات مش بتظهر في الصفحة، لكنها بتساعد في التوضيح والترتيب.
نصائح ختامية
- راجع الكود بعد كل تعديل.
- استخدم محررات حديثة زي VS Code علشان تكتشف الأخطاء بسهولة.
- جرب الكود دايمًا في متصفحك قبل النشر.
- خليك منظم واكتب الكود بشكل واضح وسهل القراءة.
وبكده نكون خلصنا شرح قواعد كتابة كود HTML5 بشكل صحيح، والفرق بينه وبين XHTML. الموضوع سهل وممتع، وكل ما تكتب أكتر، هتلاقي نفسك بتتحسن بسرعة في كتابة الكود بشكل احترافي.