عناصر بلوک و در خط در HTML – برنامه نویسی HTML بخش دوازدهم

ارسال توسط

در تاریخ ۱۴۰۴-۰۲-۰۲

عناصر بلوک در HTML (HTML Block Elements) برای ایجاد بلوک های منطقی و معنایی در طرح بندی صفحه های وب به کار گرفته می شوند. موتورهای جستجو و بازدید کنندگان وب سایت ها ساختارها و معنای بخش های مختلف سایت را با استفاده از این عناصر درک می کنند و آن ها نقش مهمی را در صفحه آرائی وب سایت های شما دارند. عناصر در خط HTML (Inline elements) عناصری هستند که می توانند در راستای نوشتار و در کنار همدیگر به کار گرفته شوند. این عناصر به خوانایی بیشتر عناصر صفحه وب کمک زیادی می کنند.
در اینجا انواع گوناگونی از تگ ها وجود دارند که به شکل عناصر بلوک در HTML هستند، برای مثال تگ هایی نظیر <div> ، <p> و <titel> و نظایر آن از این جمله تگ ها هستند.
تمام عناصر موجود در HTML را می توانید در دو گروه کلی دسته بندی کنید:

عناصر بلوک در HTML (Block-Level Elements)
عناصر در خط در HTML (Inline elements)

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

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

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

در جدول زیر می توانید فهرستی از عناصر بلوک در HTML را مشاهده کنید. ما تمامی این عناصر را در این سری از آموزش ها به شما آموزش داده ایم. تنظیمات مرتبط به هر کدام را نیز می توانید در سری آموزش های CSS بیابید.

Address	Article	Aside	Blockquote	Canvas
Dd	Div	Dl	Dt	Fieldset
Figcaption	Figure	Footer	From	H1- h6
Header	Hr	Li	Main	Nav
Noscript	Ol	P	Pre	Section
Table	Tfoot	Ul	Video

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

در مثالی که در پائین آماده است ما از عناصر بلوک در 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

عناصر در خط در HTML می تواند در یک خط شروع شوند. این عناصر سبب ایجاد خط جدید در صفحه نمی شوند.

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

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

A	Abbr	Acronym	B	Bdo
Big	Br	Button	Cite	Code
Dfn	Em	I	Img	Input
Kbd	Label	Map	Object	Output
Q	Samp	Script	Select	Small
Span	Storng	Sub	Sup	Textearea
Time	Tt	var

نمونه ای از کاربرد عناصر در خط در HTML

در مثالی که در پائین آمده است شما می توانید عناصر در خط HTML را مشاهده کنید. در اینجا ما بخش هایی از یک پاراگراف را با استفاده از تگ های b و i ضخیم و ایتالیک کرده ایم.

<!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>

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

عناصر در سطح بلوک و در خط می توانند با استفاده از تگ<div>در یک گروه قرار گیرند. تگ <div> یکی از عناصر بلوک در HTML است که نقش بسیار مهمی را در ایجاد گروه بندی عناصر مختلف دیگر زبان 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>