رأيت الكثير يتساءل منذ فترة، عن معنى [عناصر Block Level] و [عناصر inline] والفرق بينهما، وقد تم شرح هذه النقطة ضمن أحد المقالات في المجتمع، لكنّي أحببت شرحه في مقال منفرد حتى ينتبه إليه الجميع كونه من المفاهيم الأساسية في لغة HTML/XHTML .
قبل ذلك، أود أن أشير إلى مقالة الأخ عبدالله المهيري بخصوص معنى كلمة عنصر (element) والفرق بينها وبين كلمة وسم (Tag) من هنا :
http://www.serdal.com/archives/2007/...ent-attribute/
ينقسم العنصر في لغة HTML/XHTML إلى نوعين هما:
عناصر Block Level
العنصر من هذا النوع هو العنصر الذي يظهر في سطر جديد دائماً عند عرضه في المتصفح، حتى لو كان وسط الكلام..
لم تفهم.. خذ هذا المثال:
عند تطبيق هذا الكود (عرضه في المتصفح) سيظهر بهذا الشكل:كود:Bla Bla Bla, <p>I love Almashroo</p>
Bla Bla Bla,
I love Almashroo
كما رأيتم، فبالرغم من أن الكلام كله كان في سطر واحد، إلا أن الجملة الثانية (I love Almashroo) ظهرت في سطر جديد عند تطبيقها، وذلك لأن العنصر <p></p> هو من الـ Block Level حيث يبدأ فقرة جديدة بوجوده.
وتوجد عدة وسوم (Tags) مشابهة له مثل <div> و <h1> وجماعته
الملاحظة هنا، هي أن عنصر Block Level يمكن أن يحتوي على عنصر Block Level آخر أو يحتوي على عنصر inline أو على نصوص وغيرها.
عناصر inline
العنصر من هذا النوع عند تضمينه في وسط الكلام، لن ينشئ سطراً جديداً بمحتواه، بل سيظهر في نفس الجملة..
مثال:
وعند تطبيقها ستظهر:كود:Bla Bla Bla, <em>I love Almashroo</em>
Bla Bla Bla, I love Almashroo
كما رأينا، فالتأثير ظهر في نفس السطر ولم ينتقل لسطر جديد أو فقرة جديدة، هذا لأن عناصر الـinline يظهر تأثيرها في نفس المكان كما ذكرت.
وتوجد عدة وسوم (Tags) مشابهة له مثل <strong> و <span>
الملاحظة هنا، هي أن عناصر inline يمكن أن تحتوي على عناصر inline وعلى نصوص، لكن لا يمكنها أن تحتوي على عناصر Block Level، فكما ترون أن Block Level هنا هي الأكبر فلن تكون داخل الـinline .
حاولت التفصيل قدر المستطاع لأوضّح الفكرة، لكن مازلت أشك أنها غير واضحة بشرحي هذا !
فأخبروني، هل فهمتموه؟
----------------------------------
الكاتب: المبدع العربي
المصدر:
المشروع - مجتمع مطوري المواقع
رد مع اقتباس
