Understanding the full spectrum of HTML tags is helpful for more than just expanding your technical knowledge—it’s foundational for ensuring a good user experience, improving accessibility, and achieving positive SEO results.
By the end of this article, you’ll have a thorough understanding of HTML tags that you can use across your website.
But let’s first cover the basics.
What Are HTML Tags?
HTML tags are the fundamental building blocks of webpages that tell web browsers how to display and format content.
For example, the tag below tells the browser to include a link to an article explaining SEO and place it over the text “search engine optimization (SEO).”
<a href="https://seme1.bdseotools.com/blog/what-is-seo/">search engine optimization (SEO)</a>Here’s what that link looks like on a live blog post:
In this example:
- “<a>” is the element, i.e., the fundamental building block that includes the tag itself and the content it encloses
- “href” is an attribute that specifies the link's destination
- “search engine optimization” is the content of the tag. In the case of a link like in this example it will be rendered as the anchor text.
HTML tags always have an element. They can have one or more attributes. Some, such as <a> elements, have content.
Most Common and Useful HTML Tags
Before diving into our ultimate HTML tags list, let’s get to know them alongside a few use cases.
The graphic below shows the most common and useful HTML tags as they can appear on three different page types:
- Homepage: Focused mainly on navigation and highlight key parts of the business
- Blog post: Focused on presenting a blog post in a clear, logical way
- Landing page: Focused on conveying benefits and converting users
You’ll see some tags that are used across all three but for different purposes (mentioned in parentheses). And you’ll see some tags that are specific to each page type.
So, the next time you’re about to publish a homepage, blog post, or landing page, review to see that all important tags are present on your page.
Semantic HTML Tags for Conveying Structure
The following table contains a set of semantic tags that describe the meaning of the content they enclose.
Use this semantic markup to improve accessibility and provide additional context for search engines.
| Tag | Description |
| <article> | Think of this tag as a container for a standalone piece of content (e.g. blog post or news story) that makes sense even if it's separated from the rest of the page |
| <aside> | Signifies content that’s tangentially related to the content around it and is often displayed as a sidebar |
| <figcaption> | Represents a caption or legend describing the content of a <figure> element |
| <figure> | Denotes self-contained content that’s referenced in the main part of the document. This could be an image, illustration, diagram, code snippet, etc. |
| <footer> | Designates the footer, which typically contains information about the author, copyright, legal notices, and related links |
| <header> | Indicates introductory content for a page or a section. It typically contains a logo, heading, and potentially navigation. |
| <main> | Represents the dominant content. There should be only one <main> element per page. |
| <nav> | Contains navigation links. It’s intended for major navigational sections. |
| <section> | Represents a thematic group of content, typically with a heading. It's a generic sectioning element that should be used when no more specific semantic element is appropriate. |
Basic Structure Tags for Establishing Overall Construction
The following basic structure tags are essential for establishing the fundamental framework of any HTML document.
| Tag | Description |
| <!DOCTYPE> | Declares the document type (for example HTML5) to ensure that modern web browsers render (i.e., display) the page as intended |
| <base> | Specifies the base URL for all relative URLs within the HTML document. This tag is useful when many links on a page share a common path. |
| <body> | Contains all the visible content in the HTML document. That includes text, images, links, and all other elements that users will see. |
| <html> | Represents the root element of an HTML document. It encapsulates all other HTML content on the page. |
| <head> | Contains metadata about the HTML document. This includes the document's title, character set, links to stylesheets, and other metadata used by browsers and search engines |
| <link> | Establishes a relationship between the current HTML document and an external resource. It’s most commonly used to link to external CSS stylesheets that control the visual presentation. |
| <meta> | Provides structured metadata about the HTML document, such as a brief summary of the page's content that may be used by search engines in search results snippets |
| <noscript> | Defines content to be displayed if users’ browsers don’t support scripting or if scripting is disabled. This ensures users without JavaScript rendering can still access basic content. |
| <style> | Contains CSS rules that are applied directly to the HTML document. Linking to external stylesheets is often preferred for larger projects and better organization. |
| <script> | Used to embed or reference executable scripts like JavaScript. Which adds interactivity and dynamic behavior to webpages. |
| <title> | Defines the title of the HTML document. This title appears in the browser tab and can show on search engine results pages (SERPs). It’s a ranking factor for Google Search. |
Content and Text Formatting Tags for Defining Overall Look
These content and text formatting tags establish the content's primary structure and style to make it easy to read and engage with.
| Tag | Description |
| <a> | Creates a hyperlink to other webpages, files, locations within the same page, or email addresses. The “href” attribute specifies the link's destination. |
| <br> | Inserts a single line break |
| <div> | Defines a division or section. It’s often used as a container to group other HTML elements for styling with CSS. |
| <em> | Represents emphasized text, typically displayed in italics |
| <h1> to <h6> | Define headings, with <h1> representing the most important heading and <h6> the least. These tags are crucial for creating a content hierarchy and signaling importance to users and search engines. |
| <hr> | Represents a thematic break in content, often displayed as a horizontal line |
| <img> | Embeds an image into the document. The “src” attribute specifies the path to the image, and the “alt” attribute provides alternative text that briefly describes the image. |
| <p> | Represents a paragraph of text. It’s used to separate blocks of text to improve readability. |
| <span> | An inline container used to mark up part of an HTML document. It’s often used to style specific portions of text with CSS. |
| <strong> | Creates strongly emphasized text, typically displayed in bold |
Image and Multimedia Tags for Incorporating Visual Elements
Use the image and multimedia tags in the following table to embed and manage visual and auditory content within a webpage.
| Tag | Description |
| <area> | Defines a clickable area within an image map |
| <audio> | Used to embed sound content in an HTML document. It can include attributes for controls (play, pause, volume, etc.), autoplay, and looping. |
| <img> | Embeds an image into the HTML document. The “src” attribute specifies the path to the image, and the “alt” attribute provides a brief description of the image. |
| <map> | Defines an image map, which is an image with clickable areas |
| <picture> | Provides a container for multiple <source> elements and one <img> element to offer different image versions for various display scenarios (e.g., for different screen sizes or resolutions) |
| <source> | Specifies multiple media resources for <audio>, <video>, or <picture> elements. This tag allows the browser to choose the first format it supports. |
| <track> | Specifies timed text tracks (subtitles, captions, descriptions, chapters, or metadata) for <video> or <audio> elements |
| <video> | Embeds a video player to display video content. Attributes can control playback, dimensions, and more. |
List Tags for Organizing Content
List tags are used to present information in a structured manner, which makes it easier for users to read and understand content.
| Tag | Description |
| <dd> | Describes a term within a description list (<dl>) |
| <dl> | Creates a description list, which is a list of terms and their corresponding descriptions |
| <dt> | Defines a term within a description list (<dl>) |
| <li> | Represents a list item within an ordered (<ol>) or unordered (<ul>) list |
| <ol> | Creates an ordered (numbered) list |
| <ul> | Creates an unordered (bulleted) list |
Table Tags for Presenting Data
Table tags can be used to structure and display data in a tabular format with rows and columns.
| Tag | Description |
| <caption> | Defines a title or caption for the table |
| <col> | Defines properties for each table column within a <colgroup> element. For example to make all text in a table’s first column bold and the text in the second column right-aligned. |
| <colgroup> | Specifies a group of one or more columns in a table for formatting. For example, setting a specific background color for all the cells in a particular column of a table using <col> within a <colgroup>. |
| <table> | Creates a table in an HTML document |
| <tbody> | Groups the body content in a table. Consider <tbody> as the main part of your table, containing the actual data rows. |
| <td> | Defines a standard data cell in a table row |
| <tfoot> | Groups the footer content in a table. Think of this tag as marking the bottom section of your table, often used for summaries or overall totals. |
| <th> | Defines a header cell in a table row. Typically used for the first row or column to indicate headings. |
| <thead> | Groups the header content in a table. Picture <thead> as the top section of your table, typically holding the column headings. |
| <tr> | Defines a row within a table |
Form Tags for Enabling User Interaction
Form tags are used to create interactive forms that allow users to input and submit data.
| Tag | Description |
| <button> | Defines a clickable button within a form or webpage |
| <datalist> | Offers a list of <option> tags as choices for input fields. This is often used for autocomplete functionality. |
| <fieldset> | Creates a visual grouping for related input fields within a form |
| <form> | Creates an HTML form that users complete |
| <input> | Creates a spot on a form where users can type things in or make choices. The tag’s "type" tells the browser what kind of input it is, like a text box, a password field, or a button. |
| <label> | Associates a label with an input element. For example, clicking on the text "Email Address" will focus the corresponding email input field. |
| <legend> | Represents a caption for the content of a <fieldset> element |
| <meter> | Shows a value on a scale, like a fuel gauge or how relevant a search result is |
| <optgroup> | Visually organizes related options within a drop-down list (<select>). Which makes it easier for users to navigate long lists, such as a drop-down for selecting a car with headings for different manufacturers. |
| <option> | Defines an item contained within a <select>, <optgroup>, or <datalist> element, representing a selectable option |
| <output> | A container element to display the results of a calculation or user action |
| <progress> | Displays an indicator showing progress toward completing a task |
| <select> | Defines a drop-down that allows you to select from a menu of options |
| <textarea> | Creates a multi-line form field that allows users to type longer messages |
Other Important HTML Tags
This table includes additional HTML tags that serve various purposes in web development and content structuring.
| Tag | Description |
| <abbr> | Represents an abbreviation or acronym. It often has a title attribute providing the full form. |
| <address> | Indicates contact information for a person or organization responsible for the document |
| <blockquote> | Indicates an extended quotation and is often rendered with indentation |
| <canvas> | Provides a container for drawing graphics and animations using JavaScript |
| <cite> | Used to mark up the title of a creative work (e.g., a book, movie, or song) |
| <code> | Displays its content as a short fragment of computer code |
| <del> | Represents text that has been deleted from a document |
| <details> | Creates a disclosure widget where information is visible only when toggled open |
| <dialog> | Represents a dialog box or other interactive component |
| <ins> | Represents text that has been inserted into a document |
| <kbd> | Represents user input from a keyboard, voice input, or other text entry device |
| <math> | The top-level element for MathML content that’s used to display mathematical formulas. MathML is a markup language allowing browsers to render equations and formulas on webpages. |
| <pre> | Represents preformatted text that’s displayed exactly as written in the HTML file to preserve whitespace and line breaks |
| <q> | Indicates a short inline quotation |
| <samp> | Used to enclose inline text representing sample output from a computer program |
| <slot> | A placeholder inside a web component that developers can fill with their own HTML. This makes the component highly adaptable and reusable across different contexts. |
| <small> | Represents side-comments and small print. Like copyright and legal text. |
| <sub> | Specifies inline text that should be displayed as subscript. You can use the <sub> tag to display chemical formulas like "H₂O" or mathematical subscripts like the "2" in "log₂x". |
| <summary> | Specifies a summary or caption for a <details> element's disclosure box |
| <sup> | Specifies inline text that should be displayed as superscript. Use the <sup> tag to display ordinal indicators like "st" in "1st", exponents like "2" in "x²", or footnote references within your text. |
| <svg> | Defines a container for embedding Scalable Vector Graphics (SVG)—an XML-based vector image format for two-dimensional graphics—directly into HTML documents |
| <template> | A mechanism for holding HTML that isn’t rendered immediately but can be instantiated later using JavaScript |
| <time> | Represents a specific period in time. You would use the tag to semantically mark up dates and times on your webpage, which makes it easier for search engines to understand them |
| <var> | Indicates text that represents a variable. Like for mathematical equations or within code examples. |
| <wbr> | Represents a word break opportunity that allows the browser to split a long word across multiple lines if needed to fit within its container |
How to Audit Your Pages’ HTML Tags
Here’s a step-by-step guide on how to check HTML tags using Google Chrome (the process is very similar in other popular browsers):
- Open the webpage you want to check in Google Chrome
- Right-click anywhere on the webpage and click “Inspect” from the menu. This will bring up Chrome’s Developer Tools with the “Elements” tab open.
- Press “Ctrl + F” (on Windows) or “Cmd + F” (on Mac) to open a search bar, then type the name of the tag (e.g., “<title>”) or attribute (e.g., class="item", id="main") you’re looking for. Be aware that the search might also highlight the search term within text content.
This method is helpful if you know what you’re looking for.
If you’re newer to HTML tags or just want to streamline your audit, try using Semrush’s Site Audit tool to make sure your basic HTML tags and attributes are set up correctly.
Follow the prompts to set up your project, and then open it to go to the “Overview” report.
Now, click on the “Issues” tab and type “tag”into the search box
You’ll then be able to see whether there are important HTML tags and attributes that need to be addressed on your site.
Click “Why and how to fix it” next to any issue reveals more about it and provides advice on how to address it.
Try Site Audit for free today.