banner

HTML Tags List A–Z with Examples

Know HTML Tags A–Z list, covering essential elements from structural anchors to modern multimedia tags. Learn the correct syntax and practical examples for every major HTML tag to build well-structured, SEO-friendly web pages efficiently.
authorImageVarun Saharawat28 May, 2026
HTML Tags List A–Z with Examples

Building a website often feels like piecing together a complex puzzle where every element must fit perfectly. For many students, the challenge lies in remembering the wide variety of elements required to structure content correctly. 

This HTML Tags A–Z article solves that problem by providing a clear, organised reference. Whether you are creating a simple blog or a complex web application, knowing which tag to use is vital for clean code and better search rankings. 

What are HTML Tags?

To build any webpage, you need to understand the fundamental building blocks. HTML tags are the hidden instructions that tell a browser how to display text, images, and links. Using proper HTML tags, an A-to-Z list ensures that your website is accessible and easy for search engines to crawl.

The following table highlights some of the most frequently used tags in modern web development, categorised for quick reference.

Tag

Description

Use Case

<a>

Defines a hyperlink

Linking to other pages

<body>

Contains the visible page content

Main structure of the document

<div>

Defines a division or section

Grouping elements for styling

<img>

Embeds an image

Adding visual content

<p>

Defines a paragraph

Text blocks and descriptions

HTML Tags List From A-Z

Understanding the full scope of available elements helps you write more semantic code. Below is an exhaustive HTML tags A to Z guide to help you navigate through the different functionalities provided by HTML5.

A to D: Structural and Link Tags

These tags form the basic foundation of your document, handling everything from links to metadata.

  • <a>: The anchor tag creates hyperlinks.

  • Example: <a href="[https://example.com](https://example.com)">Visit Site</a>

  • <article>: Represents a self-contained composition in a document, such as a blog post.

  • <aside>: Defines content aside from the main page content, often used for sidebars.

  • <audio>: Used to embed sound content like music or podcasts.

  • <b>: Specifies bold text without implying extra importance.

  • <base>: Specifies the base URL for all relative URLs in a document.

  • <body>: This is the container for all visible content on the page.

  • <br>: Produces a line break in text.

  • <button>: Defines a clickable button, often used in forms.

  • <canvas>: Used to draw graphics via scripting (usually JavaScript).

  • <caption>: Defines a table caption for better accessibility.

  • <code>: Displays a fragment of computer code.

  • <col>: Specifies column properties for each column within a <colgroup> element.

E to L: Formatting and List Tags

This section of the HTML tags A to Z reference focuses on how content is displayed and grouped.

  • <em>: Defines emphasized text, usually displayed in italics.

  • <embed>: Defines a container for an external application or interactive content.

  • <fieldset>: Groups related elements in a form for better organization.

  • <figcaption>: Defines a caption for a <figure> element.

  • <figure>: Specifies self-contained content, like illustrations or photos.

  • <footer>: Defines a footer for a document or section.

  • <form>: Creates an HTML form for user input.

  • <h1> to <h6>: Defines HTML headings, where <h1> is the most important.

  • <head>: Contains machine-readable information (metadata) about the document.

  • <header>: Defines a header for a document or a section.

  • <hr>: Represents a thematic break between paragraph-level elements.

  • <HTML>: The root element of an HTML page.

  • <i>: Defines a part of text in an alternate voice or mood.

  • <iframe>: Used to embed another document within the current HTML document.

  • <img>: Embeds an image in the page.

  • Example: <img src="logo.jpg" alt="Company Logo">

  • <input>: Defines an input control within a form.

  • <li>: Defines a list item within an ordered or unordered list.

HTML Tag Examples

Seeing tags in action is the best way to learn their application. When looking for HTML tags A to Z examples, it is important to notice how tags wrap around content to change its behaviour.

Working with Forms and Input

