HTML Elements

by

An element in an HTML document can be understood as an individual component of an HTML file. In more simple words, the elements are everything written within tags, including the tags, attributes, and contents.

The basic elements used in HTML are:

Headings

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<h1> ...... <h6>Content</h1> ...... </h6>
<h1> ...... <h6>Content</h1> ...... </h6>
<h1> ...... <h6>Content</h1> ...... </h6>

They are used to specify the headings of the page.

Paragraph

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p>Content</p>
<p>Content</p>
<p>Content</p>

It is used to specify content as a paragraph.

Section

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>Content</div>
<div>Content</div>
<div>Content</div>

It is used to specify a section on the web page.

Line Break

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<br>
<br>
<br>

It is used to specify a line break.

Horizontal Line

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<hr>
<hr>
<hr>

It is used to specify a horizontal line.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 style="color: red">Hello</h1>
<p style="color: blue">World!!</p>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 style="color: red">Hello</h1> <p style="color: blue">World!!</p> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1 style="color: red">Hello</h1>  
<p style="color: blue">World!!</p>  
</body>  
</html>

Void Elements:

Elements with no contents and end tags are called Void or empty elements.

Nested HTML Elements:

An element containing another element is called the Nested HTML Element.

Block-level element:

An element that structures the main part of the web page is the Block-level element. It divides a page into coherent blocks and takes the full width of the web page, from left to right. It always starts with a new line.

The block-level elements in HTML are:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>,
<div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>,
<form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>,
<ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, 
<div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, 
<form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, 
<ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>