Block elements (e.g., <div>, <P>, <section>) start on a new line and stretch across the full width. They're used to build the skeleton of a page—like paragraphs, headers, or containers.

Inline elements (e.g., <span>, <a>, <strong>) sit within lines of text and only take up as much space as needed. They're perfect for styling or linking small parts of content without breaking the flow.

[Block Elements]

This is a <div> element.

The <div> tag is a container that holds other HTML elements. It is a block-level element

This is a <p> element representing a paragraph

The <p> tag defines a paragraph. It creates space before and after itself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings <h1> to <h6> define section titles with decreasing importance and size.

iteam 1
iteam 2

<ul> creates an unordered list Each <li> is a block-level item.

Firast iteam
second iteam

<ol> creates an ordered list Each <li> is a block-level item.

This is a blockquote element used for quotations.

The <blockquote> element is used to indicate a long quotation. It is block-level

<hr> inserts a horizontal rule. It is a block-level separator

cell 1	cell 2
cell 3	cell 4

The <table> element creates a table. Tables are block-level structures

[Inline Elements]

This is a span element within a sentence.

<span> is an inline container used to group text for styling

Visit codinggita.com

<a> defines a hyperlink and is an inline element

This is bold and this is strong

<b> and <strong> both make text bold, but <strong> adds emphasis

This is italic and this is emphasized

<i> and <em> italicize text, but <em> adds semantic emphasis

This text is underlined

<u> underlines text and is an inline element

Einstein's formula is E = mc²

<sup> displays text as superscript above the baseline.

Water's chemical formula is H₂O

<sub> displays text as subscript below the baseline

This is a highlighted word

<mark> highlights text with a yellow background by default

Learn what HTML stands for

<abbr> defines an abbreviation with a tooltip description

Type console.log("Hello") in the browser console

<code> displays code in a monospace font. It's an inline elemend

Inline vs Block Comparison

Differences Between Inline and Block Elements
Inline Elements	Block Elements
<span>	<div>
<a>	<p>
<b>	<H1> to <H6>
<i>	<ul>
< u>	< ol>
<strong>	<blockquote>
<em>	<hr>
<code>	<table>

HTML Elements Showcase – Inline vs Block