HTML Elements Showcase – Inline vs Block

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 Inline Elements Comparision

Block Elements

This is a paragraph

Explanation: The <p> tag defines a block of text that always starts on a new line.

This is blockquote.

Explanation: blockquote is a block container for quotations

This is ordered list

Explanation: Ordered list is used to list things numerically

This unordered list

Explanation: Unordered list is used to list things randomly

hey	there
Hetavi	here

Explanation: table is used to store data in a tabular form

This is <div> tag

Explanation: div tag is also block element

This is the header

Explanation: The main headings are included here

Explanation: The footer of the page is written inside this tag

Explanation: The navigation links are witten inside this tag

Inline Elements

This is inside a span

Explanation: Span is an inline container with no new line.

HTML.

Explanation: Explanation: Abbr defines an abbreviation.

E = mc²

Explanation: Superscript is inline and sits above text.

H₂O

Explanation: Subscript is inline and sits below text.

console.log("Hello World")

Explanation: Code tag represents programming text.

Strong

Explanation: This bolds the text.

Highlight

Explanation: This highlights the text

italics

Explanation: This italisises the text

~~Strike through~~

Explanation: This deletes a text by a strike over it

Comparison Table

Block Elements	Block Elements
<div>	<span>
<p>	<a>
<h1>	<b>
<ul>	<i>
<blockquote>	<abbr>
<table>	<code>
<hr>	<sup>
<section>	<mark>