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 start on a new line, while inline elements only take as much width as needed and flow within text.

[Block Elements] [Inline Elements] [Comparison]

Block Elements

Explanation: <div> is a block container for grouping content.

This is a paragraph example.

Explanation: <p> defines a block of text.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Explanation: <h1>–<h6> are block headings of decreasing size.

• Item one
• Item two

Explanation: <ul> creates an unordered list.

1. First
2. Second

Explanation: <ol> creates an ordered list.

“Coding is the new literacy.”

Explanation: <blockquote> shows a quotation block.

Explanation: <hr> draws a horizontal line.

Explanation: <table> organizes content in rows and columns.

Inline Elements

This is a span example.

Used for styling inline text.

Visit this link for details.

Creates hyperlinks.

This is bold text.

Makes text bold.

This is italic text.

Renders text in italics.

This is underlined text.

Underlines text.

This is strong text.

Indicates strong importance.

This is emphasized text.

Emphasizes text meaningfully.

Formula: H²O.

Shows superscript text.

Formula: CO₂.

Shows subscript text.

This is a highlighted word.

Highlights text with color.

The WHO is an agency.

Shows abbreviations with tooltips.

Use <p> for a paragraph.

Displays inline code.

Inline vs Block Comparison

Back to Top