In this section, we will learn what the block and inline elements are and what their key differences are in HTML.
What is Block and Inline Level Elements in HTML?
Elements in HTML are divided into two categories:
- Block-level elements
- Inline level elements
Their main differences are on the way they are rendered on a page! In short, a block-level element will appear on a new line below the last element that was rendered on the page! Basically, block-level elements take their own new line and space. But when it comes to inline level elements, they appear on the right side of the last element that was rendered on the page (If enough space is available for that inline element to appear on the right side of the last element! Otherwise, it will appear on a new line).
Alright, now let’s go into the details of each category and learn more about them.
HTML Block Level Elements
As mentioned before, a block-level element needs its own new line and space! For example, the HTML <p> element is a block-level element! It needs its own new line and space! This means if you create two paragraphs using the <p> element, they appear below each other. This means each will take its own block.
Example: using block level elements in HTML
See the Pen using block level elements in HTML by Omid Dehghan (@odchan1) on CodePen.
As you can see, in this example because the <h1> and <p> elements are block level type of elements, each got its own block and so they appeared below each other and not next to each other!
List of Block Level Elements in HTML
In the list below, you can see the block-level elements in HTML:
<address>
Contact information.
<article>
Article content.
<aside>
Aside content.
<blockquote>
Long (“block”) quotation.
<details>
Disclosure widget.
<dialog>
Dialog box.
<dd>
Describes a term in a description list.
<div>
Document division.
<dl>
Description list.
<dt>
Description list term.
<fieldset>
Field set label.
<figcaption>
Figure caption.
<figure>
Groups media content with a caption (see <figcaption>).
<footer>
Section or page footer.
<form>
Input form.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Heading levels 1-6.
<header>
Section or page header.
<hgroup>
Groups header information.
<hr>
Horizontal rule (dividing line).
<li>
List item.
<main>
Contains the central content unique to this document.
<nav>
Contains navigation links.
<ol>
Ordered list.
<p>
Paragraph.
<pre>
Preformatted text.
<section>
Section of a web page.
<table>
Table.
<ul>
Unordered list.
HTML Inline Level Elements
On the other hand, we have the inline level elements. These elements, when their content are rendered on a page; they appear next to the last element (on the right side) of the document.
Basically, these types of elements don’t need a new block of the page! They can appear according to the document’s flow! So it might end up next to another element (if there’s enough space) or in a new line if there wasn’t enough space available after the last rendered element.
Example: using inline level elements in HTML
See the Pen using inline level elements in HTML by Omid Dehghan (@odchan1) on CodePen.
Here, the `<span>` element is an example of inline level type of element and as you can see, we used this element two times and they appeared next to each other.
List of Inline Level Elements in HTML
Here’s the list of inline level elements in HTML:
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>
HTML display Property:
The display property is a CSS property and is used to change the level of an HTML element.
For example, one of the values that this property takes is called “block”. Now if you invoke this property on an inline level element and set the value “block” for it, then that inline level element changes its behavior and acts like a block-level element!
Note: this property takes other values as well. For example, one of the values is called “inline” and it is used to turn an element into an inline level type of element. You can learn more about this property in the CSS display property section.
Example: display block in HTML
See the Pen display block in HTML by Omid Dehghan (@odchan1) on CodePen.
As you can see, the <span> element was an inline level type of element. But, after applying the `display` property on it and set the value `block` for this property, the behavior of the element changed and acted like a block-level element thus.
