عنصر Block و inline در HTML

در این بخش از آموزش های HTML میخواهیم با عناصر یا تگ های بلاکی یا Block و اینلاینی یا Inline در زبان HTML آشنا شویم.

هر عنصر HTML بسته به نوع عنصر آن یک مقدار نمایش پیش فرض دارد.

بطور کلی حالت نمایش تگ های HTML به ۲ صورت میباشد:

نمایش بلاکی یا Block یا تمام عرضی
نمایش درون خطی یا Inline یا بین تگی

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

httpatomoreillycomsourceoreillyimages531486

عناصر Block-level

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

مانند:

<div>
<h1> – <h6>
<p>
<form>

مثال:

<p>سلام به آپ وب خوش آمدید</p>
<div>سلام به آپ وب خوش آمدید</div>

1 2	<p>سلام به آپ وب خوش آمدید</p> <div>سلام به آپ وب خوش آمدید</div>

توضیح مثال بالا:

همانطور که پیش تر توضیح داده شد تگ های p و div در دسته تگ های بلاکی قرار میگیرند یعنی تمام عرض سطر را به خود اختصاص میدهند.

ما با استفاده از زبان CSS به این تگ ها حاشیه داده ایم، فقط برای اینکه ببینید تمام عرض سطر را به خود اختصاص میدهند.

در اینجا لیست کامل تگ های بلاکی یا block در HTML آمده است:

<aside>

<dd>

<div>

<dl>

<dt>

<form>

<hr>

<li>

<main>

<nav>

<ol>

<p>

<pre>

<table>

<tfoot>

<ul>

<video>

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

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

مانند:

<span>
<a>
<img>

مثال:

<body>
 
<a href="https://upweb.ir/">سایت فروش هاست آپ وب</a>
<span>Upweb</span>
<i>Upweb</i>
<b>Upweb</b>
 
</body>

1

2

3

4

5

6

7

8

<body>

<span>Upweb</span>

<i>Upweb</i>

<b>Upweb</b>

</body>

نتیجه:

در مثال بالا از چندین تگ اینلاینی ( تگ های a و span و i و b ) استفاده شده است ،همانطور که گفتیم تمامی تگ های اینلاینی در یک سطر درکنار یک دیگر قرار میگیرند.

در اینجا لیست کامل تگ های درون خطی یا inline در HTML آمده است:

<a>

<abbr>

<b>

<bdo>

<big>

<br>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<q>

<samp>

<small>

<span>

<sub>

<sup>

<time>

<tt>

<var>

مثال ترکیبی از عناصر اینلاینی و بلاکی در HTML:

استفاده از تگ اینلاینی در داخل تگ بلاکی ( یعنی استفاده از span در داخل p )

<!DOCTYPE html>
<html>
<head>
<style>

.mysite{
 color:white;
 padding:2px 5px;
}

.cr{background-color:#F44336;}
.cb{background-color:#2196F3;}
.cg{background-color:#4CAF50;}
.cs{background-color:#607D8B;}

</style>
</head>
<body>

<p> WebSite <span class="mysite cr">upweb.ir</span> آموزش جامع </p>
<p> WebSite <span class="mysite cb">upweb.ir</span> آموزش جامع </p>
<p> WebSite <span class="mysite cg">upweb.ir</span> آموزش جامع </p>
<p> WebSite <span class="mysite cs">upweb.ir</span> آموزش جامع </p>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

<style>

.mysite{

color:white;

padding:2px 5px;

}

.cr{background-color:#F44336;}

.cb{background-color:#2196F3;}

.cg{background-color:#4CAF50;}

.cs{background-color:#607D8B;}

</style>

</head>

<body>

<p> WebSite <span class="mysite cr">upweb.ir</span> آموزش جامع </p>

<p> WebSite <span class="mysite cb">upweb.ir</span> آموزش جامع </p>

<p> WebSite <span class="mysite cg">upweb.ir</span> آموزش جامع </p>

<p> WebSite <span class="mysite cs">upweb.ir</span> آموزش جامع </p>

</body>

</html>

عنصر <div> در HTML

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

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

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

مثال:

<body dir="rtl">

<div class="mydiv bg-green">
 <h2>بخش اول</h2>
 <p>سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت</p>
 </div>

<div class="mydiv bg-blue">
 <h2>بخش دوم</h2>
  <p>سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت</p>
</div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

</div>

</div>

</body>

عنصر span در HTML

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

مثال:

<body>

<h1> tag span </h1>

<p>salam khobi? <span style="color:blue;font-weight:bold">mamnoon</span> shoma chetorid? <span style="color:darkolivegreen;font-weight:bold">besyar ali</span> </p>

</body>
</html>

1

2

3

4

5

6

7

8

<body>

<p>salam khobi? <span style="color:blue;font-weight:bold">mamnoon</span> shoma chetorid? <span style="color:darkolivegreen;font-weight:bold">besyar ali</span> </p>

</body>

</html>

نکته

تگ span در حالت عادی هیچ استایل خاصی نداره ولی خب ما با استفاده از CSS میتونیم به این تگ استایل بدیم.

خلاصه ی فصل

دو مقدار نمایش وجود دارد: بلوکی(Block) و عناصر درون خطی(Inline)

یک عنصر در سطح بلوک همیشه از یک خط جدید شروع می شود و تمام عرض موجود را اشغال می کند
یک عنصر درون خطی روی یک خط جدید شروع نمی شود و فقط به اندازه لازم عرض می گیرد
عنصر <div> یک سطح بلوک است و اغلب به عنوان یک محفظه برای سایر عناصر HTML استفاده می شود
عنصر <span> یک محفظه درون خطی است که برای علامت گذاری بخشی از یک متن یا بخشی از یک سند استفاده می شود.

عنصر Block و inline در HTML

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

عناصر Block-level

توضیح مثال بالا:

در اینجا لیست کامل تگ های بلاکی یا block در HTML آمده است:

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

در اینجا لیست کامل تگ های درون خطی یا inline در HTML آمده است:

مثال ترکیبی از عناصر اینلاینی و بلاکی در HTML:

عنصر <div> در HTML

عنصر span در HTML

نکته

خلاصه ی فصل

مطالب مرتبط

آموزش متصل کردن دامنه به کلودفلر (CloudFlare) بصورت جامع

آموزش احراز هویت دامنه ir در ایرنیک بصورت جامع

مقایسه وردپرس و بلاگر بصورت جامع

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده