جاري التحميل...

عناصر الكتلة والسطرية في HTML

بعد الجداول، انظر لتدفق الصفحة: لكل عنصر عادة display افتراضية. عائلتان للمبتدئين: block وinline.

ماذا يعني التدفق هنا

الترتيب الافتراضي قبل CSS التخطيط. الفقرة block؛ الرابط inline داخل الجملة.

إجابة مباشرة

Block: p وdiv والعناوين والقوائم وtable. Inline: a وstrong وem وspan وcode. احفظ الافتراضيات أولاً.

📊 Common defaults

Category	Examples	Flow habit
Block	p, div, h1–h6, ul, ol, section, table	New line, full available width (typical)
Inline	a, strong, em, span, code	Continues inside the text line

صناديق block مع قطع inline

الفقرة حاوية block؛ الروابط والتأكيد تبقى inline. div التالي صندوق block جديد.

Block paragraph with inline pieces

html

HTML Code

<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

قراءة مثال الفقرة

p صندوق فقرة
a وstrong في السطر
div يبدأ سطراً جديداً

`div` مقابل `span`

div افتراضياً block وspan inline. استخدم span لعبارات قصيرة داخل الجملة.

div versus span contrast

html

HTML Code

<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

قراءة مثال div/span

span داخل السطر
div في صف block خاص

CSS قد يغيّر display لاحقاً

تعلّم الافتراضي لتتعرف على التجاوز لاحقاً.

تمرين

فقرتان مكدستان
رابطان في فقرة
قارن span وdiv
strong دون سطر جديد إجباري
اكتب ثلاثة أمثلة لكل فئة

أخطاء شائعة

div لكل عبارة صغيرة
توقع سطر جديد من strong
نسيان تجاوز CSS

ملخص

Block ≈ سطر جديد
Inline ≈ داخل السطر
span للخطافات القصيرة
CSS لاحقاً

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة