Opening and Closing Tags in HTML -

HTML uses opening and closing tags to define the beginning and end of many HTML elements. These tags tell the browser where an element starts, where its content belongs, and where the element ends.

For example:

<p>This is a paragraph.</p>

Here,  is the opening tag and  is the closing tag.

Understanding opening and closing tags is one of the most important basics of HTML. It helps you write correctly structured webpages and avoid common HTML errors.

If you are learning HTML for the first time, it is also useful to understand HTML Tags and HTML Elements, because opening and closing tags are the main parts used to create many HTML elements.

What Are Opening and Closing Tags?

An opening tag starts an HTML element, while a closing tag marks the end of that element.

For example:

<h1>HTML Tutorial</h1>

The opening tag is:

<h1>

The content is:

HTML Tutorial

The closing tag is:

</h1>

Together, they create an HTML element:

<h1>HTML Tutorial</h1>

Opening Tags

An opening tag is written using an element name inside angle brackets.

<p>

It tells the browser that a paragraph element is starting.

Other examples include:

<h1>
<h2>
<div>
<section>
<article>
<strong>
<em>

For example:

<h2>HTML Basics</h2>

The opening tag is:

<h2>

Closing Tags

A closing tag marks the end of an HTML element.

The main difference between an opening tag and a closing tag is the forward slash /.

Opening tag:

<p>

Closing tag:

</p>

Complete element:

<p>Learn HTML step by step.</p>

The slash tells the browser that the paragraph element is being closed.

Important: Not every HTML element requires a closing tag. Some elements are void elements and do not contain content.

Basic Syntax

The general syntax for an element with opening and closing tags is:

<opening-tag>Content</closing-tag>

For example:

<h1>Welcome</h1>

Another example:

<p>HTML creates the structure of webpages.</p>

And:

<strong>Important information</strong>

The pattern is the same:

Opening tag → Content → Closing tag

Examples of Opening and Closing Tags

Here are some commonly used examples:

<h1>Main Heading</h1>

<h2>Section Heading</h2>

<p>This is a paragraph.</p>

<strong>Important text</strong>

<em>Emphasized text</em>

<div>Content inside a div</div>

<section>Content inside a section</section>

<article>Article content</article>

Each of these elements has an opening tag and a closing tag.

Opening and Closing Tags With Attributes

Attributes are placed inside the opening tag.

For example:

<p class="intro">Welcome to Web4Learners.</p>

Here:

<p class="intro">

is the opening tag containing the class attribute.

The closing tag remains:

</p>

Another example:

<a href="https://web4learners.com/html/html-tags/">
    Learn HTML Tags
</a>

The href attribute belongs to the opening <a> tag.

Note: Attributes are normally placed in the opening tag, not the closing tag.

Closing Tags Do Not Contain Attributes

A common beginner mistake is trying to put attributes in a closing tag.

Incorrect:

<p class="text">Hello</p class="text">

Correct:

<p class="text">Hello</p>

The attribute belongs only in the opening tag.

Why Closing Tags Are Important

Closing tags tell the browser where an element ends.

Consider:

<p>First paragraph.</p>

<p>Second paragraph.</p>

The browser can clearly identify two separate paragraph elements.

If elements are not properly closed, the browser may have to guess the intended document structure.

For example:

<p>First paragraph.
<p>Second paragraph.

Browsers can often recover from this type of markup, but relying on browser error recovery is not good practice.

Important: Write HTML with the correct opening and closing tags even when browsers appear to handle missing tags automatically.

Correctly Nesting Opening and Closing Tags

HTML elements can be placed inside other elements.

For example:

<p>
    Learn <strong>HTML</strong> today.
</p>

The  element is inside the  element.

The tags are closed in the correct order:

<p>
    <strong>
    </strong>
</p>

This is called proper nesting.

Incorrect Nesting

Avoid overlapping elements like this:

<p>
    Learn <strong>HTML</p>
</strong>

The  element was opened after , so it should be closed before .

Correct:

<p>
    Learn <strong>HTML</strong>
</p>

A useful rule is:

The last element you open should generally be the first element you close.

Nested Elements Example

Here is a more detailed example:

<section>

    <h2>HTML Tutorial</h2>

    <p>
        Learn <strong>HTML</strong>
        with <em>practical examples</em>.
    </p>

</section>

The structure can be understood as:

<section>
    <h2></h2>
    <p>
        <strong></strong>
        <em></em>
    </p>
</section>

The <section> element contains the heading and paragraph, while  and  are nested inside the paragraph.

Void Elements Do Not Have Closing Tags

Not every HTML element has an opening and closing pair.

Some elements are called void elements because they cannot contain child content.

Examples include:

<br>
<img src="image.jpg" alt="Example">
<input type="text">
<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

For example,   creates a line break:

<p>Hello<br>World</p>

You should not write:

<br></br>

for normal HTML.

Similarly, an image is written as:

<img src="photo.jpg" alt="Mountain">

not:

<img src="photo.jpg" alt="Mountain"></img>

Note: In modern HTML, void elements such as   and <img> do not require a closing slash.

Opening and Closing Tags in Semantic HTML

Semantic elements also use opening and closing tags.

For example:

<header>
    <h1>Web4Learners</h1>
