HTML Tags
Learn what an HTML tag is: opening and closing tags, the difference between tags, elements, and attributes, void elements, and nesting rules.
An HTML tag is a keyword (a tag name) wrapped in angle brackets, like <p> or <img>. Tags are the building blocks of HTML: they tell the browser where a piece of content starts and ends and what kind of content it is. The browser reads the tags, builds the page from them, but never displays the tags themselves.
This page explains what a tag is, how an opening tag differs from a closing tag, how tags combine into elements with attributes, which tags stand alone (void elements), and the rules for nesting tags correctly.
Opening and closing tags
Most tags come in pairs: an opening tag and a closing tag. The closing tag is identical to the opening tag but starts with a forward slash (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- The opening tag marks where the content begins.
- The closing tag marks where the content ends.
Everything between the two tags is the content the tags apply to.
Tag vs. element vs. attribute
These three terms are often confused, so it helps to define them precisely.
- A tag is the bracketed keyword on its own —
<p>or</p>. - An element is the complete unit: the opening tag, the content, and the closing tag together.
- An attribute is extra information placed inside the opening tag that configures the element.
Here is a single paragraph element broken into its parts:
<p class="intro">Hello world</p>| Part | What it is |
|---|---|
<p ...> | the opening tag |
class="intro" | an attribute (name class, value "intro") |
Hello world | the content |
</p> | the closing tag |
| the whole line | the element |
So <p> is a tag, while <p>Hello world</p> is an element. To learn more, see HTML Elements and HTML Attributes.
Example of a complete element
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Void (empty) elements
Some elements have no content and therefore no closing tag. These are called void elements (or empty elements). They consist of a single tag.
The most common void elements are:
<br>— a line break<hr>— a thematic break (horizontal rule)<img>— an image<input>— a form field
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">In HTML you write a void element as a single tag with no slash, e.g. <br>. The self-closing form <br /> is also accepted and is required in XHTML, but it is optional in HTML.
Tags are case-insensitive
HTML tag names are not case-sensitive: <P>, <p>, and <P> all mean the same thing. By convention, however, tags are written in lowercase, and that is the recommended style.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Nesting tags correctly
Tags can contain other tags. When they do, they must be nested properly: an inner element must open and close completely inside its parent. Tags may not overlap.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>In the incorrect example, <em> is opened inside <p> but closed outside of it. Browsers try to recover from mistakes like this, but the result is unpredictable, so always close the innermost tag first.
For notes that the browser ignores rather than renders, see HTML Comments.
History note: in the 1990s, authors sometimes wrapped script contents in HTML comment markers to hide them from very old browsers that did not understand
<script>. This technique is obsolete and should not be used today.