Block and Inline Elements in HTML

Photo By Jackson Sophat on Unsplash

HTML tags, by default, have pre-defined settings before any CSS modifications are applied. These settings depend on the type of tag used, which can be classified as either block elements or inline elements. To understand the differences between these two types, let’s take a closer look at their characteristics.

1. Block Elements

A block element always starts on a new line and occupies the full width available within its parent tag. Because of this behavior, block elements do not appear side by side; instead, they stack on top of each other. This is a key characteristic of block elements.

Examples of Block Elements:

• <div>
• <h1> – <h6>
• <p&gt
• <form&gt
• <table&t
• <tr&gt
• <header>
• <article>
• and more

2. Inline Elements

An inline element, in contrast to a block element, does not start on a new line and only takes up as much space as necessary to fit its content. For example, if you write “My name is Budi”, the element’s width will only be as wide as those 14 characters. Inline elements appear next to each other when placed within the same parent container.

“This is an example of using inline elements with text formatting.”

Example of Inline Elements:

• <span>
• <a>
• <img>
• <u>, <i>, <b>, <strong>, <em>,
• and more

This brief explanation provides an overview of block and inline elements. Hopefully, this helps clarify their differences and how they behave in an HTML document.

When I first learned about this, I immediately experimented with modifying the display property in CSS. However, I soon realized that display options are not limited to just block and inline—there are many other values. You can read it in more detail here.

One important variation is inline-block, which behaves like an inline element while still allowing width and height adjustments like a block element. If you want to learn more about the differences between inline and inline-block, check out this article: