Lesson 2

HTML Block and Inline


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.

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

HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0



Be the first to comment!