[Block Elements] [Inline Elements] [Comparison]

HTML Elements Showcase – Inline vs Block

In HTML, elements are mainly divided into block-level and inline. Block elements take up the full width available and start on a new line, while inline elements stay within a line of text.

Block Elements

Div is used to group other elements together.

This is a <p> paragraph.

Paragraphs are block elements that hold text.

This is h1

This is h2

This is h3

This is h4

This is h5

This is h6

Headings (<h1>–<h6>) define titles and sections in content.

• Unordered list item 1
• Unordered list item 2

<ul> creates bullet lists.

1. Ordered list item 1
2. Ordered list item 2

<ol> creates numbered lists.

“This is a blockquote – used for quotations.”

<blockquote> is for quoted text.

<hr> creates a horizontal line to separate content.

<table> organizes data in rows and columns.

Inline Elements

Here is a span inside text.

<span> is used to mark part of text inline.

You can visit this link.

<a> creates hyperlinks.

This text is bold and this is important.

<b> and <strong> make text bold, but <strong> adds importance.

This is italic and this is emphasized.

<i> and <em> make text slanted, but <em> adds meaning.

This is underlined.

<u> underlines text.

Math like H₂O and X².

<sub> is subscript, <sup> is superscript.

This is highlighted text.

<mark> highlights text.

WHO is an abbreviation.

<abbr> shows abbreviations with tooltips.

Use print(\"Hello\") to show code.

<code> is for inline code.

Inline vs Block Comparison

Back to Top