آموزش HTML صفحه اصلی اینستاگرام ما
عنصرهای block و inline در HTML

عناصر Block و Inline در HTML


هر عنصر HTML بسته به اینکه چه نوعی از عنصر است ، یک مقدار نمایش (display) پیشفرض دارد .

دو مقدار display وجود دارد : block و inline .


عناصر سطح Block

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

عنصر <div> یک عنصر سطح block است .

مثال

<div>سلام جهان</div>
امتحان کن »

در اینجا عناصر سطح block در HTML آورده شده است :

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

عناصر Inline

یک عنصر inline در یک خط جدید شروع نمیشود و فقط به اندازه نیاز پهنا اشغال میکند .

این یک عنصر <span> داخل یک پاراگراف است .

مثال

<span>سلام جهان</span>
امتحان کن »

در اینجا عناصر inline در HTML‌ آورده شده است :

<a>
<abbr>
<acronym>
<b>
<bdo>
<dd>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<pre>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
نکته: یک عنصر inline نمیتواند شامل یک عنصر سطح block باشد !

عنصر <div>

عنصر <div> اغلب بعنوان یک نگهدارنده برای دیگر عناصر HTML استفاده میشود .

عنصر <div> صفات مورد نیاز ندارد ، اما style ، class و id صفات متداول آن هستند .

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

مثال

<div style="background-color:black;color:white;padding:20px;">
  <h2>لندن</h2>
  <p>لندن پایتخت انگلستان است . این شهر پرجمعیت ترین شهر در انگلستان است .</p>
</div>
امتحان کن »

عنصر <span>

عنصر <span> یک نگهدارنده درون خطی است که برای نشانه گذاری یک بخش از یک متن ، یا یک بخش از یک سند استفاده میشود .

عنصر <span> صفات مورد نیاز ندارد ، اما style ، class و id صفات متداول آن هستند .

هنگامیکه همراه CSS استفاده میشود ، عنصر <span> میتواند برای سبک دهی بخش هایی از متن استفاده شود :

مثال

<p>من چشم <span style="color:blue">آبی</span> دارم .</p>
امتحان کن »

چکیده فصل


تگ های HTML

تگ توضیح
<div> یک بخش در یک سند مشخص میکند (سطح block)
<span> یک بخش در یک سند مشخص میکند (inline)



پسین پیشین