HTML Block Elements

HTML elements can be categorized into two types based on how they display their content on a web page, namely Block and 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...

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

Block Elements can contain 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 elements
  • Block elements can contain any number of valid inline elements

In the below example, we have a block element <div>, that contains other block elements <h1>, <p>, where <p> contains inline elements <span>, <b> and <i>.

<div>
    <h1>HTML Block 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 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 elements are useful in building different sections of a web page, which can contain any other block and inline elements.