HTML Block and Inline Elements

HTML is composed of different elements that create blocks of web pages. These elements are divided into "block-level" elements and "inline" elements.

It is possible to change an element from block to inline or vice versa using the CSS display property.

Block-level Elements

A block-level element is an HTML element that starts on a new line and takes up the full available width of its parent element’s horizontal space. This kind of element creates blocks of content (paragraphs, page divisions). The majority of HTML elements are block-level elements.

Block-level elements are used within the body of an HTML document and can contain inline elements, or other block-level elements.

Example of a block-level element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        align-items: center; /* Use another value to see the result */
        width: 100%;
        height: 200px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 25%;
        height: 60px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
Block-level elements:
<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 Elements

Unlike block-level elements, inline elements do not start on a new line. They begin within a line and only take up as much width as it is necessary. Inline elements are included as a part of the main text.

Inline elements commonly contain other inline elements, or they can be empty.

Example of an inline element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>
Inline elements:
<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>

Practice Your Knowledge

Which of the following statements about HTML block and inline elements are correct?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?