Inline vs. Block Elements and Divs

Each HTML element is interpreted in a specific way by your web browser. In this lesson, we will discuss block-level and inline HTML elements to gain a better understanding of how content is rendered.

Block-level elements

Block-level HTML elements take up the full width of a web page, essentially creating a “block” around the content you place within that element. Block-level elements, by default, also start on a new line. The following are some of the block-level elements:

• Headings (<h1>-<h6>)
• Ordered and unordered Lists (<ol>, <ul>)
• List items (<li>)
• Paragraphs (<p>)

Inline elements

Inline elements, like the name suggests, do not take up the full width of a webpage and are generally in-line with text content. Inline elements also do not start a new line when rendered in the browser. Examples of inline elements include:

• Anchors (<a>)
• Images (<img>)
• Bolding text (<strong>)
• Emphasizing text (<em>)

The coding example below helps illustrate the differences between block-level and inline HTML elements: