Page 1 of 8
Home Whiteboard Online Compilers Practice Articles Jobs Tools
SQL HTML CSS Javascript Python Java C C++ PHP Scala C#
What Is an HTML Element?
HTML elements are the basic building blocks to create a web page, created with an
opening tag, content, and ending tag.
What is an HTML Element?
An HTML element is a fundamental component of an HTML document that can contain
data to display on the webpage, such as text, image, link, or sometimes nothing. An
HTML element includes an opening tag, content, and a closing tag, where the opening
tag may also include attributes.
An HTML element includes:
Opening Tag: An opening tag specifies the beginning of the element and may
include multiple attributes.
Content: The content part includes the information to be displayed or processed
within an element.
Closing Tag: A closing tag marks the end of the element (A closing tag may be
optional for some elements).
An HTML document consists of a tree of HTML elements, and they define the content
and layout of a webpage, like how and what content should display in the different
sections of a webpage.
Example of HTML Elements
Some of the examples of HTML elements are as follows:
<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
[Link] 1/8
Page 2 of 8
<div>This is division content.</div>
The following table displays the different parts (opening tag, content, and closing tag) of
the HTML elements used in the above example:
Opening Tag Content Closing Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
So here <p>...</p> is an HTML element, <h1>...</h1> is another HTML element.
HTML Element Structure
The following image demonstrates the structure of an element, like how an HTML
element is written with the opening and closing tags:
Elements vs. Tags: What's the Real Difference?
This is the most common point of confusion for beginners. Here's a simple way to think
about it:
An HTML Tag is just the opening <p> or closing </p> part. They are the
instructions.
An HTML Element is the entire thing: the opening tag, the content inside, and the
closing tag.
[Link] 2/8
Page 3 of 8
Think of it like a sandwich. The two slices of bread are the tags, and the complete
sandwich with everything inside is the element.
Understanding Nested Elements
HTML allows nesting of elements. The nested elements are created by placing one or
more HTML elements inside an HTML element. Where the container element can be
considered as a parent element and others are as child elements. The child elements are
nested inside the parent element. We can have multiple levels of nesting; however, it
requires some guidelines to follow −
Every opening tag must have a corresponding closing tag.
The closing tag of the parent element must come after the closing tag of the child
element.
The nested elements must be valid HTML elements.
Example
In the following example, we are nesting the italicized element (<i>...</i>) within the
h1 element and underline (<u>...</u>) element within the paragraph element.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
On executing the above example, we can observe the two sentences where we have
nested one HTML within another.
Note: In the above example, the <html>, <head>, and <body> tags are also nested
elements as they have one or more elements inside them.
[Link] 3/8
Page 4 of 8
Special Case: Empty (Void) Elements
HTML void elements are those elements that don't require closing tags. These tags don't
have any content model and even don't allow nesting of elements. The void elements are
also known as empty or self-closing elements.
Some of the void elements are such as <img />, <hr />, and <br /> elements. The
below table shows a list of void elements −
[Link] Elements & Description
<img>
1
Used for inserting images within HTML documents.
<hr>
2
It displays a horizontal rule.
<br>
3
It is used to provide a line break.
<source>
4
It is used for embedding media resources like audio and video.
Note: You might see these tags written with a / at the end, like <br />. This is an older
syntax and is not needed in modern HTML5.
Example
The following example demonstrates the example of HTML void elements −
Open Compiler
<!DOCTYPE html>
<html>
<body>
<p>This line contains a line break tag, <br> hence content is visible in
two separate lines.</p>
<p>This line is <hr>separated by a horizontal rule.</p>
</body>
</html>
On executing, the above code will produce two paragraphs, one with a line break and the
other with a horizontal rule.
[Link] 4/8
Page 5 of 8
Attributes With HTML Elements
The attributes can be placed with an opening tag by using the pairs of attribute name
and value. Multiple attributes can be separated with a space.
The following statement demonstrates the use of two attributes src and alt with an
HTML element img:
<img src="[Link]" alt="TutorialsPoint Logo" />
Mandatory Closing HTML Elements
The HTML elements that are opened must be closed. Only the void elements like <img
/>, <hr />, <br />, etc. do not require closing tags; other elements such as <p> and
<h1> require closing tags after the content part.
If any HTML element does not include a closing tag, it may not cause an error, and some
content may still display properly. However, never miss the closing tag, as it may lead to
unexpected and inconsistent results.
Example
In this example, we are removing the closing tags from the paragraph tag. Still, it will
show the correct result.
Open Compiler
<!DOCTYPE html>
<html>
<body>
<p>This line contains a line break tag, <br /> hence content is visible in
two separate lines.
<p>This line is <hr /> separated by a horizontal rule.
</body>
</html>
The above HTML code will produce two paragraphs, one with a line break and the other
with a horizontal rule.
Are HTML Elements Case-sensitive?
[Link] 5/8
Page 6 of 8
No, HTML elements are not case-sensitive, which means we can write HTML
elements either in uppercase or lowercase. However, it is not a good practice, as W3C
recommends and demands lowercase. Hence, always try to use lowercase for the tag
names.
Example
In the following example, we are writing HTML elements (tag names) in uppercase and
mixed case (uppercase and lowercase); see the output; there is no error and HTML code
runs fine −
Open Compiler
<!DOCTYPE html>
<HTml>
<BODY>
<P>HTML is not case sensitive i.e we can use both upper or, lower case
letters in the tags.</p>
</BOdy>
</html>
TOP TUTORIALS
Python Tutorial
Java Tutorial
C++ Tutorial
C Programming Tutorial
C# Tutorial
PHP Tutorial
R Tutorial
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
SQL Tutorial
TRENDING TECHNOLOGIES
Cloud Computing Tutorial
[Link] 6/8
Page 7 of 8
Amazon Web Services Tutorial
Microsoft Azure Tutorial
Git Tutorial
Ethical Hacking Tutorial
Docker Tutorial
Kubernetes Tutorial
DSA Tutorial
Spring Boot Tutorial
SDLC Tutorial
Unix Tutorial
CERTIFICATIONS
Business Analytics Certification
Java & Spring Boot Advanced Certification
Data Science Advanced Certification
Cloud Computing And DevOps
Advanced Certification In Business Analytics
Artificial Intelligence And Machine Learning
DevOps Certification
Game Development Certification
Front-End Developer Certification
Chapters Categories
AWS Certification Training
Python Programming Certification
COMPILERS & EDITORS
Online Java Compiler
Online Python Compiler
Online Go Compiler
Online C Compiler
Online C++ Compiler
Online C# Compiler
Online PHP Compiler
Online MATLAB Compiler
Online Bash Terminal
Online SQL Compiler
Online Html Editor
[Link] 7/8
Page 8 of 8
ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |
PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S
Tutorials Point is a leading Ed Tech company striving to provide the best learning material on
technical and non-technical subjects.
© Copyright 2025. All Rights Reserved.
[Link] 8/8
