HTML Block and Inline Elements

HTML elements can be categorized into two types based on how they display their content on a web page.

  • Block Elements
  • Inline Elements

Block elements display their content in a block separated from the content around them.

  • They always start on a new line
  • They take full width available from left to right
This is a paragraph text using HTML element <p>, which takes full width available.
This is a container using <div> which takes full width available across multiple lines.
Item 1
Item 2
Item 3
and so on...

Inline elements display their content as is without any separation from the content around them.

  • They won't start on a new line
  • They only take up the width required to display their content

This is an inline text using <span> element

This is a paragraph containing inline bold text using <b> element.

List of HTML Block Elements

Here is a list of HTML Block 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>

Most commonly used Blocked elements are headings <h1> to <h6>, paragraph <p> and division <div>.

List of HTML Inline Elements

Here is a list of HTML Inline elements.

<a>, <abbr>, <acronym>, <b>, <dbo>, <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>

The most commonly used Inline element is the span <span>.

Block Elements Vs Inline Elements

Let's try to understand how the block and inline elements can be used to build a web page, basically to understand what can contain what.

  • Block elements can contain any number of valid block and inline elements.
  • Inline elements can contain any number of valid inline elements.
  • Inline elements cannot contain even a single block element.

In the below example, we have block elements <div>, <h1>, <p>, where <p> contains inline elements <span>, <b> and <i>, which can explain how they can be used.

<div>
    <h1>HTML Block Vs Inline Elements</h1>
    <p>
        This is a block element containing several inline elements
        <span>
            text inside span with <b>bold text</b> and <i>italic text</i>
        </span>
    </p>
</div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div>
        <h1>HTML Block and Inline Elements</h1>
        <p>
            This is a block element containing several inline elements
            <span>
                text inside span with <b>bold text</b> and <i>italic text</i>
            </span>
        </p>
    </div>
</body>
</html>

Overall

HTML Block and Inline elements are useful in building different sections of a web page, where each of them has its own significance and use cases.