عناصر Inline و Block در HTML

عناصر 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 ای را در بر‌گیرند.

2-1
عناوین (Headings) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-2
کامنت گذاری (Comment) و خطوط افقی (Horizontal Rule) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-3
پاراگراف ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-4
تگ های فرمت دهی در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/22
2-5
پروژه وبلاگ: درباره من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/02
2-6
عناصر HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/02
2-7
ویژگی‌ها (Attributes) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/06
2-8
تصاویر در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/09
2-9
آزمون اول فصل دوم دوره HTML (لطفا وارد وبسایت شوید)
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/13
2-10
لیست ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/20
2-11
پروژه وبلاگ : مهارت‌های من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/27
2-12
جدول‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/27
2-13
لینک‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/30
2-14
پروژه وبلاگ : برنامه‌ی من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/05
2-15
عناصر Inline و Block در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/05
2-16
فرم‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/09
2-17
پروژه وبلاگ: فرم تماس
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/14
2-18
آزمون دوم فصل دو دوره HTML (لطفا وارد وبسایت شوید)
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/18
دوره در حال تکمیل است ... rocket