الفرق بين العناصر Block وInline في HTML مع شرح عملي
لو انت بتتعلم HTML من البداية، لازم تكون فاهم الفرق بين نوعين أساسيين من عناصر HTML وهما: العناصر البلوكية (Block Elements) والعناصر المضمنة (Inline Elements). النوعين دول ليهم تأثير مباشر على تنسيق الصفحة وشكل المحتوى، وفهمهم هيساعدك تبني صفحات ويب منظمة وسهلة القراءة.
يعني إيه عنصر في HTML؟
العنصر أو Element في HTML هو أي وسم بيتم استخدامه داخل الصفحة علشان يعرض محتوى معين. كل عنصر ليه وظيفة وسلوك معين. بعض العناصر بتتعرض كسطر كامل والبعض التاني بيظهر داخل السطر.
الفرق الرئيسي بين Block و Inline
العناصر في HTML من حيث طريقة عرضها بتنقسم لنوعين:
- Block Elements: العناصر اللي بتبدأ في سطر جديد وتمتد على عرض الصفحة بالكامل.
- Inline Elements: العناصر اللي بتظهر وسط الكلام وبتكمل معاه في نفس السطر.
العناصر البلوكية (Block Elements)
العناصر البلوكية بتتعرض كسطر مستقل. يعني أول ما تكتبها في الكود، هتلاحظ إنها بتنزل في سطر جديد وتاخد عرض الصفحة بالكامل.
أشهر الأمثلة على العناصر البلوكية:
-
<div>: عنصر تجميعي بدون تنسيق افتراضي، بيستخدم في تنظيم المحتوى. <p>: لكتابة الفقرات.<h1> ... <h6>: لكتابة العناوين.<form>: نموذج إدخال البيانات.<section>: لتقسيم الصفحة لأقسام مستقلة.-
<article>,<footer>,<header>: عناصر هيكلية (Semantic).
خصائص العناصر البلوكية
- بتبدأ في سطر جديد تلقائيًا.
- بتمتد بعرض الصفحة بالكامل حتى لو المحتوى قصير.
- ممكن تحتوي على عناصر Block أو Inline.
العناصر المضمنة (Inline Elements)
العناصر المضمنة بتظهر داخل السطر، جنب العناصر التانية. يعني مش بتبدأ سطر جديد، وبتاخد بس المساحة اللي محتاجاها.
أشهر الأمثلة على العناصر المضمنة:
-
<span>: لتنسيق جزء صغير من النص بدون أي تأثير على السطر. <a>: لإضافة روابط.<strong>: لتوضيح أهمية جزء من النص (يظهر Bold).<em>: لتوكيد المعنى (يظهر Italic).<img>: لإدراج الصور.<input>: لإدخال بيانات المستخدم.
خصائص العناصر المضمنة
- بتظهر داخل نفس السطر مع المحتوى التاني.
- مبتاخدش سطر جديد.
- مبتقدرش تحتوي عناصر Block جواها.
مقارنة بين العناصر Block و Inline
| الخاصية | Block Element | Inline Element |
|---|---|---|
| يبدأ في سطر جديد؟ | نعم | لا |
| يمتد على عرض الصفحة؟ | نعم | فقط حسب المحتوى |
| يحتوي عناصر أخرى؟ | Block أو Inline | عادة فقط Inline |
| أمثلة | div, p, h1, form | span, a, img, strong |
مثال عملي يوضح الفرق
<div> <h2>عنوان رئيسي</h2> <p>دي فقرة بتشرح الفرق بين <span> و العناصر التانية</span> في HTML.</p> </div>
ليه الموضوع ده مهم؟
فهم الفرق بين Block و Inline هيساعدك تتحكم في تنسيق الصفحة. لو مشيت بعشوائية، هتلاقي التصميم مكركب ومش مرتب.
مثلاً، لو استخدمت عنصر Inline مكان Block في بناء هيكل الصفحة، ممكن العناصر تتداخل أو تطلع بشكل غير متوقع.
استخدام div و span بشكل ذكي
العنصر <div> هو Block وبيستخدم في تقسيم الصفحة، لكن العنصر
<span> هو Inline وبيستخدم غالباً مع CSS لتغيير شكل النصوص
داخل السطر.
الاتنين دول مهمين جدًا في كتابة كود HTML نظيف وقابل للتنسيق.
خلاصة الدرس
دلوقتي بقيت عارف إن كل عنصر في HTML ليه طريقة عرض خاصة، يا إما Block بياخد سطر كامل، أو Inline بيظهر جوا السطر. استخدام النوع المناسب في المكان المناسب هو اللي هيساعدك تبني صفحة ويب منظمة وسهلة القراءة.
وفي دروس جاية إن شاء الله هنتعلم إزاي نستخدم CSS مع العناصر دي علشان نتحكم في شكلها بالكامل.
كلمة أخيرة
وبكده نكون اتعرفنا على الفرق بين العناصر البلوكية Block والعناصر المضمنة Inline في HTML من كورس تعلم HTML من الصفر.
ولو فيه أي مشكلة واجهتك في موضوع النهاردة ممكن تكتبها في تعليق تحت الفيديو وان شاء الله هرد عليك في أسرع وقت ممكن واتمني تكون فهمت موضوع النهاردة وفي النهاية لو عجبك موضوع النهاردة ماتنساش تعمل لايك وشير للفيديو وتشترك في القناة وتفعل زر الجرس علشان يوصلك كل جديد من فيديوهاتنا واشوفك في فيديو جديد والي اللقاء