HTML Elements Showcase – Inline vs Block

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

Block Elements

This is a <div> container element containing text.

The <p> tag defines a paragraph of text and always starts on a new line.

This is an H1 Heading

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

This is an H5 Heading

This is an H6 Heading

First unordered list item
Second unordered list item

The <ul> element creates a bulleted list of items.

First ordered list item
Second ordered list item

The <ol> element creates a numbered list of items.

"Coding is the new literacy."

The <blockquote> element is used to display a block quotation.

The <hr> element creates a horizontal rule (line) separating content.

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

The <table> element organizes data in rows and columns.

Inline Elements

This is a span element inside a sentence.

The link element allows navigation to other pages.

This text is bold using the <b> tag.

This text is italic using the <i> tag.

This text is underlined using the <u> tag.

The strong tag emphasizes importance.

The em tag indicates emphasis.

Einstein’s formula is E = mc².

Water’s chemical formula is H₂O.

This is highlighted text using the <mark> tag.

HTML stands for HyperText Markup Language.

The console.log("Hello World") is a code snippet example.

Inline vs Block Comparison

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>