الفرق بين عناصر Block و inline في HTML
مدرج تحت قسم: دروس
قبل البدء، سيكون من الجيد لك أن تعرف الفرق بين مصطلحي (element) ووسم (Tag) في HTML.
ينقسم العنصر في لغة HTML/XHTML إلى نوعين هما:
عناصر Block Level
العنصر من هذا النوع هو العنصر الذي يظهر في سطر جديد دائماً عند عرضه في المتصفح، حتى لو كان وسط الكلام..
لم تفهم.. خذ هذا المثال:
Bla Bla Bla, <p>I love Almashroo</p>
عند تطبيق هذا الكود (عرضه في المتصفح) سيظهر بهذا الشكل:
كما رأيتم، فبالرغم من أن الكلام كله كان في سطر واحد، إلا أن الجملة الثانية (I love Almashroo) ظهرت في سطر جديد عند تطبيقها، وذلك لأن العنصر <p></p> هو من الـ Block Level حيث يبدأ فقرة جديدة بوجوده.
وتوجد عدة وسوم (Tags) مشابهة له مثل <div> و <h1> وجماعته
الملاحظة هنا، هي أن عنصر Block Level يمكن أن يحتوي على عنصر Block Level آخر أو يحتوي على عنصر inline أو على نصوص وغيرها.
عناصر inline
العنصر من هذا النوع عند تضمينه في وسط الكلام، لن ينشئ سطراً جديداً بمحتواه، بل سيظهر في نفس الجملة..
مثال:
Bla Bla Bla, <strong>I love Almashroo</strong>
وعند تطبيقها ستظهر:
كما رأينا، فالتأثير ظهر في نفس السطر ولم ينتقل لسطر جديد أو فقرة جديدة، هذا لأن عناصر الـinline يظهر تأثيرها في نفس المكان كما ذكرت.
وتوجد عدة وسوم (Tags) مشابهة له مثل <em> و <span>
الملاحظة هنا، هي أن عناصر inline يمكن أن تحتوي على عناصر inline وعلى نصوص، لكن لا يمكنها أن تحتوي على عناصر Block Level، فكما ترون أن Block Level هنا هي الأكبر فلن تكون داخل الـinline.
عن الكاتب
عبدالعزيز الزرعوني (المبدع العربي سابقاً). من الإمارات. أحد مؤسسي ومساعد رئيس التحرير في المشروع. طالب في كلية علوم الحاسب بالجامعة الأميركية في الشارقة. يؤمن بأن العقول العربية بدأت التركيز على المفيد، وأنها في الطريق إلى التقدم. يمكن متابعته عبر Twitter
“حاولت التفصيل قدر المستطاع لأوضّح الفكرة، لكن مازلت أشك أنها غير واضحة بشرحي هذا !
فأخبروني، هل فهمتموه؟”
الشرح ممتاز
مقال جيد ومفيد جدا لمن لا يعرف هذه المعلومات
شكرا مبدعنا العزيز
ممتاز
جميل أخي ، مقال جداً مفيد
السلام عليكم
أنا مبتدأ وأحب أن أتعلم لغة الـPHP وأتابع موقع المشروع باستمرار
المهم أني استفدت من شرحك لأنها معلومات جديدة علي وتعلمتها منك عزيزي
فأردت أن أشكرك على شرحك وبانتظار سلسلة دروس css للمبتدئين
تحياتي :)
مشكور يا اخي علي شرحك و بالفعل فهمناه ما شاء الله عليك … و في انتظار جديدك
السلا م عليكم ..
اسف جدا على التعقيب رغم ان الموضوع قديم لكن صراحه ناقص الموضوع هي ماهي عناصر
inline و block level لان كذا ماعرفت ماهي عناصر ذلك وذلك
بارك الله فيك يا أخي العزيز
شرح في منته الروعة و مفهوم بطبيعة الحال
المهم أنح الجميع بقراءة الموضوع مرتان لفهم أبسط و أمتع
و بالتوفيق للجميع