HTML Tags | Start Tags, End Tags & Tag Syntax

Understanding HTML Tags

HTML tags are pieces of markup used to identify HTML elements and provide instructions about the structure and meaning of content within a document.

Tags are written using angle brackets and an HTML element name. Many elements use both a start tag and an end tag, while HTML void elements use only a start tag. Understanding how tags are constructed makes it easier to read, write, and troubleshoot HTML markup.

HTML Tag Syntax

An HTML tag is written by placing an element name between a less-than sign (<) and a greater-than sign (>). These characters are commonly called angle brackets when discussing HTML markup.

For example, the start tag for a paragraph element is:

<p>

The letter p is the tag name and identifies the type of HTML element being represented.

When a tag contains attributes, they are written after the tag name and before the closing angle bracket:

<a href="about.html">

In this example, a is the tag name and href="about.html" is an attribute and its value.

Start Tags

A start tag, sometimes informally called an opening tag, marks the beginning of an HTML element. The start tag contains the element name and can also contain attributes.

<p>

When content follows the start tag, it becomes part of the element:

<p>This is a paragraph.

A start tag can also contain one or more attributes:

<a href="contact.html" title="Contact Us">

Attributes are written only where the syntax for the element permits them and provide additional information about the element. Attributes are covered in detail in the next tutorial.

End Tags

An end tag, also commonly called a closing tag, identifies the end of an HTML element. An end tag contains the same tag name as its corresponding start tag, preceded by a forward slash (/).

</p>

A complete paragraph therefore looks like this:

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

The start and end tag names must correspond:

Correct:

<h2>About Our Company</h2>

Incorrect:

<h2>About Our Company</h3>

In the incorrect example, the start tag identifies an h2 element while the end tag uses h3, so the tags do not correctly identify the same element.

Tag Names

The tag name identifies the type of HTML element represented by the markup. HTML defines a specific set of element names, and each element has its own purpose, permitted content, attributes, and usage rules.

Some common tag names include:

<html>
<head>
<body>
<h1>
<p>
<a>
<img>
<ul>
<li>

Tag names should not be invented when you intend to use a standard HTML element. For example, a paragraph is represented with the defined p element rather than a made-up tag name.

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

As you continue through the tutorials, you will learn the purpose and proper use of the individual elements defined by HTML.

Tags & Attributes

Attributes are written inside a start tag and provide additional information about an element. They appear after the tag name and before the closing angle bracket.

<a href="products.html">Products</a>

The start tag in this example can be separated into its basic parts:

<a href="products.html">
 ↑          ↑
tag      attribute
name

Multiple attributes are separated by whitespace:

<a href="products.html" title="View Our Products">Products</a>

Attributes belong in the start tag. They are not repeated in the end tag:

Correct:

<a href="products.html">Products</a>

Incorrect:

<a href="products.html">Products</a href="products.html">

The next tutorial, Attributes, explains attribute names, values, boolean attributes, quotation marks, and other attribute syntax in greater detail.

Tags & Elements

A tag and an element are related, but the terms describe different things. A tag is markup used as part of the representation of an HTML element.

For example:

<p>        ← start tag
</p>       ← end tag

The complete paragraph element includes the tags and the content they contain:

<p>Welcome to my website.</p>
└──────── element ──────────┘

This distinction is useful when discussing HTML accurately. Instead of saying that the text is "inside the paragraph tag," it is more precise to say that the text is content of the paragraph element.

Optional Tags

Although many HTML elements require both a start tag and an end tag, HTML allows certain tags to be omitted in specific situations. The rules for omitting tags depend on the particular element and the surrounding markup.

For example, an end tag can sometimes be omitted from an li element when the following markup makes the end of the element unambiguous:

<ul>
  <li>HTML
  <li>CSS
  <li>JavaScript
</ul>

This can be valid HTML, but these tutorials generally include optional start and end tags when they can be written explicitly:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Writing the optional tags explicitly often makes the structure easier for beginners and other people reading the source code to understand. However, whether a tag may legally be omitted is determined by the rules for that particular HTML element.

Tags & Void Elements

HTML includes a specific group of elements called void elements. Void elements cannot have child nodes and do not use end tags.

For example:

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

Because these are void elements, writing end tags for them is incorrect:

<!-- Incorrect -->
<br></br>
<img src="photo.jpg" alt="Mountain landscape"></img>

You may encounter a trailing slash in markup written as <br /> or <img ... />. HTML does not require that slash for void elements, so these tutorials use the simpler HTML syntax:

<br>

Void elements are covered in greater detail in the upcoming Empty Elements tutorial.

Using Lowercase Tags

HTML tag names are ASCII case-insensitive, which means HTML element names can generally be written using uppercase or lowercase letters.

<P>Paragraph</P>
<p>Paragraph</p>

Both examples identify a paragraph element in an HTML document. However, lowercase tag names are the conventional style used in modern HTML and make markup more consistent and easier to read.

These tutorials therefore use lowercase tag names throughout:

<header>
  <h1>My Website</h1>
</header>

Whatever formatting conventions are established for a project, following them consistently makes the source code easier for everyone working on the website to understand and maintain.

Common Tag Mistakes

Many HTML tag mistakes are small typing or structural errors. Browsers can recover from many errors, so a webpage appearing correctly does not necessarily mean the underlying markup is correct.

Common mistakes include:

Misspelling a tag name.
Forgetting a required end tag.
Using a different tag name in the start and end tags.
Placing attributes inside an end tag.
Adding an end tag to a void element.
Incorrectly nesting start and end tags.

For example, the following markup is incorrectly nested:

<p>This is <strong>important.</p></strong>

The nested strong element should be closed before the surrounding p element:

<p>This is <strong>important</strong>.</p>

Consistent indentation can make problems like incorrect nesting much easier to recognize when reviewing the source code.

HTML Tag Best Practices

Following consistent practices when writing HTML tags makes markup easier to read, troubleshoot, edit, and maintain.

Use lowercase tag names for consistency.
Spell tag names correctly.
Include required end tags.
Use matching tag names for start and end tags.
Place attributes inside start tags, not end tags.
Separate multiple attributes with whitespace.
Do not write end tags for void elements.
Nest start and end tags correctly.
Use consistent indentation to make tag relationships easier to recognize.

Clean and consistent tag syntax makes the structure of an HTML document easier to understand, particularly when the markup is later edited or maintained by someone else.

Summary

HTML tags are pieces of markup used to represent HTML elements. Start tags identify the beginning of elements and can contain attributes, while end tags identify the end of elements that require them.

Using the correct tag names, matching start and end tags, properly nesting markup, and following consistent formatting conventions makes HTML easier to read and maintain. Remember that a tag is part of the markup used to represent an element, while an element represents the complete structure described by that markup.