Types of Tags in HTML: Complete List with Examples (2026)

Last updated: October 2026

HTML (HyperText Markup Language) builds the structure of every web page, and tags are its basic building blocks. This guide explains the two basic types of tags, how many tags HTML has, and the main categories with simple examples.

What Is a Tag in HTML?

An HTML tag is a keyword inside angle brackets that marks where an element starts or ends, for example <p> and </p>. Tags tell the browser how to structure and display content.

<p class="intro">Hello world!</p>

Here <p class="intro"> is the opening tag, class="intro" is an attribute, “Hello world!” is the content, and </p> is the closing tag.

Tag vs element: MDN explains that tags begin or end an element in source code, whereas elements are part of the DOM, the model the browser uses to display the page. In everyday use people often say “tag” for both.

What Are the 2 Types of Tags in HTML?

HTML tags are commonly divided into two types:

1. Paired tags (container tags): They have an opening and a closing tag with content in between. Examples: <p>…</p>, <h1>…</h1>, <div>…</div>.
2. Empty tags (void tags): They have a single tag and no closing tag. Examples: <br>, <hr>, <img>, <input>, <meta>.

MDN notes that some elements consist of a single tag and are called void elements. In older code you may see a slash, such as <br />.

How Many Types of Tags Are There in HTML?

There is no single fixed number. HTML has more than 100 elements, and the list changes over time as new ones arrive and old ones are retired. The easiest way to learn them is by category:

Can Tags Contain Other Tags? (Nesting)

Yes. Tags can contain other tags. This is called nesting, and the inner tag must close before the outer one closes.

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

Correct: <p>This is <strong>important</strong>.</p>
Incorrect: <p>This is <strong>important.</p></strong>

Some tags cannot be nested inside certain others. For example, <li> belongs inside <ul>, <ol> or <menu>, and <td> belongs inside <tr>.

1. Structural Tags

These tags define the layout of a web page.

• <html>: the root element that wraps the whole document.
• <head>: holds metadata such as the page title and character encoding, and links to CSS or scripts. Its content is not shown on the page.
• <body>: holds all visible content: text, images, links, videos.
• <header>: introductory content, often a logo and navigation links.
• <nav>: main navigation links such as Home, About Us and Portfolio.
• <main>: the main content of the page. Use it once per page.
• <section>: groups related content under a theme, usually with a heading.
• <article>: self-contained content that makes sense on its own, such as a blog post.
• <aside>: side content related to the main content, such as a sidebar or a related-links box.
• <footer>: footer information such as copyright notices and contact details.

<body>
  <header>…</header>
  <nav>…</nav>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

2. Text Formatting Tags (Tags for Decorating Text)

• <h1> to <h6>: headings. h1 is the most important and largest by default, h6 the least.
• <p>: a paragraph.
• <br>: a line break (empty tag).
• <hr>: a horizontal line that separates content (empty tag).
• <strong>: strong importance, shown bold by default.
• <em>: emphasis, shown italic by default.
• <mark>: highlighted text.

<h1>Main heading</h1>
<p>This is <strong>important</strong> and this is <em>emphasised</em>.</p>

Tip: Use <h1> once per page, and use CSS, not headings, to change text size. To add a non-breaking space, use the character entity  . It is not a tag, but a code that inserts a space that cannot break across lines.

3. List Tags

• <ul>: unordered (bulleted) list.
• <ol>: ordered (numbered) list.
• <li>: a list item, used inside ul and ol.
• <dl>, <dt>, <dd>: a description list, with terms and their descriptions.

<ol>
  <li>Open the editor</li>
  <li>Write your code</li>
</ol>

4. Link Tag

The <a> (anchor) tag creates a hyperlink to another page, file or section. The href attribute holds the destination.

<a href="https://developer.mozilla.org/">Visit MDN</a>

5. Image Tag

The <img> tag displays an image. It is an empty tag. Always include alt text for accessibility and SEO.

<img src="logo.png" alt="Company logo">

6. Table Tags

• <table>: the table.
• <tr>: a table row.
• <th>: a heading cell.
• <td>: a data cell.

<table>
  <tr><th>Name</th><th>Role</th></tr>
  <tr><td>Ali</td><td>Developer</td></tr>
</table>

7. Form Tags

• <form>: wraps a form, such as a login or registration form.
• <input>: text fields, checkboxes, radio buttons and more. Set the type with the type attribute.
• <label>: a text label for a form field.
• <button>: a clickable button, such as Submit or Login.
• <select> and <textarea>: dropdown menus and multi-line text fields.

<form>
  <label for="email">Email</label>
  <input type="email" id="email">
  <button type="submit">Send</button>
</form>

8. Media Tags

• <audio>: embeds sound files.
• <video>: embeds video files.
• <source>: provides alternate file formats for audio, video or pictures.
• <iframe>: embeds another web page, such as a YouTube video.

9. Semantic Tags

Semantic tags describe the meaning of content, which helps search engines, screen readers and other developers. Besides the structural tags above, common semantic tags include <time>, <address>, <blockquote>, <figure> and <figcaption>.

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Sales growth in 2026</figcaption>
</figure>

10. Generic Container Tags

When no semantic tag fits, use <div> (block-level container) or <span> (inline container).

HTML Attributes (Not Tags)

Attributes are extra information added inside the opening tag. They are not tags themselves. An attribute has a name and a value.

• alt: alternative text for an image.
• src: the source location (URL) of an image, video or script.
• href: the destination of a link.
• class and id: used to select and style elements with CSS or JavaScript.

<img src="photo.jpg" alt="A cat on a sofa" class="rounded">

Meta Tags (Tags Inside <head>)

Meta tags give information about the page to browsers and search engines. Two commonly used ones for SEO:

<title>Types of Tags in HTML</title>
<meta name="description" content="A short summary of the page.">

Good meta tags help search engines understand your page. If you need help with this, see our SEO services in Pakistan.

Obsolete Tags to Avoid

Some old tags are no longer part of modern HTML, such as <font>, <center> and <marquee>. Use CSS for styling instead.

10 Common HTML Tags with Examples

FAQs

What are the 2 types of tags in HTML?
Paired tags (opening and closing tag) and empty tags (a single tag with no closing tag).

How many types of tags are there in HTML?
There is no fixed number. HTML has more than 100 elements, usually grouped into categories such as structural, text, list, link, image, table, form, media and semantic tags.

Can tags contain other tags?
Yes. This is called nesting. The inner tag must be closed before the outer tag.

What is the difference between a tag and an element?
A tag marks the start or end of an element in the code. An element includes the opening tag, content and closing tag.

Which tag is used for a line break?
<br>. For a horizontal line, use <hr>.

Which tags are used for lists?
<ul> and <ol> with <li>, and <dl> for description lists.

Is   an HTML tag?
No. It is a character entity that inserts a non-breaking space.

Conclusion

These are the most common tags. HTML has many more, and you can find the complete list in the MDN HTML elements reference. Prefer to build a website without writing every tag by hand? Our WordPress services can help, and you can learn step by step through our courses.

By Sparkify Solutions