HTML Tags Explained: Opening, Closing, and Self-Closing
If you’re just starting with coding, HTML is a great place to begin. HTML is the language that tells your web browser what to show on a web page. It uses tags to describe things like headings, paragraphs, images, and links.
In this article, you’ll learn what HTML tags are, how opening, closing, and self-closing tags work, and how to put them together to build a simple page. You’ll also write a few small examples you can try in your own browser.
What Is an HTML Tag?
An HTML tag is a special piece of text that tells the browser how to display something. Tags usually come in pairs:
- An opening tag – tells the browser, “Start this thing here.”
- A closing tag – tells the browser, “End this thing here.”
A basic tag pair looks like this:
<p>This is a paragraph.</p>
<p>is the opening tag.</p>is the closing tag (notice the/).This is a paragraph.is the content inside the tags.
The browser uses these tags to understand how to format your text.
Opening and Closing Tags: The Core Idea
Most HTML elements follow this pattern:
<opening-tag>Content goes here</closing-tag>
The tags have the same name, but the closing tag has a slash (/) before the name.
Example 1: A Simple HTML Page
Let’s start with a tiny web page. Don’t worry if some tags look new; we’ll focus on how opening and closing tags work.
<!DOCTYPE html> <!-- Tells the browser this is an HTML5 document -->
<html> <!-- Opening <html> tag -->
<head> <!-- Opening <head> tag -->
<title>My First Page</title> <!-- Page title shown in browser tab -->
</head> <!-- Closing </head> tag -->
<body> <!-- Opening <body> tag -->
<h1>Hello, world!</h1> <!-- A big heading -->
<p>This is my first HTML page.</p> <!-- A paragraph -->
</body> <!-- Closing </body> tag -->
</html> <!-- Closing </html> tag -->
What each pair does:
<html> ... </html>: Wraps the entire page.<head> ... </head>: Holds page information (like the title), not usually visible in the main page area.<body> ... </body>: Holds everything you actually see on the page.<h1> ... </h1>: A main heading.<p> ... </p>: A paragraph of text.
Expected result:
When you open this file in a browser, you’ll see a big heading that says “Hello, world!” and a paragraph that says “This is my first HTML page.”
Try it yourself
- Open a simple text editor (Notepad on Windows, TextEdit on Mac in plain text mode, or any code editor).
- Copy the code above and paste it into the file.
- Save the file as
first-page.htmlon your computer. - Double-click the file to open it in your browser.
You just built a basic HTML page using opening and closing tags.
Nesting: Tags Inside Other Tags
Tags can go inside other tags. This is called nesting. When you nest tags, order matters.
Correct nesting looks like this:
<p>This is a <strong>very important</strong> message.</p>
<p>opens first and closes last.<strong>opens and closes inside the paragraph.
Incorrect nesting might look like this:
<p>This is a <strong>very important</p></strong> <!-- Wrong! -->
This can confuse the browser and lead to strange results. Always close inner tags before closing outer tags.
Example 2: Headings, Paragraphs, and Emphasis
Let’s build a slightly richer page using nested tags.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>
Hi, my name is <strong>Alex</strong> and I am learning
<em>HTML</em>.
</p>
<p>
I enjoy:
<br> <!-- Line break (self-closing style, more on this soon) -->
Coding<br>
Reading<br>
Gaming
</p>
</body>
</html>
What’s happening here:
<strong>Alex</strong>makes “Alex” bold.<em>HTML</em>makes “HTML” italic or emphasized.<br>adds a line break (a new line) inside the paragraph.- The second
<p>uses<br>to list items on separate lines.
Expected result:
You’ll see a heading “About Me,” a paragraph introducing Alex, and another paragraph where each hobby appears on its own line.
Try it yourself: Change the name, hobbies, or add another <strong> or <em> around words you want to highlight.
Self-Closing Tags: When There Is No Content
Some HTML elements don’t need a separate closing tag because they don’t wrap content. They are just “things” that appear or do something in one spot, like an image or a line break. These are often called self-closing tags or void elements.
Common self-closing tags include:
<br>– A line break.<img>– An image.<hr>– A horizontal line.
You’ll sometimes see self-closing tags written in two ways:
<br>
<br />
Both usually work in modern browsers. For beginners, <br> is enough.
Example 3: Adding an Image and Line Breaks
Let’s create a simple page with a heading, some text, and an image.
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Animal</title>
</head>
<body>
<h1>My Favorite Animal</h1>
<p>
I really love cats.<br>
They are cute, playful, and curious.
</p>
<!-- Image tag: no closing tag, uses attributes instead -->
<img src="https://via.placeholder.com/150" alt="A cute cat placeholder image">
</body>
</html>
What’s new here:
<img>is self-closing. It doesn’t wrap text, so there is no</img>.src="..."is an attribute that tells the browser where to get the image.alt="..."is another attribute that provides alternative text if the image can’t load or for screen readers.
Expected result:
You’ll see the heading “My Favorite Animal,” a paragraph with a line break after “I really love cats.” and a small placeholder image below it.
Try it yourself:
- Replace the
srcURL with a picture link you like (make sure it’s a direct image URL). - Change the
alttext to describe your own image.
Step-by-Step: Building a Mini Webpage
Now let’s put everything together: opening tags, closing tags, and self-closing tags.
Example 4: A Tiny Personal Webpage
<!DOCTYPE html>
<html>
<head>
<title>My Mini Homepage</title>
</head>
<body>
<h1>Welcome to My Mini Homepage</h1>
<p>
Hi, I am <strong>Your Name</strong> and I am learning HTML.
</p>
<p>
Here are a few things I like:
<br>
<em>Coding</em>
<br>
<em>Music</em>
<br>
<em>Traveling</em>
</p>
<hr> <!-- Horizontal line, self-closing style element -->
<p>
Thanks for visiting my page!
</p>
</body>
</html>
What you’re using now:
- Opening and closing tags:
<html>,<head>,<body>,<h1>,<p>,<strong>,<em> - Self-closing tags:
<br>,<hr> - Nesting:
<strong>and<em>inside<p>.
Try it yourself:
- Save this as
mini-homepage.html. - Open it in your browser.
- Change the heading, add more
<br>lines, or create another paragraph.
Every time you change the file and refresh the browser, you’ll see how HTML tags control what appears on the page.
Common Mistakes to Watch For
As you practice, a few common issues might show up:
Missing closing tags
- Example:
<p>This is a paragraph(no</p>) - Fix: Always close your elements:
<p>This is a paragraph</p>.
- Example:
Typos in tag names
- Example:
<bdy>instead of<body> - Fix: Double-check your spelling.
- Example:
Incorrect nesting
- Example:
<p><strong>Text</p></strong> - Fix: Close tags in the reverse order you opened them.
- Example:
Forgetting attributes on self-closing tags
- Example:
<img>withoutsrcoralt - Fix: Always include
srcand a helpfulaltdescription.
- Example:
Don’t worry if you make these mistakes at first. Everyone does. Debugging (finding and fixing errors) is a big part of learning to code.
Quick Recap and What’s Next
You’ve just taken important first steps in learning HTML. Here’s what you learned:
- HTML tags tell the browser how to display content.
- Most elements use opening and closing tags, like
<p>...</p>. - Some elements are self-closing (void elements), like
<br>,<img>, and<hr>. - Tags can be nested, and the order of opening and closing them matters.
- You can already build simple pages with headings, paragraphs, line breaks, and images.
From here, you can explore more HTML tags like links (<a>), lists (<ul>, <li>), and forms. Each new tag you learn will let you build more powerful and interesting pages.
You’re doing great just by reading and trying these examples. Keep experimenting, changing the code, and refreshing your browser. Every small step adds up—and you’re already writing real web pages!
