HTML Elements
In this tutorial, we will learn about the elements in HTML and difference betweeen Elements and Tags with the help of examples.
Elements
A Tag/Element usually consists of an opening tag (
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.
Explaination 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 neccessary to write closing tag, If you forget to put end tag you will get unexpected results or errors may occur.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Elements in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Attributes.