2.3 HTML Block and Inline

HTML has 2 main types of elements

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
Back to top

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now
Close