Tags Definition | The Interactive Glossary

Sharing is caring!

Tags are the HTML tools used to create the elements that make up the web page.

An HTML element is any single component of a web page. For example, a paragraph of text, a navigation menu item, an image, and an article heading are each an example of an HTML element. Each element is surround by two tags: an opening tag, and a closing tag. These tags define where the element begins, where it ends, and assign a meaning to the element.

• The beginning of an element is marked by an opening tag. An HTML opening tag consists of a left angle bracket (<), the name of the element (“p” in the case of a paragraph), and a right angle bracket (>).
• The end of an element is marked by a closing tag. A closing tag consists of a left angle bracket (<), a forward slash (⁄), the name of the element (“p” in the case of a paragraph), and a right angle bracket (>).
• The meaning of an element is assigned by the name of the element. The name of an element consists of a series of letters and numbers. As we've already mentioned, a paragraph element is marked by the letter “p”. When text is surrounded by an opening and closing “p” tag, the browser knows that the text surrounded by the tags is a paragraph of text.

Taken together, an opening tag, element content, and closing tag will look like this in an HTML document.

<p>Paragraph text.<⁄p>

Some of the most common tags include:

• Paragraph: “p”
• Header: “h1”, “h2”, “h3”, “h4”, “h5”, and “h6”
• Anchor (hyperlink): “a”
• Numbered (ordered) list: “ol”
• Bulleted (unordered) list: “ul”
• List item: “li”
• Bold (strong) text: “strong”
• Italicized (emphasized) text: “em”

There are also void elements in HTML documents which do not have any contents. Void elements only have an opening tag and do not require a closing tag. As a result, the tags that define void elements are sometimes called self-closing tags. Common examples of void elements include:

• Line break: “br”
• Image: “img”
• Horizonal rule: “hr”

All of the tags we've mentioned so far define visual elements of a web page. However, there are many other HTML elements that define parts of the web page that the average website user doesn't see, and may be unaware of. These tags do things like import styles from external style sheets to the web page (“link”), call JavaScript functions to add interactive elements to a web page (“script”), and much more.

Also See: HTML, HTML Overview

Frequently Asked Questions

Where can I learn more about HTML?

There are many resources available online where you can learn more about HTML. You should start with our article on HTML which provides a lot more detail than this glossary definition. After that, consider working your way through the HTML tutorial provided by the Mozilla Developer Network, or one of the resources recommended by the World Wide Web Consortium (W3C).

Why are there six different header tags?

There are six headers in order to give webmasters the ability to structure HTML documents with enough header levels to properly lay out the contents of a web page.

One of the details that is often overlooked in the conversation about using HTML is the importance of writing HTML that is accessible to all users. Website users who rely on screen readers and similar technology depend on properly written HTML. In the case of headers, this means that header levels should not be skipped, and only one “h1” should be used on a page. By using headers properly, screen readers are better able to make sense of the structure of the page.