HTML Block And Inline - Free Tutorial To Learn HTML And CSS

Trang chủ » Html Block Element Vs Inline » HTML Block And Inline - Free Tutorial To Learn HTML And CSS

Có thể bạn quan tâm

In HTML, you’ll mainly come across 2 types of HTML elements:

  • block elements like:

    • paragraphs <p>
    • lists: unordered (with bullet points) <ul> or ordered lists (with numbers) <ol>
    • headings: from 1st level <h1> to 6th level headings <h6>
    • articles <article>
    • sections <section>
    • long quotes <blockquote>

  • inline elements like:

    • links <a>
    • emphasised words <em>
    • important words <strong>
    • short quotes <q>
    • abbreviations <abbr>

Block elements are meant to structure the main parts of your page, by dividing your content in coherent blocks.

Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.

<p>Have you seen this <a href="https://www.youtube.com">amazing video</a> on YouTube?</p>

Opening and closing tags

All block-level elements have an opening and closing tags.

As a result, self-enclosing elements are inline elements, simply because their syntax don’t allow them to contain any other HTML element.

Have opening and closing tags Self-enclosing
Block elements <p> </p> <ul> </ul> <ol> </ol> Impossible
Inline elements <a> </a> <strong> </strong> <em> </em> <input> <br> <img>

Other types of HTML elements

There are several exceptions to the block/inline elements, but the ones you will most often encounter are:

  • list items for the <li>
  • table, table rows, table cells for <table>, <tr> and <td> respectively

Từ khóa » Html Block Element Vs Inline