In this article, we will know the HTML Elements, along with understanding the various available elements & their syntax through the examples. An HTML element is a collection of start and end tags with the content inserted in between them.
Syntax:
<tagname > Contents... </tagname>
Supported Tags: HTML Elements supports almost all HTML Tags.
HTML Element: The HTML element consists of 3 parts.
- Opening tag: It is used to tell the browser where the content material starts.
- Closing tag: It is used to tell the browser where the content material ends.
- Content: It is the actual content material inside the opening and closing tags.
Combining all these 3 parts results in an overall HTML Element.
Example:
The entire structure of the HTML Element
Example 1: In this example <p> is a starting tag, </p> is an ending tag and it contains some content between the tags, which form an element
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<p>Hi Geeks!</p>
</body>
</html>
|
Output:
HTML elements example
Example 2: This example illustrates the use of the HTML paragraph element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
|
Output:
Nested HTML Elements: The HTML element used inside another HTML Element is called a nested HTML element.
Example 3: This example describes the use of Nested HTML elements. Here, the <html> tag contains the <head> and <body>. The <head> and <body> tag contain other elements so it is called a nested element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body style="text-align: center">
<h1>GeeksforGeeks</h1>
<p>Computer science portal</p>
</body>
</html>
|
Output:
Nested HTML element
Necessary to add an end tag: It is necessary to add the end tag of an element. Otherwise, the displayed content may or may not be displayed correctly. It is a good practice if you add closing tags to the non-void HTML Elements but nowadays browsers are getting more and more advanced and forgiving in nature and that’s why if you somehow forget to apply the closing tag in the non-void Element, the browser will not throw any error but the problem will arise as you insert more and more HTML elements after that.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<p>Hi Geeks!
</body>
</html>
|
This Image is showing the Browser’s Developer Tools and you can see that the missing closing tag of the paragraph element in the above-written code is automatically added by the browser without showing any error.
Developer Tools
The Final Output is:
WebPage
A web browser is forgiving but it doesn’t mean that you start ignoring the ending/closing tag of the HTML elements. It might show some unexpected behavior or error in some cases. Like if you have more than one HTML element on your webpage then omitting the closing tag might result in clashing of the boundaries of different HTML elements. The browser won’t know where it ends. It will take the next tag and think it belongs to the previous tag without the closing tag.
Final Summary of the above text segment: Always put the closing tag to a non-void HTML element.
Example 4: This example describes the HTML element by specifying the end tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Computer science portal</p>
</body>
</html>
|
Output:
HTML start & end tag example
Empty HTML Elements: HTML Elements without any content i.e., that do not print anything are called Empty elements. Empty HTML elements do not have an ending tag. For instance. <br>, <hr>, <link>, <input> etc are HTML elements.
Example 5: In this example <br> tag doesn’t print anything. It is used as a line break that breaks the line between <h2> and <p> tags.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Empty HTML Elements</title>
</head>
<body>
<h2>Welcome To GfG</h2>
<br />
<p>Hello Geeks.</p>
</body>
</html>
|
Output:
HTML empty element