عناصر Inline و Block در HTML

در HTML عناصر را می توان به دو دسته تقسیم کرد: عناصر Block و عناصر Inline.

عناصر Block

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

مثال‌هایی از این نوع که تا به اینجا آموختید، عبارتند از: <pre> ،<dl> ،<li> ،<ol> ،<ul> ،<p> ،<h1> - <h6>.

<html>
    <body>
        <p style="background-color:yellow;">Hello World</p>
    </body>
</html>

یکی از عناصر مهمی که در این دسته (Block) قرار می‌گیرد، عنصر <div> است که معمولا از آن به عنوان نگهدارنده‌ای برای سایر عناصر HTML استفاده می‌شود. این عنصر می‌تواند ویژگی های style ،class و id را بپذیرد.

به مثال زیر و نتیجه‌ی آن توجه کنید:

<html>
    <body>
        <h1>Headline</h1>
        <div style="background-color:green; color:white; padding:20px;">
            <p>Some paragraph text goes here.</p>
            <p>Another paragraph goes here.</p>
        </div>
    </body>
</html>

عناصر Inline

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

مثال‌هایی از این نوع که تا به اینجا آموختید، عبارتند از: <a> ،<img> ،<strong> ،<b> ،<i> ،<em>.

<html>
    <body>
        <b style="background-color:yellow;">Hello World</b>
    </body>
</html>

یکی از عناصر مهمی که در دسته Inline قرار می‌گیرد، عنصر <span> است که برای علامت‌گذاری یا استایل‌دهی به بخشی از متن استفاده می‌شود. این عنصر می‌تواند ویژگی های style ،class و id را بپذیرد.

به مثال زیر و نتیجه آن دقت کنید:

<html>
    <body>
        <h2>Some 
            <span style="color:red">Important</span>
             Message</h2>
    </body>
</html>

⚠️توجه: عناصر Inline نمی‌توانند هیچ عنصر Block ای را در بر‌گیرند.