في هذا الدرس 6تصفّح المواضيع
يمتلك كل عنصر في لغة HTML سلوك عرض افتراضي أصيل يحكمه نموذج التنسيق البصري في المتصفح. وتنقسم العناصر في جوهرها الهيكلي إلى فئتين رئيسيتين: العناصر الكتلية Block-level والعناصر السطرية Inline-level. ويعتبر فهم الطريقة التي يتدفق بها كل نوع على مساحة الصفحة حجر الأساس في بناء تخطيطات ويب سليمة ومتماسكة.
HTML
<!-- Block element reserves full width -->
<div>Full width container</div>
<!-- Inline elements flow together on the same line -->
<span>First word</span>
<a href="#">Link target</a>
<strong>Emphasized</strong>يبدأ العنصر الكتلي دائماً من سطر جديد ومستقل على الشاشة، ويتمدد أفقياً ليشغل كامل العرض المتاح له داخل الحاوية الأم بنسبة 100%، مما يدفع أي عنصر يليه إلى السطر التالي تلقائياً. وفي المقابل، لا يحجز العنصر السطري سوى المساحة الدقيقة التي يحتاجها محتواه الداخلي فقط، وينساب بنعومة بجانب الكلمات المجاورة دون كسر تدفق السطر.
تمثل العناصر الكتلية ركائز البناء الهيكلي لتخطيط صفحات الويب. ومن أبرز الأمثلة عليها عنصر التقسيم
<div> والفقرات <p> والعناوين <h1> إلى <h6> والقوائم <ul> و <ol> وعناصرها <li>، بالإضافة إلى الجداول <table> والاقتباسات الكتلية <blockquote> والنماذج <form>. وتقوم هذه العناصر بإنشاء أقسام رأسية متباينة تنظم تدفق المستند.
HTML
<div>
<h2>Container Header</h2>
<p>Block elements start on a new line and span full width.</p>
</div>من أهم السمات الهندسية للعناصر الكتلية احترامها الكامل لنموذج الصندوق في CSS؛ حيث يمكنك تعيين أبعاد دقيقة للعرض
width والارتفاع height، وتطبيق هوامش خارجية علوية وسفلية وهوامش حشو داخلية بكفاءة عالية. وتجعل هذه القدرة التنبؤية العناصر الكتلية الخيار المثالي لبناء البطاقات والشبكات والأعمدة البرمجية.يعد عنصر التقسيم
<div>، وهو اختصار لكلمة division، حاوية كتلية عامة لا تحمل أي دلالة لغوية مسبقة. ويعمل كغلاف هيكلي محايد يجمع عدة عناصر مترابطة معاً، مما يتيح للمطورين تطبيق فئات التنسيق وإسناد المعرفات الفريدة وإدارة أجزاء متكاملة من شجرة DOM برمجياً عبر لغة جافا سكريبت.
HTML
<div>
<img src="images/examples/studio-emblem.webp"
alt="Quantum Core Cube" width="120" height="120">
<h3>Quantum Cloud Engine</h3>
<p>High-throughput edge computing module.</p>
<div>
<a href="#specs">View Specs</a>
</div>
</div>على الرغم من المرونة الفائقة التي يوفرها عنصر
<div> وأهميته في تجميع الكتل المترابطة، إلا أنه يجب الحذر من الإفراط العشوائي في استخدامه لكي لا تتحول الصفحة إلى فوضى من الحاويات غير المفهومة. وحيثما توفرت وسوم متخصصة للمحتوى كالعناوين والفقرات والقوائم والجداول والنماذج، فإن استخدامها يظل هو الخيار القياسي الأفضل.تعمل العناصر السطرية Inline-level داخل النسيج الطبيعي للفقرات والنصوص، حيث تقوم بتنسيق أو تعديل عبارات وكلمات محددة دون الإخلال بترابط الفقرة أو كسر سطرها. ومن أشهر الأمثلة عليها عنصر التغليف السطري
<span> والروابط <a> ونصوص التأكيد <strong> و <em> ورموز الأكواد <code>.يلخص الجدول المقارن التالي الفروق الهندسية والوظيفية الجوهرية بين العناصر الكتلية والعناصر السطرية في لغة HTML:
| معيار المقارنة | العناصر الكتلية (Block) | العناصر السطرية (Inline) | أمثلة شائعة |
|---|---|---|---|
| التدفق داخل السطر | تبدأ دائماً في سطر مستقل جديد | تنساب طبيعياً داخل نفس السطر النصي | كتلي: <div> و <p> / سطري: <span> و <a> |
| العرض الافتراضي | تتمدد لتشغل كامل عرض الحاوية الأب (100%) | تأخذ عرض محتواها النصي الداخلي فقط | كتلي: <h1>..<h6> / سطري: <strong> |
| تحديد العرض والارتفاع | تستجيب كلياً لخصائص width و height | يتجاهل المتصفح تعديل عرضها وارتفاعها المباشر | كتلي: <ul> و <ol> / سطري: <code> |
| الهوامش العمودية | تُطبَّق بالكامل أعلى العنصر وأسفله | لا تدفع الأسطر المجاورة عمودياً | كتلي: <blockquote> / سطري: <sub> و <sup> |
| الوظيفة المعمارية | تقسيم هيكل الصفحة والأقسام الكبرى | تمييز الكلمات والعبارات والروابط وسط الجمل | كتلي: <table> و <form> / سطري: <em> |
HTML
<p>
Learn modern <a href="/tutorials/html">HTML</a>
with <strong>practical</strong> exercises and
<code>npm test</code> command checks.
</p>من القواعد الهندسية الجوهرية في نموذج العرض السطري أن محرك المتصفح يتجاهل تماماً قيم العرض والارتفاع المحددة لعناصر السطور عبر CSS. وعلاوة على ذلك، فبينما تعمل الهوامش الأفقية يميناً ويساراً بشكل طبيعي لدفع الكلمات المجاورة، فإن الهوامش الخارجية الرأسية العلوية والسفلية ليس لها أي تأثير على تباعد السطور.
يمثل عنصر التغليف
<span> المقابل السطري لعنصر التقسيم الكتلي <div>؛ فهو لا يحمل أي مظهر بصري افتراضي ولا يمتلك دلالة لغوية خاصة بمفرده، وإنما يعمل كخطاف سطري خفيف لتطويق أجزاء محددة من النص بهدف تلوينها أو تمييز خطوطها أو تطبيق معالجات لغوية مخصصة عبر CSS.
HTML
<p>
System status is currently
<span title="Active Server">Online</span>
with <span title="Response Time">12ms</span> latency.
</p>نظراً لأن وسم
<span> لا يولد أي فواصل أسطر، فإنه يندمج بسلاسة متناهية في منتصف الجمل والفقرات المستمرة وأرقام الجداول المالية والشارات المصغرة. وحينما تحتاج لتلوين كلمة معينة أو إبراز مصطلح تقني دون المساس بتدفق السطر، فإن <span> هو المعيار المعتمد والمثالي.تضع مواصفة HTML5 معايير هيكلية صارمة تحكم قواعد التداخل السليم بين العناصر الكتلية والسطرية. وتتمثل القاعدة الكبرى في أن الحاويات الكتلية يمكنها احتضان عناصر كتلية أخرى وعناصر سطرية بكل حرية، بينما لا يجوز للعناصر السطرية أو وسوم الفقرات أن تحتوي في داخلها على عناصر كتلية أبداً.
HTML
<!-- Valid Clean Structure -->
<div>
<h3>Product Feature</h3>
<p>Explore our <span title="Core API">API</span> docs.</p>
</div>
<!-- INVALID ANTI-PATTERN: Never put div inside p -->
<!-- <p>Intro text <div>Broken Box</div> Closing</p> -->من أكثر الأخطاء الشائعة بين المطورين وضع عنصر كتلي مثل
<div> داخل وسم الفقرة <p>. وبحسب خوارزميات تحليل HTML القياسية، فإن المتصفح عند مواجهته لوسم كتلي داخل فقرة يغلق الفقرة قسرياً على الفور، مما يشطر البنية إلى ثلاث عقد مشوهة في شجرة DOM ويفسد محددات التنسيق واختبارات الجودة.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس المعمارية الكاملة للعناصر الكتلية والسطرية في HTML: تدفق الكتل على كامل السطر مقابل انسياب السطور، واحترام نموذج الصندوق والأبعاد، وتجميع الهيكل بواسطة div، والتغليف النظيف للنصوص عبر span، وقواعد التداخل المعتمدة لمنع تشوه DOM. الخطوة التالية: سننتقل في الدرس القادم إلى استكشاف خاصيتي الفئات class والمعرفات id في تنظيم وتنسيق عناصر الصفحة.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 6 مفهومةأول بطاقة، أول خطوة
- 01 Block Element عنصر كتلي
- عنصر في لغة HTML يبدأ دائماً من سطر جديد ويشغل كامل العرض المتاح له داخل الحاوية الأم.
- للمراجعة
- 02 Inline Element عنصر سطري
- عنصر يتدفق بنعومة داخل النص دون بدء سطر جديد، ويشغل فقط المساحة الدقيقة التي يحتاجها محتواه الداخلي.
- للمراجعة
- 03 Div Container حاوية التقسيم
- عنصر كتلي عام يُستخدم لتجميع عدة عناصر مترابطة معاً لتسهيل تطبيق التنسيق والتخطيط والبرمجة.
- للمراجعة
- 04 Span Element عنصر التغليف السطري
- عنصر سطري عام يُستخدم لتطويق مقاطع محددة من الكلمات والجمل لتطبيق تنسيقات أو معالجات برمجية مخصصة.
- للمراجعة
- 05 Box Model نموذج الصندوق
- الإطار الهيكلي في CSS الذي يحدد كيفية احتساب أبعاد العنصر ومساحات الحشو والحدود والهوامش الخارجية على الشاشة.
- للمراجعة
- 06 DOM Nesting تداخل شجرة المستند
- الترتيب الهرمي لعناصر الصفحة بوضع عناصر فرعية داخل عناصر رئيسية وفق القواعد القياسية لمحلل لغة HTML5.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 4 مفهومةأول بطاقة، أول خطوة
- 01 DOM DOM
- Document Object Model
- النموذج الهيكلي لشجرة كائنات مستند HTML الذي يبنيه المتصفح لمعالجة وتعديل عناصر الصفحة برمجياً.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- لغة صفحات التنسيق الانسيابية المستخدمة لتصميم وتنسيق وضبط العرض البصري لعناصر ومستندات HTML.
- للمراجعة
- 03 W3C W3C
- World Wide Web Consortium
- المنظمة الدولية المسؤولة عن تطوير وصيانة المعايير القياسية العالمية للغات الويب مثل HTML وCSS.
- للمراجعة
- 04 WCAG WCAG
- Web Content Accessibility Guidelines
- المعايير الدولية القياسية المعتمدة لضمان إتاحة محتوى وتطبيقات الويب لكافة المستخدمين بما فيهم ذوي الإعاقة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
افتح أدوات المطور في المتصفح وافحص عنصري div وspan وتحقق من سلوك العرض واختلاف حجز السطر والمساحة المشغولة.
-
قم بإنشاء بطاقة واجهة مستخدم متناسقة تحتوي على عنوان وفقرة ورابط مضمن داخل حاوية div كتلية منظمة.
-
قم بتطويق عبارات ومصطلحات هامة داخل فقرة نصية باستخدام وسوم span المنسقة دون كسر تسلسل وانسياب السطر.
-
ابحث عن أي تداخل غير سليم كإدراج div داخل وسم فقرة p وقم بإعادة هيكلته ليتبع معايير التداخل القياسية الصحيحة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.