ممکن است در هنگام کدنویسی html با این مشکل مواجه شوید که بعضی عناصر را با اینکه در خطی جداگانه نوشته اید ولی باز هم کنار دیگر الـمنت ها در مرورگر نمایش داده شوند. درست است که شما با تگ می توانید عنصر را در یک خط جدا قرار دهـید ولی همیشه نمی توان از این تگ برای جدا کردن عناصر استفاده کرد. عناصر html به دو گروه inline level و block level تقسیم می شوند که این ویژگی ها، نقش تعیین کننده ای در طراحی وب سایت شما دارند.
تگ ها و یا عناصر Block Level
این المان ها ( elements ) تمام فضای خط را به خود اختصاص می دهند و در صورتی که یک تگ در کنار آنها قرار گیرد آنرا به خط بعد منتقل می کنند .به عناصر و یا تگ هایی که یک خط را بصورت کامل اشغال کنند عناصر Block Level می گویند . این تگ ها بدون در نظر گرفتن محتوا و فضای اشغال شده به سایر تگ ها و المان ها اجازه نمی دهند که در کنار آنها قرار بگیرند و سایر تگ ها را به زیر خود منتقل خواهند کرد . ممکن است متن و یا محتوای درون این تگ ها چند حرف و یا یک خط کامل باشد .
به عنوان مثال قطعه کد زیر را در نظر بگیرید:
<!DOCTYPE html>
<html>
<head>
<meta charst="utf-8"/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<h1> این تگ بلاکی می باشد </h1> <p>این تگ نیز بلاکی می باشد </p>
</body>
</html>
شاید برداشت شما این باشد که محتوای دو تگ h1,p باید در کنار هم قرار بگیرند. اما خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:
تگ های inline-level
این Element ها خطی اند و اگر یک تگ inline level دیگر را کنار آن ها بنویسیم کنار تگ قبلی ما قرار می گیرد و فضایی که لازم دارد را پر می کند و فضای اضافی اشغال نمی کند. در واقع فقط تا جایی که محتوا دارند را اشغال می کنند.
به قطعه کد زیر توجه کنید که شامل چندین عنصر inline-level می باشد:
<!DOCTYPE html>
<html>
<head>
<meta charst="utf-8"/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<span> تگ این لاین </span> <span> دومین تگ این لاین </span> <a href="https://pzof.ir "> طراحی سایت </a>
</body>
</html>
خروجی قطعه کد بالا در مرورگر به این شکل خواهد بود:
- تگ های Inline level میتوانند درون تگ های inline level دیگر قرار گیرند.
- تگ های Inline level میتوانند درون تگ های Block level قرار گیرند.
- تگ های Block level نمیتوانند درون تگ های inline level قرار گیرند.
- تگ های Block level میتوانند درون تگ های Block level دیگر قرار گیرند.
- با css می توان level هر عنصر را تغیر داد ( درجلسات css با آن ٱشنا خواهید شد).
به طور کلی انچه که در این مقاله مطرح کردیم را می توانید در عکس زیر مشاهده کنید:
دقت کنید که برای معتبر بودن کدهایتان در html5 و xhtml باید بدانید که کدام عناصر خطی اند و کدام عناصر بلاکی. چون مثلا در xhtml نمی توان عناصر بلاکی را درون عناصر خطی نوشت ولی در html5 استثناء وجود دارد.
نویسنده مقاله کامنت گذاری را غیر فعال کرده است.