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

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

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

عناصر بلاک (Block-level Elements)

• همیشه از یک خط جدید شروع می‌شن. مرورگرها به صورت خودکار مقداری فضای خالی (margin) قبل و بعد از این عناصر اضافه می‌کنن.

• تمام عرض موجود رو اشغال می‌کنن. به عبارت دیگه، تا جایی که ممکنه از چپ و راست کشیده می‌شن.

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

• عنصر <p> یک پاراگراف رو تعریف می‌کنه.

• عنصر <div> یک بخش یا قسمت رو در سند HTML تعریف می‌کنه.

هر دو عنصر <p> و <div> از نوع بلاک هستن.

مثال:

<p>Hello World</p>
<div>Hello World</div>

فهرست برخی از عناصر بلاک:

<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 Elements)

• از یک خط جدید شروع نمی‌شن.

• فقط به اندازه مورد نیاز، عرض رو اشغال می‌کنن.

مثال:

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

<span>Hello World</span>

فهرست برخی از عناصر اینلاین:

<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> <strong> <sub> <sup> <textarea> <time> <tt> <var>

نکته مهم: یک عنصر اینلاین نمی‌تونه شامل یک عنصر بلاک باشه!

عنصر <div>

عنصر <div> اغلب به عنوان یک کانتینر (Container) برای سایر عناصر HTML استفاده می‌شه. این عنصر هیچ ویژگی اجباری‌ای نداره، اما استفاده از ویژگی‌های style, class و id در اون خیلی رایجه.

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

مثال:

HTML

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

عنصر <span>

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

این عنصر هم مثل <div> ویژگی اجباری‌ای نداره، اما استفاده از style, class و id در اون رایجه.

وقتی <span> همراه با CSS استفاده می‌شه، می‌تونه برای استایل‌دهی به قسمت‌های کوچکی از متن به کار بره:

مثال:

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

خلاصه فصل

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

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

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

• عنصر <span> یک کانتینر اینلاین هست که برای نشانه‌گذاری بخشی از متن یا سند استفاده می‌شه.

تگ‌های HTML