Introduction: In HTML, elements are broadly divided into two categories: block-level and inline. Block elements take up the full width, while inline elements only take as much space as needed.

Block Elements

This is a div container. It groups content together.

The <div> element is a generic block container used to structure HTML content.

This is a paragraph of text.

The <p> tag defines a paragraph and automatically adds spacing before and after.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Headings from <h1> to <h6> define titles and subtitles, with <h1> being the most important.

Item One
Item Two

The <ul> tag creates an unordered list with bullet points.

First Step
Second Step

The <ol> tag creates an ordered list with numbers or letters.

“Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs

The <blockquote> tag is used to display quoted text, often indented.

The <hr> tag creates a horizontal line, often used to separate sections.

HTML	CSS
JAVA	PYTHON

The <table> tag creates a grid of rows and columns for displaying tabular data.

Inline Elements

This is a highlighted phrase using the <span> tag.

Used to style or group inline content without semantic meaning.

Visit our website for more details.

The <a> tag creates hyperlinks to other pages or resources.

This word is in bold using the <b> tag.

Displays text in bold without emphasizing importance.

This word is in italics using the <i> tag.

Displays text in italics, often for stylistic purposes.

This word is underlined using the <u> tag.

Underlines text, typically for emphasis or decoration.

This is a very important message.

The <strong> tag semantically emphasizes strong importance.

This is emphasized text using the <em> tag.

Indicates stress or emphasis, often rendered in italics.

Water boils at 100°C².

The <sup> tag displays superscript text above the baseline.

The chemical formula for water is H₂O.

The <sub> tag displays subscript text below the baseline.

This is a highlighted word using the <mark> tag.

Highlights text with a yellow background to draw attention.

WHO is a global health agency.

The <abbr> tag defines abbreviations with tooltips on hover.

Use console.log() to print output in JavaScript.

The <code> tag displays inline code snippets in monospace font.

Inline Elements	Block Elements
<span>	<div>
<a>	<p>
<strong>	<section>
<em>	<article>
<img>	<header>
<br>	<footer>
<label>	<nav>
<input>	<form>

HTML Elements Showcase – Inline vs Block.