Forms are essential for interaction. The following tags allow users to enter data and submit it to a server.

  • <label>: Defines a label for an <input> element, improving accessibility.

  • <legend>: Defines a caption for a <fieldset> element.

  • <main>: Specifies the main content of a document.

  • <map>: Defines a client-side image map.

  • <mark>: Defines marked or highlighted text.

  • <meta>: Provides metadata about the HTML document.

  • <nav>: Defines a set of navigation links.

  • <noscript>: Defines alternate content for users who have disabled scripts in their browser.

  • <ol>: Defines an ordered list (numbered).

  • <optgroup>: Groups related options in a drop-down list.

  • <option>: Defines an option in a drop-down list.

Sectioning and Media Elements

These tags help in dividing the page into logical parts, making it easier for users to navigate.

  • <p>: The paragraph tag is used for blocks of text.

  • <picture>: Provides a container for multiple image sources to support responsive design.

  • <pre>: Defines preformatted text, preserving spaces and line breaks.

  • <progress>: Represents the completion progress of a task.

  • <q>: Defines a short inline quotation.

  • <script>: Used to embed or reference executable code, typically JavaScript.

  • <section>: Defines a section in a document.

  • <select>: Creates a drop-down list for users.

  • <small>: Defines smaller text, often for side comments or legal text.

  • <span>: An inline container used to mark up a part of a text or a document.

Advanced HTML Tags

For those seeking an HTML tags A to Z tutorial, mastering the semantic tags introduced in HTML5 is a priority. These tags describe their meaning to both the browser and the developer.

  • <strong>: Defines important text, typically rendered in bold.

  • <style>: Contains styling information (CSS) for a document.

  • <sub>: Defines subscripted text.

  • <sup>: Defines superscripted text.

  • <table>: Defines a table for displaying data in rows and columns.

  • <tbody>: Groups the body content in a table.

  • <td>: Defines a standard cell in an HTML table.

  • <textarea>: Defines a multi-line text input control.

  • <tfoot>: Groups the footer content in a table.

  • <th>: Defines a header cell in a table.

  • <thead>: Groups the header content in a table.

  • <time>: Defines a specific time or a date.

  • <title>: Defines a title for the document, shown in the browser tab.

  • <tr>: Defines a row in an HTML table.

  • <u>: Defines text that should be stylistically different from normal text.

  • <ul>: Defines an unordered list (bulleted).

  • <video>: Used to embed video content.

  • <wbr>: Defines a possible line-break point.

HTML Tag Syntax and Usage 

Correct syntax is the difference between a functional site and a broken one. When using these HTML tags A to Z with syntax guide, remember that most tags require both an opening and a closing tag.

Here is a quick look at common syntax patterns for various elements:

  • Void Tags: These do not require a closing tag. Examples include <img>, <br>, and <hr>.

  • Container Tags: These wrap around content. Example: <p>Your text here</p>.

  • Attribute Placement: Attributes always go in the opening tag. Example: <a href="link">.

Using a proper HTML tags A to Z PDF or reference sheet can help you keep these rules in mind while coding. Consistency in your tag usage leads to better performance and fewer bugs.

FAQs

What are the most important HTML tags for beginners?

Tags like HTML, head, body, a, img, and p are essential as they form the core structure and content of almost every webpage.

Are HTML tags case-sensitive?

No, HTML tags are not case-sensitive, so P is the same as p, though lowercase is the standard practice in modern development.

What is the difference between a block-level and an inline tag?

Block-level tags like
and a> only take up necessary space.

How do self-closing tags work?

Self-closing or void tags, such as , do not contain text content and therefore do not require a separate closing tag.

Why should I use semantic HTML tags?

Semantic tags like article> and nav> help search engines and screen readers understand the structure and importance of your content.
Popup Close ImagePopup Open Image
Talk to a counsellorHave doubts? Our support team will be happy to assist you!
Popup Image
Join 15 Million students on the app today!
Point IconLive & recorded classes available at ease
Point IconDashboard for progress tracking
Point IconLakhs of practice questions
Download ButtonDownload Button
Banner Image
Banner Image