HTML Elements Showcase - Inline vs Block

In HTML, elements are broadly divided into two categories: block-level and inline. Block elements take up the full width, while inline elements only take as much space as needed.

Block Elements | Inline Elements | Comparison

Block Elements

The <div> tag defines a block container for grouping content.

This is a paragraph.

The <p> tag defines a block of text that starts on a new line.

Heading Level 1

<h1> is the largest heading and block-level.

Heading Level 2

<h2> is a subheading and block-level.

Heading Level 3

<h3> is smaller than h2 and block-level.

Heading Level 4

<h4> is used for sub-subheadings.

Heading Level 5

<h5> is rarely used but still block-level.

Heading Level 6

<h6> is the smallest heading.

• Unordered list item

<ul> creates a bullet list.

1. Ordered list item

<ol> creates a numbered list.

"Coding is the new literacy."

<blockquote> is used for quotations.

<hr> creates a horizontal line.

<table> displays tabular data.

Inline Elements

This is a span element inside a sentence.

<span> is an inline container.

Visit our site for more info.

<a> creates hyperlinks.

This is bold text.

<b> makes text bold.

This is italic text.

<i> makes text italic.

This is underlined text.

<u> underlines text.

This is strong emphasis.

<strong> indicates importance.

This is emphasized text.

<em> adds emphasis.

E = mc²

<sup> creates superscript.

H₂O is water.

<sub> creates subscript.

This is highlighted text.

<mark> highlights text.

HTML stands for HTML.

<abbr> defines abbreviations.

Use console.log("Hello") to print in JS.

<code> shows code snippets.

"Inline vs Block Comparison"

Back to Top