HTML Elements Showcase – Inline vs Block

In HTML, elements are broadly divided into two categories: block-level and inline. Block-level elements take up the full width of their container and always start on a new line, while inline elements only occupy as much space as needed and flow within the same line.


Block Elements

Block Elements

This is a div container

The <div> is a generic block-level container.

This is a paragraph of text.

The <p> element defines a paragraph and always starts on a new line.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Headings <h1>–<h6> are block-level and define hierarchical titles.

The <ul> defines an unordered list.

  1. First
  2. Second

The <ol> defines an ordered list.

"Coding is the new literacy."

The <blockquote> is used for quotations.


The <hr> element creates a thematic break (horizontal rule).

Row 1, Col 1Row 1, Col 2
Row 2, Col 1Row 2, Col 2

The <table> displays tabular data.

Inside Section

This is inside a section block.

The <section> represents a thematic grouping of content.


Inline Elements

Inline Elements

This is a span inside text.

The <span> is an inline container.

Visit Example Website for more info.

The <a> defines a hyperlink.

This is bold text and this is italic text.

<b> makes text bold, <i> makes it italic (both inline).

This is important and this is emphasized.

<strong> and <em> add semantic meaning to bold/italic text.

Water formula is H2O, and Einstein’s equation is E=mc2.

<sub> makes text subscript, <sup> makes it superscript.

This is underlined text.

The <u> element underlines text.

This is highlighted text.

The <mark> highlights text inline.

HTML stands for HTML.

The <abbr> element defines abbreviations.

Example code: console.log("Hello World")

The <code> element displays code inline.


Comparison Table

Inline vs Block Comparison

Differences Between Inline and Block Elements
Block Elements Inline Elements
<div><span>
<p><a>
<h1><b>
<ul><i>
<blockquote><abbr>
<table><code>
<hr><sup>
<section><mark>

[Back to Top]