</header>

Here:

<header>

opens the header and:

</header>

closes it.

Another example:

<article>

    <h2>HTML Tutorial</h2>

    <p>
        Learn HTML step by step.
    </p>

</article>

The opening and closing tags make the structure of the content clear.

Opening and Closing Tags in a Complete HTML Page

A complete HTML document uses many opening and closing tags:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Opening and Closing Tags</title>

</head>

<body>

    <header>

        <h1>Opening and Closing Tags</h1>

    </header>

    <main>

        <article>

            <h2>Learn HTML</h2>

            <p>
                HTML uses tags to structure webpages.
            </p>

        </article>

    </main>

    <footer>

        <p>Web4Learners</p>

    </footer>

</body>

</html>

Notice how the elements are opened and closed in a structured order.

This overall organization is part of the HTML Document Structure you learned earlier.

Common Mistakes With Opening and Closing Tags

Forgetting the Closing Tag

Incorrect:

<p>Learn HTML

Better:

<p>Learn HTML</p>

Forgetting the Slash

Incorrect:

<p>Learn HTML<p>

Correct:

<p>Learn HTML</p>

Incorrect Nesting

Incorrect:

<p><strong>Important</p></strong>

Correct:

<p><strong>Important</strong></p>

Putting Attributes in Closing Tags

Incorrect:

<p>Hello</p class="text">

Correct:

<p class="text">Hello</p>

Adding Closing Tags to Void Elements

Incorrect:

<img src="image.jpg"></img>

Correct:

<img src="image.jpg" alt="Example">

Opening Tags vs Closing Tags

Feature	Opening Tag	Closing Tag
Purpose	Starts an element	Ends an element
Contains `/`	No	Yes
Can contain attributes	Yes	No
Example	`<p>`	`</p>`
Contains content after it	Yes	No
Used with normal elements	Yes	Yes

Best Practices

When working with opening and closing tags:

Always close elements that require closing tags.
Keep elements properly nested.
Put attributes in opening tags.
Use lowercase tag names consistently.
Indent nested elements to make the structure readable.
Learn which elements are void elements.
Use semantic elements when appropriate.
Do not rely on browsers to automatically fix incorrect HTML.

Note: Correct opening and closing tags make your HTML easier to read, debug, style with CSS, and manipulate with JavaScript.

FAQs About Opening and Closing Tags

What is an opening tag in HTML?

An opening tag starts an HTML element.

<p>

It can also contain attributes:

<p class="intro">

What is a closing tag in HTML?

A closing tag marks the end of an HTML element.

</p>

The forward slash / distinguishes it from the opening tag.

What is the difference between an opening tag and a closing tag?

An opening tag starts an element, while a closing tag ends it.

<p>Hello</p>

Here,  is the opening tag and  is the closing tag.

Do all HTML tags have closing tags?

No. Void elements such as <img>,  , <input>, <meta>, and <link> do not require closing tags.

Where are HTML attributes placed?

HTML attributes are placed inside the opening tag.

<p class="intro">Hello</p>

What happens if I forget a closing tag?

The browser may automatically recover from some missing tags, but the resulting document structure may not be what you intended. It is best to close elements correctly.

What is proper nesting in HTML?

Proper nesting means closing elements in the reverse order in which they were opened.

<p>
    <strong>Important</strong>
</p>

Can closing tags contain attributes?

No. Attributes belong in the opening tag.

<p class="text">Hello</p>

Why do closing tags use `/`?

The forward slash tells the browser that the tag is closing an existing element.

<p>Text</p>

Here,  indicates the end of the paragraph.

What is a void element?

A void element is an HTML element that cannot contain child content and therefore does not have a closing tag.

Examples include:

<br>
<img>
<input>
<hr>

Should HTML tags be written in lowercase?

HTML tag names are generally not case-sensitive, but lowercase tags are the conventional and recommended style.

Can opening and closing tags contain content?

The content belongs between the opening and closing tags.

<p>
    This is the content.
</p>

The opening tag starts the element, and the closing tag ends it.

What Are Opening and Closing Tags?

Opening Tags

Closing Tags

Basic Syntax

Examples of Opening and Closing Tags

Opening and Closing Tags With Attributes

Closing Tags Do Not Contain Attributes

Why Closing Tags Are Important

Correctly Nesting Opening and Closing Tags

Incorrect Nesting

Nested Elements Example

Void Elements Do Not Have Closing Tags

Opening and Closing Tags in Semantic HTML

Opening and Closing Tags in a Complete HTML Page

Common Mistakes With Opening and Closing Tags

Forgetting the Closing Tag

Forgetting the Slash

Incorrect Nesting

Putting Attributes in Closing Tags

Adding Closing Tags to Void Elements

Opening Tags vs Closing Tags

Best Practices

FAQs About Opening and Closing Tags

What is an opening tag in HTML?

What is a closing tag in HTML?

What is the difference between an opening tag and a closing tag?

Do all HTML tags have closing tags?

Where are HTML attributes placed?

What happens if I forget a closing tag?

What is proper nesting in HTML?

Can closing tags contain attributes?

Why do closing tags use /?

What is a void element?

Should HTML tags be written in lowercase?

Can opening and closing tags contain content?

Why do closing tags use `/`?