HTML Elements
In this tutorial, we will learn about the elements in HTML and difference between Elements and Tags with the help of examples.
Elements
A Tag/Element usually consists of an opening tag (), a closing tag (), and some content in between. Tags are case-sensitive.
Syntax :
<tag_name>...content...</tag_name>
Example :
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
</head>
<body>
<h1>This is simple heading.</h1>
<br>
<p>This is a simple paragraph.</p>
<hr>
</body>
</html>Elements in above example
| Start/Opening Tag | Some Content | End/Closing Tag |
|---|---|---|
<h1> |
My First Heading | </h1> |
<p> |
This is a simple paragraph | </p> |
<br /> |
none | none |
<hr /> |
none | none |
Note : <br /> and <hr /> tags are void tags.
Difference between Elements and Tags
A Element usually consists of an opening tag <tag_name>, a closing tag <p>, and some content in between.
For Example : <h1> is opening tag of heading and </h1> is a closing tag of same heading but <h1> My first heading </h1> is a heading element.
Nested HTML Tag
The tag inside the other tag is known as nested tag.
HTML can be nested(elements can contain other elements).
Example :
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>Output
Hello World!
This is a simple paragraph.
Explanation of above example
The <html> tag is root element of document. Inside <html> tag we have nested two elements <head> and <body>.
Inside the <head> tag we have nested a <title> tag.
And inside the <body> tag we have nested two tags <h1> and <p> tag.
Never Forget the Closing Tag
- Some HTML elements will display correctly, even if you forget the closing tag.
- It is necessary to write closing tag, If you forget to put end tag you will get unexpected results or errors may occur.