عناصر inline level و block level در HTML

عناصر inline و block به چه عناصری در html گفته می شود ؟ چه تفاوتی بین عناصر درون خطی و بلاکی وجود دارد؟ اگر به دنبال یافتن پاسخ این سوالات هستید این مقاله آموزشی را از دست ندهید.

راستی لیست تگ های بلاک یا block level را میتوانید در این لینک مشاهده کنید و لیست تگ های این لاین یا inline level را در این لینک مشاهده کنید.

عناصر inline و block در HTML

در جلسه گذشته به معرفی  تگ del و تگ s و تگ strike در HTML پرداختیم در این جلسه از آموزش HTML قصد داریم شما را با عناصر inline level و block level در HTML آشنا نماییم.

عناصر در HTML با توجه به نوعشان به صورت پیش فرض به دو صورت نمایش داده می‌شوند یا به صورت block level (بلاکی) و یا به صورت inline level (درون خطی).
حال می خواهیم به معرفی این دو دسته در HTML بپردازیم .

• عناصر inline block (درون خطی)
  

  این دسته از عناصر تنها به اندازه‌ی محتوای درون خود فضا اشغال می‌کنند تگ span ، تگ img ، تگ em ، تگ a و … از جمله عناصر inline level (درون خطی) به شمار می‌روند.

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

  <em>
      آمـوزش طراحـی سایت 
  </em>
  <span> 
      در سایت میزفا 
  </span>

  

• عناصر block level (بلاکی)
  

  این دسته از عناصر یک سطر را اشغال می‌کنند تگ p ، تگ div ، تگ form و تگ li و … از جمله عناصر block level (بلاکی) به شمار می‌روند.
  برای درک بهتر عناصر block level به مثال زیر توجه کنید :

  <p>  
     آموزش طراحـی سایت 
  </p>

  کدهای مثال بالا را درون notepad کپی کرده و سپس فایل را با پسوند htm یا html ذخیره نمایید سپس بر روی فایل کلیک راست کرده و اشاره گر موس خود را بر روی گزینه open with ببرید و مرورگر مورد نظر خود را برای نمایش کد html انتخاب کنید. حال شما در صفحه مرورگر خود نتیجه‌‌ي کد وارد شده را مشاهده خواهید کرد پس از مشاهده عبارت ” آموزش طراحی سایت ” روی صفحه مرورگر ، همانند تصویر زیر بر روی صفحه مرورگر راست کلیک کرده و گزینه‌ی Inspect Element را انتخاب کنید.

   

  

همانند تصویر زیر صفحه‌‌‌‌‌‌‌‌‌‌ي Inspect Element در پایین و یا کنار صفحه مرورگر برای شما باز می شود و شما می توانید در این قسمت کدهای خود را مشاهده نمایید بر روی آموزش طراحی سایت که درون تگ p قرار گرفته است کلیک نمایید حال به صفحه مرورگر خود نگاه کنید تمامی فضایی که با رنگ آبی مشخص شده است به تگ p که یک عنصر بلاکی است اختصاص داده شده است و هیچ عنصر دیگری نمی تواند در این فضا قرار بگیرد .

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