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-level Elements Inline Elements Comparision Table



Block Elements

This is a paragraph

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

This is a Heading

This is heading with <h1>

This is heading with <h2>

This is heading with <h3>

This is heading with <h4>

This is heading with <h5>
This is heading with <h6>

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

Unorder-List

Explanation: Displays a list of items with bullet points.

Order-List

  1. hello_1
  2. hello_2

Explanation: Displays a list of items with numbers or letters in sequence.

Blockquote

"Coding is the new literacy."

Explanation: Blockquote is a block container for quotations.

horizontal line


Explanation: he <hr> tag in HTML is used to insert a horizontal line (thematic break) across the page, often to separate content.

Table

Explanation: table is created using the <table> tag, and it organizes data into rows and columns.

Name Roll no.
Anand Suthar 1

Inline Elements

Span

This is inside a span

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

hyperlink

click here

Explanation: The <a> tag in HTML is called the anchor tag, and it is used to create hyperlinks that connect to other web pages, sections, email, or files.

text formatting tags

This is bold This is italic This is underline This is strong This is Emphasis

Explanation: Text Formatting Elements are used to style or emphasize text. They can be presentational (style only) or semantic (carry meaning).

Superscript

X2

Explanation: Displays text as superscript (slightly above the line, e.g., x²).

Subscript

H2O

Explanation: Displays text as subscript (slightly below the line, e.g., H₂O).

Mark

This text is Marked

Explanation: Highlights text with a yellow background by default.

ABBR

HTML

Explanation: Abbr defines an abbreviation.

code

#include<stdio.h> int main(){
    printf("Hello World!"); 
return 0; }

Explanation: This tag is used for code's


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