بلوک و عناصر برخط در HTML

هر یک از عناصر HTML دارای یک مقدار نمایش پیش فرض است که به نوع عنصر بستگی دارد. مقدار پیش فرض نمایش یک عنصر display value)) در بیشتر عناصر HTML به صورت بلوکی (block) یا برخط (inline) است.

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

همیشه یک عنصر سطح بلوک در HTML از سر خط جدید شروع می شود و کل پهنای موجود صفحه نمایش را اشغال می کند (تا جایی که امکان داشته باشد، عنصر از راست و چپ کشیده می شود تا صفحه را پر کند).

عنصر <div> یک عنصر سطح بلوک (block level) در HTML است. مثال:

این <div> یک عنصر سطح بلوک (block-level) است.
<div>Hello</div>
<div>World</div>

عناصر سطح بلوک در HTML عبارتند از:

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>

<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<output>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

عناصر برخط (Inline) در HTML

عنصر بر خط یا درون خط از خط جدید شروع نمی شود و تنها مقدار پهنای مورد نیاز برای نماش عنصر را اشغال می کند. مثلا بخشی از فضای پاراگراف را اشغال می کند. در مثال زیر عنصر <span> درون یک پاراگراف آمده است.

در تصویر زیر عناصر بلوکی و بر خط مقایسه شده است:

این یک عنصر برخط  <span> است.

لیست عناصر درون خط در HTML

عناصر درون خط یا برخط در HTML در زیر لیست شده است. این عناصر زمانی که استفاده شوند، از یک خط جدید شروع نشده و در ادامه خط قبلی نمایش خواهند یافت:

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<q>

<samp>

<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

     

عنصر <div> در HTML

عنصر <div> در HTML اغلب به عنوان محفظه و کانتینر برای سایر عناصر HTML استفاده می شود. عنصر <div> دارای خصیصه الزامی نیست، اما از خصیصه های style و class به طور رایج استفاده می شود.

زمانی که HTML به همراه CSS استفاده شود، می توان از عنصر <div> برای استیل بندی بلوک های محتوای یک وب پیج استفاده کرد.

مثال

<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

حاصل اجرای کد فوق به صورت زیر خواهد بود:

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

عنصر <span> در HTML

عنصر <span> در HTML اغلب به عنوان محفظه یا کانتینر متن استفاده می شود. عنصر <span> دارای خصیصه الزامی نیست، اما از خصیصه های style و class به طور رایج استفاده می شود.

زمانی که HTML به همراه CSS استفاده شود، می توان از عنصر <span> برای استیل بندی بخشی از بلوک های متن یک وب پیج استفاده کرد.

مثال

<h1>My <span style="color:red">Important</span> Heading</h1>

حاصل اجرای قطعه کد فوق به صورت زیر خواهد بود:

My Important Heading

تگ های گروه بندی عناصر در HTML

برای گروه بندی عناصر در یک سند HTML می توان از تگ های زیر استفاده کرد:

<div>

برای تعریف بخشی از یک سند (سطح بلوکی)

<span>

برای تعریف بخشی از یک سند (درون خط)

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.