Block level Elements
همانطور که در قسمت قبل توضیح دادیم این‌ها المان‌هایی هستند که دیگر Block-level و inline element ها را درون خود جای می‌دهند. برای شناساییِ این نوع المان‌ها می‌توانید به دنبال مشخصه‌هایشان بگردید:
- معمولا بر روی خط خودش و یا بر روی چندین خط نشان داده می‌شود. المان‌های دیگر احتمالا بالا یا در زیر آن جای می‌گیرند، اما نه در هر دو طرفش (گرچه با دست‌کاری تنظیمات پیش‌فرض ممکن است این اتفاق نیز بیافتد.)
- المان‌های دیگر را در خود جای می‌دهد
به چند مثال از تگ های با ویژگی block-level توجه کنید:
- h1، h2، h3 تا h6
- p
- div
- blockquote
- u1 و o1
- form
زمانی که یک پاراگراف درست می‌کنید نیازی نیست جایگاه خط جدید را برای سایت مشخص کنید، چرا که تگ‌های بسته و باز p خود این کار را برای شما انجام می‌دهند.
متن نوشته شده برای صفحه About Us را در نظر بگیرید:
<h2>About Us</h2>
<p><span class="fun">Bubble Under</span> is a group of diving
enthusiasts based in the south-west UK who meet up for diving
trips in the summer months when the weather is good and the
bacon rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and to
ensure that everyone gets a trustworthy dive buddy.</p>
<p>Although we're based in the south-west, we don't stay on our
own turf: past diving weekends away have included trips up to
Scapa Flow in Scotland and to Malta's numerous wreck
sites.</p>
<p>When we're not diving, we often meet up in a local pub to
talk about our recent adventures (<em>any</em> excuse,
eh?).</p>
<p>Or as our man Bob Dobalina would put it:</p>
<blockquote class="fun">
<p>"Happiness is a dip in the ocean followed by a pint or twoof Old Speckled Hen. You can quote me on that!"</p>
</blockquote>
تگ <h2>و هر سه پاراگراف‌ها المانِ block-level به حساب می‌آیند. بخش‌های حاوی محتوا را مشاهده کنید، مشخص است که بالا و پایین هر کدامِ آن‌ها به طور خودکار از یک‌دیگر جدا شده‌اند.
در عکس 4.1 می‌بینید که چگونه المان‌های block-level از یک‌دیگر متمایز شده‌اند. بلوک‌های محتوایی که از یک‌دیگر جدا شده‌اند نشان‌دهنده استفاده از المان‌های block-level می‌باشند.
Inline Elements
راه ساده‌ای برای تشخیص این نوع المان‌ها آن است که بدانید آن‌ها درون المان‌های دیگر جای می‌گیرند. داستان جعبه‌های کوچک و بزرگی را که درون یک‌دیگر جای می‌گیرند به خاطر آورید، ممکن است جعبه‌ای حاوی یک یا چندین عکس در دست داشته باشیم، اما نمی‌توانیم یک جعبه را درون یک عکس جای دهیم. از نظر فیزیکی این کار معقول و شدنی نیست! به همین ترتیب نیز قرار دادن المان‌های block-level درون Inline ها غیر ممکن است. مثال خوبی از inline element ها span می‌باشد. (در فصل سوم به طور کامل این مبحث پوشش داده شد) که برای style دهی گروهی به کلمات مشخصی از محتوای سایت ما استفاده می‌شد:
<p><span class="fun">Bubble Under</span>is a group of diving
enthusiasts based in the south-west UK who meet up for diving
trips in the summer months when the weather is good and the
bacon rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and to
ensure that everyone gets a trustworthy dive buddy.</p>
نمونه‌های دیگری از inline element ها به قرار زیر است:
- em
- strong
- cite
- a
هر کدام از نمونه‌های بالا را می‌توان بر روی کلمه ‘Bubble Under’ اعمال کرد:
<p><em>Bubble Under</em>is a group of diving enthusiasts…</p>
<p><strong>Bubble Under</strong>is a group of diving
enthusiasts…</p>
<p><cite>Bubble Under</cite>is a group of diving enthusiasts…</p>
<p><a href="http://www.bubbleunder.com/">Bubble Under</a>is a
group of diving enthusiasts…</p>
در واقع حتی المانِ img نیز از دسته inline element ها به شمار می‌آید، گرچه به صورتی متفاوت از سایر المان‌های inline از آن استفاده می‌کنیم. در واقع img اطلاعاتی در رابطه با چگونگیِ قرار گرفتن مطلب درون وبسایت ما به مرورگر نمی‌دهد، در واقع یک تصویر نیازی به دادن چنین اطلاعاتی به مرورگر ندارد و تنها یک عکس است.
Inline در Inline-ای دیگر
اینکه از یک المان inline درون دیگری استفاده کنیم ایرادی ندارد. به مثالی در این رابطه توجه کنید:
<p><span class="fun"><a href="http://www.bubbleunder.com/">Bubble
Under</a></span>is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the summer
months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut the
costs of accommodation and travel and to ensure that everyone
gets a trustworthy dive buddy.</p>
حتی می‌توان تعداد زیادی از این المان‌ها را درون یکی از آن‌ها جایگذاری کرد، گرچه شاید دیدن نمونه‌ای چون مثال پایین اندکی شما را به چالش بکشد(!) اما یک کدِ HTML قابل قبول به شمار می‌آید:
<p><strong><em><cite><a href="http://www.bubbleunder.com/">Bubble
Under</a></cite></em></strong>is a group of diving
enthusiasts…</p>
یکی از قوانین مهمِ XHTML قرینه بودن زوج تگ‌های درون کد می‌باشد، به نمونه زیر توجه کنید:
<strong>
<em>
<cite>
<a href="http://www.bubbleunder.com/">
Bubble Under
</a>
</cite>
</em>
</strong>
قانون قرینه بودن و روبه‌روی هم قرار داشتن تگ‌ها در تمامی المان‌های XHTML باید رعایت شود.
تگِ Inline هرگز نمی‌تواند تگ‌های Block-level را درون خود جای دهد.
در بخش قبل به خوبی نحوه استفاده از یک inline element را دیدیم. حالا به شما آن چیزی را که به هیچ وجه نباید انجام دهید نشان می‌دهیم:
based in the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut the
costs of accommodation and travel and to ensure that everyone
gets a trustworthy dive buddy.</p></span>
چرا مثال بالا اشتباه است؟ خوب، آن‌چه در این‌جا با آن مواجه هستیم قرار گرفتن یک block-level element به نام p درون یک Inline element با نام span می‌باشد. در فصل نهم به تفصیل در رابطه با بازنگری و عیب‌یابی سایت با هم صحبت می‌کنیم، در این‌جا تنها به خاطر داشته باشید که هرگز نمی‌توان block-level element را درون یک Inline element جای دهیم.
گرچه یک حالت خاص در این‌جا وجود دارد که در HTML5 معرفی می‌شود. شما می‌توانید لینکی را برای چندین آیتم معرفی کنید، پس در صورتی که هرچه به غیر از HTML5 را معرفی کرده باشید قطعه کدی مانند زیر غلط می‌باشد:
<a href=”monkey.htm”><h1>The Monkey House</h1>
<div>Purveyors of fine simian products</div></a>
در صورتی که --<!DOCTYPE html>-- را Html5 معرفی کرده باشید کدِ نمونه بالا کاملا درست است.
دلیل اصلی مطرح کردن مبحث بالا آن است که معمولا وب‌نویس‌ها تفاوت‌های بین Inline element و block-level element را نادیده می‌گیرند و این در حالی است که این دو تفاوت‌های زیادی با یک‌دیگر دارند، مخصوصا زمانی که پایِ CSS به میان آورده می‌شود.
در بخش بعد درباره شیوه Syle-دهی به تگ‌های Inline و block-level بیشتر صحبت خواهیم کرد
