"HTML Elements Showcase- Inline vs Block Elements"

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 Elemnts] [Comparison]

Block Elements

<p > :... This is a pragraph

Hello i am abdul haque

Explanation:

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

<h1 > :... This is a heading, Example:

This is a heading

Explanation:

<h1 >Headings are block-level elements that take the full width.

<blockquote > :... This is a blockquote, Example:

<blockquote > "Coding is the new literacy."

Explanation:

<blockquote > is a block container for quotations.

Example: <hr > :... This is a horizontal line, Explanation:

<hr > is also block-level elements;

<table > :... This is a table tag, Explanation :

<table >is also block-level elements,

< Section > :... This is a section tag, Explanation:

< Section > is also block-level elements,

<div> :... This is a div tag, Explanation :

<div>is also block-level elements and div is also contaiiner,

<article> :... This is a div tag, Explanation :

<article>is also block-level elements,

etc.........

Inline Elements

This is a blue-colored span inside a sentence.

Explanation: <span> is used to style or target part of a sentence without breaking the flow.

Visit this website for more information.

Explanation: <a> creates a hyperlink that users can click to navigate.

He said it was very important to attend the meeting.

Explanation: <b> makes text bold without implying extra importance.

She replied in an unusually calm tone.

Explanation: <i> italicizes text, often for emphasis or style.

This word is underlined for clarity.

Explanation: <u> adds an underline to text.

It is critical to follow safety protocols.

Explanation: <strong> emphasizes importance and adds semantic weight.

She was truly moved by the performance.

Explanation: <em> emphasizes text with a slightly different semantic meaning than <i>.

Water’s chemical formula is H2O.

Explanation: <sub> displays subscript text, useful in scientific notation.

The Einstein equation is E = mc2.

Explanation: <sup> displays superscript text, often used in math or footnotes.

He highlighted the key points in yellow.

Explanation: <mark> highlights text with a background color.

The WHO released new guidelines.

Explanation: <abbr> defines abbreviations and shows full form on hover.

Use printf() to display output in C.

Explanation: <code> formats text as inline code, preserving spacing and style.


Comparison Table

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

[Back to Top]