HTML: أساسيات HTML
إتقان الهيكل القياسي والقواعد الأساسية لبناء جملة HTML هو الخطوة الأولى لكتابة صفحات ويب صحيحة.
1. هيكل مستند HTML
كل مستند HTML يتبع إطارًا هيكليًا ثابتًا. يستخدم المتصفح هذا الإطار لفهم مكونات الصفحة. يحتوي مستند HTML الكامل على العلاقات الهرمية التالية:
▶ مثال
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>عنوان الصفحة</title>
</head>
<body>
محتوى الصفحة المرئي
</body>
</html>
(1) تفصيل الهيكل
يتم تنظيم الأجزاء المختلفة لمستند HTML في هيكل شجري يُسمى DOM (نموذج كائن المستند). يحول المتصفح كل وسم HTML إلى "عقدة"، وتشكل العقد علاقات أب-ابن وأخوة.
- <!DOCTYPE html> — إعلان نوع المستند، يخبر المتصفح أن هذا مستند HTML5. يجب كتابته في السطر الأول.
<html>— العنصر الجذر، الحاوية الخارجية لمستند HTML بأكمله. جميع الوسوم الأخرى توضع بداخله.<head>— قسم الرأس، يخزن البيانات الوصفية. المحتوى هنا لا يُعرض مباشرة على الصفحة، لكنه يتحكم في الترميز والعنوان ومراجع الأنماط إلخ.<meta charset="UTF-8">— يعلن ترميز الأحرف للمستند بأنه UTF-8، لضمان عرض الأحرف الخاصة بشكل صحيح.<title>— عنوان الصفحة، يظهر في علامة تبويب المتصفح وكعنوان في نتائج محركات البحث.<body>— قسم الجسم، حيث يوضع كل المحتوى المرئي (نص، صور، جداول، إلخ).
فهم هذا الهيكل الأساسي أمر بالغ الأهمية — جميع الوسوم التي ستتعلمها لاحقًا ستوضع إما داخل <head> أو <body>.
<html> هي العقدة الجذر، و <head> و <body> هما عقدتا ابن (أخوة لبعضهما). DOM جيد التنظيم لا يجعل الكود أوضح فحسب، بل يساعد أيضًا في تحسين محركات البحث (SEO) وإمكانية الوصول.
2. بناء الجملة الأساسي للوسوم
اللبنة الأساسية لـ HTML هي "الوسم". يحدد المتصفح من خلال الوسوم نوع المحتوى وهيكله. تنقسم الوسوم إلى فئتين: الوسوم المزدوجة و الوسوم الفارغة.
(1) الوسوم المزدوجة
معظم وسوم HTML تأتي في أزواج، تغلف المحتوى بين وسم بداية ووسم نهاية.
<p>هذه فقرة</p>
<h1>هذا عنوان من المستوى الأول</h1>
<strong>هذا نص عريض</strong>
- وسم البداية:
<اسمالوسم>— أقواس زاوية تحيط باسم الوسم - وسم النهاية:
</اسمالوسم>— شرطة مائلة قبل اسم الوسم - المحتوى: النص أو الوسوم الأخرى بين وسم البداية ووسم النهاية
(2) الوسوم الفارغة (ذاتية الإغلاق)
بعض الوسوم ليس لها محتوى ولا تحتاج إلى وسم نهاية. تُسمى الوسوم الفارغة.
<br> <!-- فاصل سطر -->
<hr> <!-- خط أفقي -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="صورة نموذجية"> <!-- صورة -->
في HTML5، الشرطة المائلة في نهاية الوسوم الفارغة اختيارية (على سبيل المثال، كل من <br /> و <br> صحيحان)، لكن يُوصى بالتبسيط وحذف الشرطة المائلة.
(3) قواعد تداخل الوسوم
يمكن أن تتداخل الوسوم داخل بعضها البعض، لكن يجب أن تتبع مبدأ "أولاً يُفتح، وآخرًا يُغلق" — الوسم الذي فُتح لاحقًا يجب أن يُغلق أولاً. لا تتداخل بشكل متقاطع.
<!-- تداخل صحيح -->
<p>هذا مثال <strong>نص مهم</strong> توضيحي</p>
<!-- تداخل غير صحيح (متقاطع) -->
<p>هذا مثال <strong>نص مهم</p> توضيحي</strong>
- استخدم دائمًا الحروف الصغيرة لأسماء الوسوم. على الرغم من أن
<P>سيُعرض في المتصفح، إلا أن الحروف الصغيرة هي المعيار الصناعي. - يجب أن يتبع التداخل الترتيب الهرمي بدقة. التداخل المتقاطع غير الصحيح يمكن أن يتسبب في تحليل المتصفح بشكل خاطئ، مما يؤدي إلى تشويه تخطيط الصفحة.
- التداخل الصحيح هو أساس هيكل DOM جيد، مما يسهل الصيانة والتنسيق.
<!-- -->، ولا تظهر على الصفحة، وتكون أساسًا لملاحظات المطورين.
❓ أسئلة شائعة
<br> إلى وسم إغلاق؟ متى يمكنني حذف الشرطة المائلة؟<br> ليس لديه "محتوى الفاصل"، ومسار الصورة يُحدد عبر السمة src، وليس بين الوسوم. في HTML5، الشرطة المائلة اختيارية (<br> و <br/> كلاهما صحيح)، لكن يُفضل التبسيط بدون شرطة مائلة. تذكر: فقط العناصر الفارغة يمكن أن تحذف وسم إغلاقها؛ العناصر العادية مثل <p> و <div> يجب أن يكون لها وسم إغلاق.📖 ملخص
- مستندات HTML لها هيكل ثابت:
DOCTYPE←html(العنصر الجذر) ←head+body - الوسوم تأتي في نوعين: الوسوم المزدوجة (لها بداية ونهاية) و الوسوم الفارغة (ذاتية الإغلاق، لا محتوى)
- قاعدة التداخل: "أولاً يُفتح، وآخرًا يُغلق"، لا تتداخل بشكل متقاطع
- استخدم دائمًا الحروف الصغيرة لأسماء الوسوم؛ نمّ عادات برمجة جيدة
📝 تمارين
- اكتب صفحة كاملة: أنشئ ملف HTML بهيكل
DOCTYPEوhtmlوheadوbodyصحيح. في الجسم، أضف عنوانh1واحدًا وفقرةpواحدة وفاصل سطرbrواحدًا وخطًا أفقيًاhrواحدًا. - تمرين التداخل: استخدم وسوم
pوstrongلكتابة جملة بتداخل صحيح، ثم اكتب مثالاً بتداخل متقاطع غير صحيح عمدًا. لاحظ كيف يعرض المتصفح النسختين بشكل مختلف.
