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


Example: < p > This is a paragraph </p >
Explanation: The < p > tag defines a block of text that always start on a new line.


Example: < h1 > This is a heading < /h1 >
Explanation: Headings are block-level elements that take the full width.


Example: < blockquote > "Coding is the new literacy." < /blockquote >
Explanation: Blockquote is a block container for quotations.



Inline Elements

Example: < span > This is inside a span < /span >
Explanation: Span is an inline container with no new line.


Example: HTML stands for < abbr title="HyperText Markup Language">HTML < /abbr>.
Explanation: Abbr defines an abbreviation.


Example: E = mc <sup> 2 </sup>
Explanation: Superscript is inline and sits above text.


Example: <code>console.log("Hello World")</code>
Explanation: Code tag represents programming text.


Comparison Table

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

Back to Top