Opening and Closing Tags
All HTML TopicsOpening and Closing Tags
Most HTML elements are written using two tags: an opening tag and a closing tag. The opening tag tells the browser where the element starts, while the closing tag tells the browser where it ends.
Imagine a box. The opening of the box tells you where the box starts. The closing of the box tells you where the box ends.
HTML works in a similar way. The opening tag starts an element, content goes inside it, and the closing tag finishes the element.
Basic Syntax
A typical HTML element looks like this:
<tagname>Content goes here</tagname>Opening Tag
<tagname>
Marks the beginning of the HTML element.
Content
Content goes here
The text or other elements placed inside the element.
Closing Tag
</tagname>
Marks the end of the HTML element.
Simple Example
Let's create a paragraph using an opening and closing tag.
<p>Hello World!</p>
The browser understands that
<p>
starts the paragraph and
</p>
ends it.
The text between them becomes the
paragraph content.
What Is an Opening Tag?
An opening tag tells the browser that an element is starting.
<h1>
For example,
<h1>
is the opening tag for a level-one heading.
It tells the browser:
"A heading starts here."
What Is a Closing Tag?
A closing tag tells the browser where an element ends.
</h1>
Notice the forward slash
/
before the tag name.
That slash tells us that this is the
closing tag.
Opening Tag vs Closing Tag
Opening Tag
<p>
Starts the paragraph element.
Closing Tag
</p>
Ends the paragraph element.
Putting Them Together
When the opening tag, content, and closing tag are combined, we get a complete HTML element.
<p>
HTML is easy to learn.
</p>More Examples
The same pattern is used by many HTML elements.
<h1>My Website</h1>
<p>Welcome to my website.</p>
<strong>Important message</strong>
<em>This text is emphasized.</em>
<button>Click Me</button>Opening and Closing Tags with Nesting
HTML elements can be placed inside other HTML elements.
<p>
Learn
<strong>HTML</strong>
step by step.
</p>
Here,
<strong>
is inside the
<p>
element.
The important rule is:
close the inner element before closing
the outer element.
Correct Nesting
<p>
This is
<strong>important</strong>
text.
</p><strong> element
opens and closes completely before the
<p> element closes.
Incorrect Nesting
<p>
This is
<strong>important
</p>
</strong>This is incorrect because the tags overlap. Always close nested elements in the reverse order in which they were opened.
Do All HTML Tags Need Closing Tags?
No. Some HTML elements are void elements and do not have a closing tag.
<br>
<hr>
<img src="photo.jpg" alt="A photo">
<input type="text">
These elements do not wrap content in the
same way that elements such as
<p>
and
<h1>
do.
Common Mistakes
These are common mistakes beginners make when working with opening and closing tags.
-
Forgetting the closing tag.
Example:<p>Hello -
Forgetting the slash in a closing tag.
Incorrect:<p>instead of</p> - Closing tags in the wrong order when elements are nested.
- Adding closing tags to void elements unnecessarily.
-
Misspelling the tag name.
Example:<paragrph>instead of<p>
Easy Way to Remember
Opening Tag
↓
<p>
↓
Content
↓
Hello World!
↓
Closing Tag
↓
</p>Try It Yourself
Change the HTML below and click Run to see the result.
Quick Summary
Starts an HTML element.
Ends an HTML element.
Goes between the opening and closing tags.
Allows elements to be placed inside other elements.
Some HTML elements do not have closing tags.
Close nested elements in the reverse order they were opened.