HTML Element 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

Example: <p> This is a paragraph</p>

Explanation: The <p> tag defines a block of text that always starts on a new line and takes up the full width available.

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.

And many more...

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 abbrevation.

Example: E = mc <sup> 2 </sup >

Explanation: Superscript is inline and sits above text.

Example: <code</code> console.log("Hello World") </code>

Explanation: Code tag represents programming text.

And many more...

Comparison Table