عناصر block و inline در html و تفاوت آنها

در html برخی از عناصر به صورت block یا بلوک و برخی نیز به شکل inline هستند. در این مقاله آموزشی نیوسان‌وب در خصوص هر یک و تفاوت آنها بحث می‌کنیم.

ایجاد فایل مثال این مقاله

ابتدا با یک مقدمه می‌خواهیم ضمن ارائه برخی توضیحات، مثال خود را با استفاده از ویژوال استودیو کد ایجاد کنیم و سپس به بحث و بررسی آن بپردازیم و عماصر inline و block را بخ خوبی درک کنیم.

اگر تا بحال ما را دبال کرده باشید، به یاد دارید که در مقاله قبلی در خصوص صفت style در html نکاتی را خدمت همراهان نیوسان‌وب گفتیم تا اینکه بتوانیم در مقاله کنونی در خصوص عناصر inline و block بهتر بحث کنیم. برای این مقاله دوباره می‌خواهیم یک پروژه جدید ایجادکنیم؛ به این منظور، ابتدا فولدر 010 را در کامپیوتر خود ایجاد کنید و سپس با استفاده از visual studio code آن را باز کنید.

پس از ایجاد تگ‌های پایه که در مقالات ابتدایی گفتیم و در ادامه هم آنها را می‌بینید، تگ های زیر را در داخل body بنویسید و بعد نتیجه را ببینید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsunweb.com</title>
</head>
<body>
    <div style="background-color:aqua">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur ipsa illo impedit deserunt maxime odit, reiciendis, expedita hic incidunt, distinctio dicta voluptates corporis! Ea, labore nobis! Excepturi doloribus nostrum maxime?
    </div>
    <h1 style="background-color:red">This is an h1 example</h1>
    <h2 style="background-color:yellow">This is an h2 example</h2>
    <p style="background-color:greenyellow">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat perferendis recusandae vitae! Magni officiis unde labore dolorem suscipit fugit molestias possimus provident maiores, impedit facilis sit maxime quam ducimus facere!
    </p>
    <p style="background-color:olive; color:white;">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam commodi, libero atque totam asperiores laudantium deserunt quibusdam at, nisi accusamus sint est aperiam distinctio sit soluta suscipit placeat molestiae ut.
    </p>
    <span style="background-color:blue; color:yellow;">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti necessitatibus commodi optio, quam exercitationem illo nemo amet inventore natus vel provident, repellendus est, totam atque cumque molestiae dolor ratione quis.
    </span>
    <span style="background-color:black; color:yellow;">
        Hi, How are you?
    </span>
    <br>
    <a href="https://newsunweb.com">Newsunweb Web </a>
    <strong>is a <del>Good</del><ins>Very Good</ins> website!</strong>
</body>
</html>

برای اینکه بتوانید نتیجه حاصل از کدهای بالا را به وضوح ببینید ما آنها را به صورت آنلاین نیز در اختیار شما قرار داده‌ایم که با کلیک روی این لینک می‌توانید ضمن مشاهده، به مقایسه بپردازید. به دلیل اینکه خواستیم محدوده هر تگ را ببینیم، از صفت style و ویژگی background-color آنها بهره گرفته‌ایم. همانطور که می‌بینید برخی تگ‌ها کل عرض صفحه html را به خود اختصاص داده‌اند، به طوری که هیچ تگ دیگری امکان ندارد در کنار آنها قرار گیرد؛ اما برخی از آنها این قابلیت را دارند که در کنار دیگری قرار بگیرند و یا حتی آنها را تکمیل کنند. همین تفاوت‌ها هستند که ما را به یافتن مفهوم block و inline هدایت می‌کنند که در ادامه در خصوص آنها و مهم‌ترین تگ‌های هر نوع توضیحات لازم را خواهیم داد.

توجه: در visual studio code با تایپ کلمه lorem و زدن کلید tab یا Enter، یک پاراگراف نمونه ایجاد می‌شود که ما هم از همین روش برای تولید پاراگراف‌های با کلمات تصادفی در مثال بالا استفاده کردیم که معمولا مفهوم خاصی هم ندارند و تنها برای مثال و آموزش از آنها استفاده می‌شود.

