Block and Inline Elements

❮ Prev Next ❯

HTML elements can be classified as either block-level or inline-level elements. Understanding the difference between these two types of elements is important because it affects how content is displayed on a web page. In this answer, we will provide an introduction to block and inline elements and explain their differences using examples.

Visual elements, the ones defined in the page body, can be generally classified in 2 categories:

  • Block elements ( <p> , <div> , heading elements, lists and list items, ...).
  • Inline elements ( <a> , <span>, <img>...).

What is the difference?

Block elements, when positioned in the page, do not allow other elements next to them. To the left, or to the right.

Inline elements instead can sit next to other inline elements.

The difference also lies in the visual properties we can edit using CSS. We can alter the width/height, margin, padding and border of block elements. We can't do that for inline elements.

Another difference is that inline elements can be contained in block elements. The reverse is not true.

Some block elements can contain other block elements, but it depends. The p tag for example does not allow such option.

Block-level Elements

Block-level elements are HTML elements that take up the full width of their parent container and start on a new line.

They are used to create larger structures or sections of a web page, such as headings, paragraphs, and lists. Block-level elements can contain other block-level and inline-level elements.

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Block Elements </h1>
    <p>This is a paragraph. It will take up the entire width of its parent element.</p>
    <ul>
      <li>This is the first item on the list.</li>
      <li>This is the second item on the list.</li>
      <li>This is the third item on the list.</li>
    </ul>
    <ol>
      <li>This is the first item on the list.</li>
      <li>This is the second item on the list.</li>
      <li>This is the third item on the list.</li>
    </ol>
</html>

In this example, the <h1> element, the <p> element, the<ul>, and <ol> element are all block elements. They take up the entire width of their parent element and create a new line after them.

Inline-level Elements:

Inline-level elements are HTML elements that take up only as much width as necessary and do not start on a new line. They are used to wrap smaller pieces of content within a larger block-level element, such as text, images, and links. Inline-level elements cannot contain other block-level elements, but they can contain other inline-level elements.

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Inline Elements </h1>
    <p> This is a paragraph with <strong> Strong </strong><strong> Emphasized </strong>Text</p>
    <a href="http://codingkoleji.com/">This is a link</a>
    <span style="color: red;">This text is red</span>
</html>

In this example, the <strong> element, the <em> element, the<a>, and <span> element are all inline elements. They don't create a new line after them and only take up as much width as necessary to display their content.

block-level elements are used to create larger structures or sections of a web page and start on a new line, while inline-level elements are used to wrap smaller pieces of content and do not start on a new line. Understanding the differences between these two types of elements is important when designing and styling web pages. Lets us learn how to use Classes in the next chapter.

❮ Prev Next ❯