HTML: عناصر HTML
افهم الفرق بين عناصر مستوى الكتلة (block-level) والعناصر السطرية (inline)، وتقن بالطريقة الصحيحة لتداخل الوسوم.
1. ما هي عناصر HTML
في HTML، العنصر (element) يشير إلى الهيكل الكامل من وسم البداية إلى وسم النهاية، بما في ذلك الوسوم نفسها والمحتوى المغلف. يحلل المتصفح كل عنصر كعقدة في شجرة DOM، ليشكل الهيكل الهرمي للصفحة.
يتكون عنصر HTML الكامل من ثلاثة أجزاء:
▶ مثال
<p>هذا عنصر فقرة</p>
<!-- وسم بداية + محتوى + وسم نهاية = عنصر كامل -->
<a href="https://example.com">انقر هنا</a>
<!-- يمكن أن يحتوي العنصر على سمات (href)، تُكتب في وسم البداية -->
ومع ذلك، ليست كل العناصر تحتوي على محتوى. بعض العناصر ليس لها محتوى ولا تحتاج إلى وسم نهاية؛ تُسمى العناصر الفارغة (void elements).
<br> <!-- عنصر فاصل سطر: لا محتوى، لا وسم نهاية -->
### ▶ مثال
<hr> <!-- خط أفقي: عنصر فارغ أيضًا -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="صورة نموذجية"> <!-- عنصر صورة: سمات فقط، لا محتوى -->
<input type="text" name="username"> <!-- عنصر إدخال -->
الفرق الرئيسي: العناصر العادية لها وسم بداية ومحتوى ووسم نهاية؛ العناصر الفارغة لها وسم بداية فقط (عادةً ما تحمل سمات)، ولا محتوى ولا وسم نهاية.
<html> هي العقدة الجذر، و <body> و <head> هما عقدتا ابن. علاقات التداخل بين العناصر تحدد علاقات الأبوة والبنوة والأخوة بين العقد. يمكنك مراجعة فصل أساسيات HTML لمراجعة مفهوم DOM.
2. عناصر مستوى الكتلة مقابل العناصر السطرية
تنقسم عناصر HTML إلى فئتين بناءً على كيفية ترتيبها في الصفحة: عناصر مستوى الكتلة (block-level elements) و العناصر السطرية (inline elements). فهم الفرق بينهما هو الخطوة الأولى لإتقان تخطيط الصفحة.
(1) عناصر مستوى الكتلة
تتميز عناصر مستوى الكتلة بأنها تشغل العرض الكامل للعنصر الأب. بغض النظر عن ضيق محتواها، فإنها دائمًا تشغل عرض الصف بالكامل، والعناصر التي قبلها وبعدها ستظهر في أسطر منفصلة.
عناصر مستوى الكتلة الشائعة موضحة في الجدول أدناه:
الوسمالوصفالوسمالوصفالوسمالوصف<h1>~<h6>العناوين 1-6<dl>قائمة وصف<article>مقال<p>فقرة<dt>مصطلح الوصف<aside>شريط جانبي<fieldset>مجموعة حقول<dd>تفاصيل الوصف<footer>تذييل<hr>خط أفقي<header>رأس<table>جدول<ol>قائمة مرتبة<nav>تنقل<div>حاوية كتلة<ul>قائمة غير مرتبة<main>المحتوى الرئيسي<form>نموذج<li>عنصر قائمة<section>قسم
<p>هذه هي الفقرة الأولى، تشغل صفًا كاملاً</p>
<p>هذه هي الفقرة الثانية، تبدأ في سطر جديد</p>
<div>
<h2>العناوين أيضًا في سطر خاص بها</h2>
<p>الفقرات داخل div أيضًا في أسطر منفصلة</p>
</div>
(2) العناصر السطرية
تتميز العناصر السطرية بأنها لا تشغل صفًا كاملاً. إنها تأخذ فقط عرض محتواها وتُرتّب من اليسار إلى اليمين داخل السطر، وتلتف تلقائيًا إلى السطر التالي عندما لا يكون العرض كافيًا.
العناصر السطرية الشائعة موضحة في الجدول أدناه:
▶ مثال
الوسمالوصفالوسمالوصف<a>ارتباط تشعبي<ins>نص مدخل<b>عريض<del>نص محذوف<strong>نص مهم<button>زر<em>تأكيد (مائل)<input>إدخال نموذج<i>مائل<img>صورة<small>نص صغير<span>حاوية سطرية<sub>حرف منخفض<sup>حرف مرتفع
<p>هذا النص يحتوي على <strong>أجزاء عريضة</strong> و <em>أجزاء مائلة</em>، والتي تظهر <span style="color: red">على نفس السطر</span>.</p>
(3) الفروق الأساسية بينهما
<!-- مقارنة مستوى الكتلة -->
<div style="border: 1px solid #e74c3c; padding: 4px;">الكتلة 1</div>
<div style="border: 1px solid #e74c3c; padding: 4px;">الكتلة 2</div>
<!-- كل div تشغل صفها الخاص، متراصة عموديًا -->
<!-- مقارنة العناصر السطرية -->
<span style="border: 1px solid #3498db; padding: 4px;">سطرية 1</span>
<span style="border: 1px solid #3498db; padding: 4px;">سطرية 2</span>
<!-- العنصران السطريان على نفس السطر، مرتبان أفقيًا -->
- عناصر مستوى الكتلة يمكن أن تحتوي على عناصر سطرية وعناصر كتلة أخرى.
- العناصر السطرية يمكنها فقط احتواء عناصر سطرية (أو نص)؛ ولا يمكنها مباشرةً احتواء عناصر من مستوى الكتلة.
- استثناء: في HTML5، يمكن لوسم
<a>أن يغلف عناصر من مستوى الكتلة، مثل تحويل بطاقة كاملة إلى رابط قابل للنقر.
3. تداخل العناصر والتسلسل الهرمي
يمكن لعناصر HTML أن تغلف بعضها البعض مثل دمى الماتريوشكا. هذه العلاقة تُسمى التداخل (nesting). يحدد هيكل التداخل العلاقات الهرمية للعناصر في شجرة DOM.
▶ مثال
(1) علاقات عُقد شجرة DOM
عندما تتداخل العناصر داخل بعضها البعض، تتشكل ثلاثة أنواع من العلاقات بينها:
- علاقة أب-ابن: العنصر الخارجي هو "العقدة الأب" للعنصر الداخلي. على سبيل المثال،
<body>هي العقدة الأب لـ<p>. - علاقة أخوة: عناصر الابن المتعددة تحت نفس الأب هي "عُقد أخوة" لبعضها البعض. على سبيل المثال،
<h1>و<p>هما أخوة عندما يكون كلاهما ابنًا لـ<body>. - علاقة سلف-حفيد: علاقة تمتد عبر مستويات متعددة من التداخل. على سبيل المثال،
<html>هي العقدة السلف لجميع العناصر.
▶ مثال
هيكل التداخل التالي يوضح بوضوح العلاقات الهرمية بين العناصر:
<body> <!-- العقدة الأب -->
<h1>عنوان الصفحة</h1> <!-- عقدة ابن + الأخ رقم 1 -->
<p> <!-- عقدة ابن + الأخ رقم 2 -->
هذه الفقرة تحتوي على <strong>نص مؤكد</strong> <!-- عقدة حفيد (ابن p) -->
بداخلها.
</p>
</body>
هيكل شجرة DOM المقابل هو كما يلي:
body
├── h1 ("عنوان الصفحة")
└── p
├── text: "هذه الفقرة تحتوي على "
├── strong
├── text: "نص مؤكد"
└── text: " بداخلها."
(2) التداخل الصحيح مقابل التداخل غير الصحيح
يجب أن يتبع التداخل مبدأ "آخر من يدخل، أول من يخرج" (LIFO) — العنصر الأعمق الذي فُتح أولاً يجب أن يُغلق آخرًا. إذا أغلقت الوسوم بشكل متقاطع، ينتج عن ذلك تداخل غير صحيح:
<!-- تداخل صحيح: أولاً يُفتح، آخرًا يُغلق -->
<div>
<p><strong>نص مهم</strong> يليه نص عادي.</p>
### ▶ مثال
</div>
<!-- تداخل غير صحيح: وسوم متقاطعة -->
<div>
<p><strong>نص مهم</p></strong>
</div>
<!-- سيحاول المتصفح تصحيح هذا الخطأ، لكنه قد يسبب مشاكل تخطيط غير متوقعة -->
- العناصر السطرية (مثل
<span>و<strong>) لا يمكنها تداخل عناصر من مستوى الكتلة (مثل<div>و<p>). - وسم
<p>لا يمكنه تداخل عناصر كتلة أخرى بداخله، مثل<div>أو<p>آخر. - التداخل العميق، رغم صحته نحويًا، يقلل من قابلية القراءة والصيانة. يُوصى بالحفاظ على التداخل ضمن 3~4 مستويات.
- استخدم ميزة "التفقد" في المتصفح (F12) لاستكشاف هيكل شجرة DOM بصريًا — إنها طريقة تعلم ممتازة.
❓ أسئلة شائعة
div، section، article)؛ العناصر السطرية (strong، em، a) فقط لتنسيق النص.<a>، الذي يمكنه تغليف عناصر مستوى الكتلة لجعل بطاقة كاملة قابلة للنقر.<strong> و <b> كلاهما غامق، <em> و <i> كلاهما مائل — ما الفرق؟<strong> يعني "هذا النص مهم" و <em> يعني "هذا النص يحتاج إلى تأكيد" — ي传达ان المعنى. <b> فقط "يجعل النص غامقًا" و <i> فقط "يجعل النص مائلًا" — يؤثران فقط على المظهر. محركات البحث وقارئات الشاشة تتعرف على دلالة <strong> و <em> لكنها تتجاهل <b> و <i>. القاعدة: استخدم <strong>/<em> لتأكيد المعنى؛ استخدم <b>/<i> أو CSS للتنسيق البصري فقط.📖 ملخص
- العنصر = وسم بداية + محتوى + وسم نهاية (عنصر عادي)، أو مجرد وسم بداية (عنصر فارغ).
- عناصر مستوى الكتلة تشغل صفوفًا كاملة ويمكنها احتواء عناصر كتلة وسطرية أخرى؛ العناصر السطرية تبقى على نفس السطر ويمكنها فقط احتواء نص أو عناصر سطرية.
- يجب أن يتبع التداخل مبدأ "آخر من يدخل، أول من يخرج"؛ لا تتداخل بشكل متقاطع.
- في شجرة DOM، تشكل العناصر ثلاثة أنواع من العلاقات: أب-ابن، أخوة، وسلف-حفيد.
📝 تمارين
- تجربة الكتلة مقابل السطري: أنشئ صفحة باستخدام اثنين
<div>(مستوى كتلة) واثنين<span>(سطري) بنفس المحتوى. أضف نمط حدودstyle="border:1px solid red"ولاحظ كيف يترتبان بشكل مختلف في المتصفح. - تمرين شجرة DOM: اكتب هيكل شجرة DOM للكود التالي (ارسم مخطط الشجرة يدويًا):
<div><h2>Title</h2><p>Text<strong>Emphasis</strong>End</p></div>
