HTML Elements Showcase – Inline vs Block

Introduction:

In HTML, elements are broadly divided into two categories:

  1. Block Elements
  2. Inline Elements

Block Elements:Block elements take up the full width.

Inline Elements: Inline elements only take as much space as needed.

Block Elements inline Elements Comparison

Block Elements

Example(1): <p>This is a pragraph.</p>

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


Example(2): <h1>This is a heading.</h1>

Explanation: Headings are block-level elements that take the full width.


Example(3): <blockquote>"Coding is the new literacy."</blockquote>

Explanation:Blockquote is a block container for quotations.


Example(4): <div>content</div>

Explanation: Div is a generic block container for grouping elements.


Example(5): <Header> Haeder Content </header>

Explanation: Header represents the top section of a page or article.


Example(6): <footer> Footer Content </footer>

Explanation: Footer definas the bottom section of a page or article.


Example(6): <section> Section Content </section>

Explanation: Section represents a thematic grouping of content.


Example(7): <article> Article Content </article>

Explanation: Article represents independent,self-contained content.


Example(8): <nav> Links </nav>

Explanation: Nav defines a block for navigation links.


Example(9): <ul><li> Item </li></ul>

Explanation: UL creates an unordered list.


Example(10): <table> Table </table>

Explanation: Table defines tabular data in rows and columna.


Inline Elements

Example(1): <span> This is inside a span </span>

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


Example(2): HTML stands for <abbr title="HypeText Markup language">HTML</abbr>

Explanation:Abbr defines an abbreviation.


Example(3): E = mc<sup>2</sup>

Explanation: Superscipt is inline and sits above text.


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

Explanation: Code tag represents programming text.


Example(5): <strong> Important </strong>

Explanation: Strong makes text bold with Important.


Example(6): <em> Emphasis </em>

Explanation: Em italicizes text for emphasis.


Example(7): <b>

Explanation: Br inserts a line break.


Example(8): <labe> Name: </>

Explanation: Lable defines text for a form control.


Example(9): <img src="img.jpg" alt="Image">

Explanation: Img display an image inline.


Example(10): <a href="#"> Link </a>

Explanation: A defines a hyperlink.

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