HTML Elements Showcase
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 Elements
Comparison
Block Elements
Example : This is a paragraph
Example : The <p> tag defines a block of text
that always starts on a new line.
hr
Example : This is a heading
Explanation: Headings are block-level elements
that take the full width.
Example:
"Coding is the new literacy."
Explanation: Blockquote is a block container for quotations.
Example :
Welcome to My Website
This is a paragraph inside a div.
Explanation : It is a block-level container used to group other HTML elements together.
Example : h1
h2
h3
h4
h5
h6
Explanation : H1 goes till h6 depreciating in size
Example :
this line above is called hr
Explanation : hr gives a line .
Example :
| Name |
Subject |
Marks |
| Ankit |
Math |
85 |
| Sumit |
Science |
90 |
Explanation : Table prints table as the name suggests.
Inline Elements
Example: This is inside a span
Explanation: Span is an inline container with no new line.
Example: HTML stands for
HTML
Explanation: Abbr defines an abbreviation.
Example: E = mc2
Explanation: Superscript is inline and sits above text.
Example: console.log("Hello World")
Explanation: Code tag represents programming text.
Example : My fav color is Red
Explanation : Span does not add line breaks and used to group
small pieces of text.
Example : CodingGita
Explanation : It is used to Hyperlink.
Example : This is Bold ItalicUnderlineStrongEm
Explanation : B is used for Bold, I for italic U for underline Strong for bold and semantic and em for em
Example : 2 2 and H 2O
Explanation : Superscript is used to write on top and subscript to write below
Example : Marking this Text
Explanation : This is semantic tag to mark.
Example :
Explanation : Abbr is used to abbrebiate.
Example : This is example of code
Explantion : This is used to use code or type in code
Comparison Table
Differences Between Inline and Block Elements
| Block Elements |
Inline Elements |
| <div> |
<span> |
| <p> |
<a> |
| <h1> |
<b> |
| <ul> |
<i> |
| <blockquote> |
<abbr> |
| <table > |
<sup> |
| <hr> |
<sup> |
| <section> |
<mark> |
[Back to Top]