HTML Elements Showcase – Inline vs Block

In HTML, elements are generally divided into two types: Block elements and Inline elements. Block ones usually start on a new line and take full width, while inline elements sit inside a line and only take space they need.

Block Elements | Inline Elements | Comparison

Block Elements

Div is a generic block element, often used as a container.

This is a paragraph text.

Paragraph tag always starts on a new line.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings (h1 to h6) are block elements for titles.

• Milk
• Bread

ul = unordered list

1. Step one
2. Step two

ol = ordered list

"Coding is the new literacy."

blockquote is used for quotations.

hr creates a horizontal line.

table makes rows and columns.

section is used for grouping related content.

Inline Elements

This word is inside span in a sentence.

span is inline container.

Go to Example site.

a tag is a hyperlink.

This is bold text.

b makes text bold (no extra meaning).

This is italic text.

i makes text italic.

This is underlined text.

u makes text underlined.

This is strong text.

strong means important text.

This is emphasized text.

em tag gives emphasis.

E = mc²

sup is for superscript.

H₂O

sub is for subscript.

This is highlighted text.

mark highlights text.

We call HTML as markup language.

abbr defines abbreviations.

Code example: console.log("Hello")

code shows inline programming text.

Inline vs Block Comparison

Back to Top