تصویر کدهای نوشته شده هم به شکل زیر است.

block و inline در html

عناصر block یا بلوکی در html

خب الان بهتر می‌توانیم بگوییم block چیست. همانطور که گفتیم، یک بلوک، کل عرض صفحه html را در حالت عادی به خود اختصاص می‌دهد و هیچ عنصر دیگری قادر به قرار گیری در کنار آن نیست. در مثال بالا با توجه به خروجی، چه تگ‌هایی این چنین هستند؟ خب اگر به ترتیب بررسی کنیم تگ‌های div، p، h1، h2.

عناصر inline در html

عناصر nline، آنهایی هستند که می‌توانند در کنار هم قرار بگیرند و لازم است به این شکل عمل کنند، تا بتوان مثلا متنی که در نظر داریم را به شکلی که می‌خواهیم به کاربر نشان دهیم. تگ span، تگ a، strong، del، و ins از این دست هستند.

نکته‌ای که باید دقت کنید اینکه در مثال بالا ما با استفاده از تگ <br>، لینک Newsunweb را به پایین راندیم، وگرنه این تگ نیز از دسته تگ‌های inline محسوب می‌شود.

لیست تگ‌های block-level و inline-level در html

در این بخش لیست کامل‌تری از تگ‌های block-level و inline-level در html را در تصوبر زیر ارائه خواهیم کرد تا آشنایی بهتری با آنها پیدا کنید. اگر با برخی از تگ‌ها آشنایی ندارید، نگران نباشید؛ چرا که در ادامه مطالب نیوسان‌وب؛ در خصوص برخی از آنها توضیحاتی خواهیم داد.

لیست تگ های block و inline

ممکن است در اینجا سوالی ذهن شما را درگیر کند که آیا می‌شود یک تگ block را به inline تبدیل کرد و برعکس؟ در پاسخ به این سوال باید گفت بله امکان دارد! اما چگونه؟ کافی است که در style از ویژگی display استفاده کرد و مقادیر inline یا block را به آن نسبت داد. کد‌های زیر را ببینید.

<body>
    <div style="background-color:aqua; display: inline;">
        This is a div. The intrinsic type of this tag is block.
    </div>
    <p style="background-color:greenyellow; display: inline;">
        This is a div. This tag is also block type.
    </p>
    <span style="background-color:blue; color:yellow; display: block;">
        Span is inline type.
    </span>
    <span style="background-color:black; color:yellow; display: block;">
        This is another span.
    </span>
    <p>
        But see how we have changed them to block and inline type respectively.
    </p>
</body>

اگر کدهای بالا را در ویژوال استودیو کد بنویسید و نتیجه را ببینید، مشاهده خواهید کرد که ما با display:inline و display:block، رفتار تگ‌ها را عوض کردیم.

این نکته هم لازم به ذکر است که display مقدار inline-block هم به خود می‌گیرد. اگر بخواهیم یک تفاوت اساسی اینها را بگوییم به این دو مورد اکتفا می‌کنیم:

(1) فرق اساسی inline با inline-block این است که حالت inline-block قابلیت تغییر طول و عرض را با استفاده از style برای عناصر inline ایجاد می‌کند.

(2) تفاوت مهم block و inline-block این است که استفاده از inline-block، یک شکست خط بعد از تگ ایجاد نمی‌کند و بین آنها فاصله ایجاد نمی‌کند؛ در حالی که اگر عرض تگ block را حتی کمتر کنید هم، این دو با روش‌های معمول کنار هم قرار نمی‌گیرند.

جمع‌بندی

در این مقاله با ارئه یک مثال در خصوص تگ‌های inline و block توضیحاتی را دادیم؛ ویژگی‌های هر یک را با برشمردن برخی تگ‌های هر گروه توضیح دادیم و در نهایت با ارائه لیست کاملتری از آنها توضیحات را به انتها رساندیم. این مبحث اهمیت زیادی در درک عناصر html و محدوده‌های هر یک دارد که در آینده بیشتر با آنها آشنا خواهید شد. همچنان با نیوسان وب همراه باشید که دانش خود را بتوانید پله به پله ترقی دهید.

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.