تفاوت تگ های Block و inline

در HTML، تگ‌ها به دو دسته‌ی inline و block تقسیم می‌شوند. دسته‌بندی این تگ‌ها برای طراحی و شکل‌دهی به صفحه‌های وب، بسیار مهم و حیاتی است. 

تگ های Block:

تگ‌های block برای گروه‌بندی و بلوک‌بندی محتویات صفحه به کار می‌روند و باعث تشخیص کامل مرزهای یک المان وب شده و محتوای آن را به صورتی خاص و کامل در صفحات قرار می‌دهند و در واقع کل عرض فضای در دسترس را تصرف می کند مگر آنکه عرض آن توسط خصوصیات خود مانند width محدود شده باشد. برخی از تگ‌های block عبارتند از:

<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

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

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

تفاوت‌های بین تگ‌های Inline و Block

تفاوت بین تگ‌های inline و block اساسا بر رفتار آن‌ها در محتوای بلوکی و کنار هم قرار گرفتن آن‌ها و همچنین در قابلیت شخصی سازی و ویرایش هر نوع تگ، قابل مشاهده می‌باشد. با توجه به ماهیت گروه بلوک‌های HTML، دسته‌بندی تگ‌های block برای طراحی صفحات وب بسیار مفید و کاربردی است و به طراحان در قالب های صفحه کمک می‌کند تا محتوای خود را به صورتی بهینه و صحیح در مرورگرهای اینترنت نمایش دهند.

بجز برخی حالات خاص، تگ‌های inline برای شکل‌دادن به محتوای بصری استفاده می‌شوند. به دلیل نبودن مرز قطعی بین بلوک‌های inline، این بلوک‌ها در حالتی که کنار هم قرار می‌گیرند، در یک خط قرار می‌گیرند، اما در صورتی که از توصیف دهنده مرز برای آن‌ها استفاده شود، در خصوصیت display: block قرار می‌گیرند و با رفتار بلوک‌های block انجام می‌شوند.

تگ های inline را می توان درون هر تگ دیگری که قابلیت داشتن محتوای زیرشاخه دارد استفاده نمود و از این بابت محدودیتی ندارد اما تگ های block را نمی توان در تگ های inline قرارداد 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
برای ادامه، شما باید با قوانین موافقت کنید

keyboard_arrow_up