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:

Divs

The <div>, a block-level element, allows us to section into separate, logical divisions.

As we can see, the <div> element does not render as anything special on the web page and is mainly used to separate content into distinct groups for organization or styling purposes. Generally, we will nest other HTML elements within <div> elements to provide the proper structure to our page.