آموزش HTML - عناصر بلوکی

عناصر بلوکی HTML برای ایجاد چیدمان منطقی و معنایی یک صفحه وب استفاده می‌شوند. آن‌ها به سازماندهی محتوا در بخش‌های با مفهوم کمک کرده و فهم ساختار و معنای بخش‌های مختلف صفحه وب را برای مرورگرها، موتورهای جستجو و بازدیدکنندگان سایت آسان‌تر می‌کنند. عناصر درون‌خطی (Inline) برای ساخت عناصر بلوکی کاربردی، مانند افزودن لینک‌های لنگری (Anchor) استفاده می‌شوند.

تگ‌های مختلفی وجود دارند که می‌توانید از آن‌ها برای ایجاد بلوک‌ها استفاده کنید، مانند <div>، <p>، <table> و غیره.

تمام عناصر HTML را می‌توان در دو دسته قرار داد:

• عناصر سطح بلوک (Block-level Elements)
• عناصر درون‌خطی (Inline Elements)

عناصر سطح بلوک HTML

عناصر سطح بلوک از یک خط جدید شروع می‌شوند و هر چیزی که بعد از آن‌ها می‌آید در خط بعدی ظاهر می‌شود. این عناصر ممکن است دارای حاشیه (Margin) باشند تا کمی فاصله قبل و بعد از آن‌ها ایجاد شود. این عناصر به طور پیش‌فرض تمام عرض عنصر والد خود را اشغال می‌کنند؛ شما می‌توانید عرض آن‌ها را با استفاده از ویژگی width در CSS تنظیم کنید.

فهرست عناصر سطح بلوک HTML

جدول زیر شامل فهرست تمام عناصر سطح بلوک است -

مثالی از عناصر سطح بلوک

مثال زیر عناصر سطح بلوک را نشان می‌دهد. در اینجا، ما از یک سرتیتر و دو پاراگراف استفاده می‌کنیم که با یک خط افقی از هم جدا شده‌اند.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Block Level Elements</title>
</head>

<body>
   <h3>HTML Block Level Elements</h3>
   <p>
      This line will appear in the next line
      after Heading.
   </p>
   <hr />
   <p>
      This line will appear after Horizontal
      Line.
   </p>
</body>

</html>

عناصر درون‌خطی HTML

عناصر درون‌خطی (Inline) می‌توانند در همان خط ظاهر شوند و به خودی خود خط جدیدی را شروع نمی‌کنند.

فهرست عناصر درون‌خطی HTML

جدول زیر تمام عناصر درون‌خطی را فهرست می‌کند -

مثالی از عناصر درون‌خطی

مثال زیر عناصر درون‌خطی را نشان می‌دهد. در اینجا، ما متن پاراگراف را با استفاده از عناصر درون‌خطی <b> و <i> به صورت ضخیم (Bold) و مورب (Italic) درمی‌آوریم -

<!DOCTYPE html>
<html>

<head>
    <title>HTML inline Element</title>
</head>

<body>
    <h3>Inline Elements in HTML</h3>
    <!-- Using <b> inline element -->
    <p>This <b>paragraph</b> is bold. </p>
    <!-- Using <i> inline element  -->
    <p>This is an <i>italic</i> paragraph.</p>
</body>

</html>

گروه‌بندی عناصر بلوکی و درون‌خطی

عناصر سطح بلوک و درون‌خطی را می‌توان با استفاده از تگ <div> گروه‌بندی کرد. تگ <div> یک عنصر سطح بلوک است که نقش بزرگی در گروه‌بندی تگ‌های مختلف HTML و اعمال CSS به گروه‌هایی از عناصر ایفا می‌کند.

مثال

این مثال گروه‌بندی عناصر با استفاده از تگ div را نشان می‌دهد -

<!DOCTYPE html>
<html>
<head>
   <title>HTML div Tag</title>
</head>
<body>
   <!-- First group of tags -->
   <div style="background-color:yellow">
      <h4>This is first group</h4>
      <p>Following is a list of vegetables</p>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </div>
   <!-- Second group of tags -->
   <div style="background-color:cyan">
      <h4>This is second group</h4>
      <p>Following is a list of fruits</p>
      <ul>
         <li>Apple</li>
         <li>Banana</li>
         <li>Mango</li>
         <li>Strawberry</li>
      </ul>
   </div>
</body>
</html>