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 and always start on a new line, while inline elements only use as much width as their content needs.

[Block Elements] [Inline Elements] [Comparison]

Block Elements

Example: <p>This is a paragraph</p>

Explanation: The paragraph always starts on a new line.

Example: This is an H1 heading

Explanation: Headings (h1–h6) are block elements taking full width.

Example: This is an H2 heading

Example: This is an H3 heading

Example: This is an H4 heading

Example: This is an H5 heading

Example: This is an H6 heading

Explanation: Headings define document structure and hierarchy.

• Item One
• Item Two

Explanation: <ul> creates an unordered list.

1. First
2. Second

Explanation: <ol> creates an ordered (numbered) list.

"Coding is the new literacy."

Explanation: <blockquote> is for long quotations, block-level.

Explanation: <hr> adds a horizontal line separator.

Explanation: <table> is a block element used for tabular data.

Explanation: <section> groups thematic content, block-level.

Inline Elements

Example: This is inside a span
Explanation: Span is inline, no new line.

Example: Visit this link
Explanation: <a> is inline, used for hyperlinks.

Example: Bold text and italic text
Explanation: <b> and <i> are inline text styling.

Example: Underlined text
Explanation: <u> is inline underline.

Example: Strong text and emphasized text
Explanation: <strong> and <em> are semantic inline emphasis.

Example: E = mc²
Explanation: <sup> is superscript (inline).

Example: H₂O
Explanation: <sub> is subscript (inline).

Example: Highlighted word
Explanation: <mark> highlights text, inline.

Example: HTML
Explanation: <abbr> shows abbreviation/tooltip.

Example: console.log("Hello World");
Explanation: <code> represents inline programming code.

Inline vs Block Comparison

Back to Top