HTML Elements and Tags: Opening Tags, Closing Tags, Nesting and Void Elements

An HTML page is made of elements. Each element tells the browser what a piece of content is: a heading, a paragraph, a link, an image.

Anatomy of an element#

<p>Learning HTML is fun.</p>

The whole thing, from opening tag to closing tag, is the element. People often say "tag" for both, but strictly a tag is just the <p> or </p> part.

Nesting elements#

Elements can contain other elements. Here <strong> (important text) is nested inside a paragraph:

<p>Always <strong>save your file</strong> before reloading.</p>

Elements must close in the reverse order they opened, like boxes inside boxes. The inner element closes first:

<!-- Correct: strong closes before p -->
<p>Always <strong>save your file</strong>.</p>

<!-- Wrong: the tags overlap -->
<p>Always <strong>save your file.</p></strong>

Browsers try to repair overlapping tags, but each browser's repair can differ from what you meant. Always nest properly.

Parents, children and siblings#

These family words describe the tree of elements, and you will see them again in CSS and JavaScript:

<ul>
  <li>Tea</li>
  <li>Coffee</li>
</ul>

• <ul> is the parent of both <li> elements.
• Each <li> is a child of <ul>.
• The two <li> elements are siblings.

Void (empty) elements#

Some elements have no content, so they have no closing tag. These are called void elements. The most common are:

<p>Laviyx Learn<br>Free programming lessons</p>
<hr>
<p>The line above is an hr element.</p>

You may see void elements written as <br />. In HTML the trailing slash is allowed but has no effect, so <br> and <br /> are the same. Use whichever style your team uses, consistently.

Case#

Tag names are not case-sensitive: <P> and <p> mean the same element. Always write them in lowercase; it is the universal convention and easier to read.

Unknown elements#

If you misspell an element name, such as <pargraph>, the browser does not show an error. It treats it as an unknown element with no special meaning and displays its text. This is why typos in HTML are easy to miss and why validators are useful (see Validation and Best Practices).

Common mistakes#

Practice#

<p>HTML elements can be <strong>nested</strong>.</p>
<hr>
<p>First line<br>Second line</p>

Key takeaway#