Block and Inline Elements

HTML elements that contain content occupy rectangular areas within the web page. These elements can be classified into two disjoint sets: block elements and inline elements.

A block element will always begin on a new line, regardless of the element that proceeds it and the element that is after it will also be be placed on a new line. Block elements can contain both block elements and inline elements and are used to structure the document.

Inline elements are positioned to the right of the element that proceeds it and cannot contain block elements. Inline elements are usually used to format text.

Example

The code below demonstrates the difference between block and inline elements.

<section>Lets begin...<h4>Introduction</h4><p>Hello <strong>World!</strong></p></section>

This code produces the following content in a web page.

Lets begin…

Introduction

Hello World!

The section element, the h4 (heading) element, and the p (paragraph) element are block elements which are positioned on new lines. The <strong> element, however, is an inline element within the p element and is placed to the right of the text that proceeds it.

Formatting HTML Code

It is customary to write HTML code with spacing that reflects how the elements will be positioned on the page. This makes the code more readable and easier to debug. For example, it is better to write the above HTML code as follows:

<section>
    Lets begin...
    <h4>Introduction</h4>
    <p>Hello <strong>World!</strong></p>
</section>

Notice that when a block element contains other block elements, like the section element, we indent the inner elements with tabs. The above code better represents visually what will appear on the web page and is easier to read.