HTML Tags Cheatsheet Complete Reference guide. The article provides HTML tags, descriptions, and the most common usages.
HTML is the foundation of web development, providing a standardized language for structuring and presenting content on the internet.
HTML tags are the building blocks of a web page, allowing developers to define the layout, style, and functionality of their websites.
As a result, understanding HTML tags is essential for anyone looking to create or modify web content.
This article serves as a complete reference guide to HTML tags, providing detailed descriptions and examples of each tag’s usage.
Through this complete reference cheatsheet, you will have a thorough understanding of HTML tags and how to use them to create web pages that are both visually appealing and functional.
Basics of HTML
- An HTML document is made up of a series of elements, each of which is defined by a pair of opening and closing tags.
- The opening tag contains the name of the element, while the closing tag contains the same name preceded by a forward slash (/).
- The content of an element is placed between the opening and closing tags.
In the following sections, we will provide a comprehensive guide to the most commonly used HTML tags, organized by category.
By the end of this guide, you will have a complete understanding of HTML tags and be able to create web pages that are both visually appealing and functional.
HTML Complete Tag Reference Guide
| Tag | Description | Usage |
| <html> | The root element that contains all other elements on a web page | Used at the beginning and end of an HTML document |
| <head> | Contains meta information about the document such as title, stylesheets, and scripts | Used within the <html> element |
| <title> | Sets the title of the document, which appears in the browser tab | Used within the <head> element |
| <body> | Contains the visible content of the web page | Used within the <html> element |
| <div> | Creates a container that can be styled with CSS | Used within an <form> element to create text boxes, checkboxes, radio buttons, and other input fields |
| <p> | Defines a paragraph of text | Used to separate blocks of text and add spacing |
| <a> | Defines a hyperlink that links to another document or web page | Used to create clickable links |
| <img> | Displays an image on the web page | Used to add visual elements to a web page |
| <ul> | Creates an unordered list | Used to list items without any specific order |
| <ol> | Creates an ordered list | Used to list items in a specific order |
| <li> | Defines an item in a list | Used within <ul> or <ol> elements |
| <table> | Creates a table with rows and columns | Used to display tabular data |
| <tr> | Defines a row in a table | Used within the <table> element |
| <th> | Defines a header cell in a table | Used within a <tr> element to create column headers |
| <td> | Defines a standard cell in a table | Used within a <tr> element to create data cells |
| <form> | Creates a form for user input | Used to create forms that allow users to enter and submit data |
| <input> | Defines an input field where users can enter data | Used within an <select> element to create options that users can choose from |
| <label> | Associates a label with an input element | Used to provide a name or description for an input field |
| <select> | Creates a drop-down list | Used to allow users to select from a list of options |
| <option> | Defines an option in a drop-down list | Used to provide a caption for an <figure> element |
| <button> | Creates a clickable button | Used to add interactive buttons to a web page |
| <span> | Defines a small inline container that can be styled with CSS | Used to group and style text or other inline elements |
| <h1> to <h6> | Defines different levels of headings | Used to create headings and subheadings on a web page |
| <br> | Inserts a line break | Used to create a new line without creating a new paragraph |
| <hr> | Inserts a horizontal line | Used to create a horizontal divider |
| <meta> | Provides metadata about the document | Used within the <head> element to provide information about the document such as author, description, and keywords |
| <nav> | Defines a section for navigation links | Used to create a navigation menu |
| <header> | Defines the top part of a web page, typically containing the page’s title, logo, and navigation | Used to create a header section. Used to provide a heading or other introductory content at the top of a web page or section |
| <section> | Defines a section of a web page | Used to group related content |
| <article> | Defines an independent, self-contained block of content | Used to separate articles or blog posts from one another. Used to denote an independent piece of content within a document, such as a blog post or news article |
| <aside> | Defines content that is tangentially related to the main content of the web page | Used to create a sidebar or other supplementary content |
| <main> | Defines the main content of the web page | Used to group the primary content of a web page |
| <blockquote> | Defines a long quotation | Used to quote text from another source |
| <cite> | Defines the title of a work, such as a book or article, that is being cited | Used within a <blockquote> element to provide attribution |
| <code> | Defines a piece of computer code | Used to display code snippets |
| <em> | Defines emphasized text | Used to add emphasis to text |
| <strong> | Defines strongly emphasized text | Used to add stronger emphasis to text |
| <sup> | Defines superscript text | Used to display text as a superscript |
| <sub> | Defines subscript text | Used to display text as a subscript |
| <hr> | Inserts a horizontal line | Used to create a horizontal divider |
| <iframe> | Inserts a frame for embedding another web page or media content. Defines an inline frame for embedding external content into a web page | Used to embed content from another source within a web page |
| <audio> | Inserts an audio file | Used to embed audio files within a web page |
| <video> | Inserts a video file | Used to embed video files within a web page |
| <source> | Specifies a source for media files. Defines the source URL and media type for a media element, such as an <audio> or <video> element | Used within <audio> or <video> elements to provide multiple formats for media files |
| <canvas> | Creates an area where you can draw graphics and animations | Used to create dynamic, interactive graphics |
| <svg> | Creates scalable vector graphics | Used to create graphics that can be scaled without losing quality |
| <datalist> | Defines a list of options for an input field | Used to provide a list of options for an <input> element |
| <meter> | Defines a measurement within a range | Used to display a measurement, such as progress or value, within a specified range |
| <progress> | Defines the progress of a task | Used to display the progress of a task, such as a file upload or download |
| <time> | Defines a date or time | Used to display dates and times |
| <abbr> | Defines an abbreviation or acronym | Used to display a short form of a longer word or phrase |
| <address> | Defines contact information for the author or owner of a web page | Used to display contact information, such as a mailing address |
| <bdi> | Defines text that should be isolated from the surrounding text | Used to display text that should be rendered in a separate, isolated context |
| <bdo> | Defines the direction of text display | Used to change the direction of text display, such as from left-to-right to right-to-left |
| <details> | Defines additional details that can be shown or hidden | Used to create an expandable section of content |
| <dialog> | Defines a dialog box or window | Used to create a dialog box or window that displays additional information or requires user input |
| <figure> | Defines a figure or illustration. Defines self-contained content, such as images, diagrams, or code snippets | Used to group images or other graphical elements with captions |
| <figcaption> | Defines a caption for a <figure> element | Defines a caption for an <figure> element |
| <mark> | Defines highlighted text | Used to highlight text |
| <output> | Defines the result of a calculation or user input | Used to display the output of a calculation or user input |
| <picture> | Defines a container for multiple image sources | Used to provide multiple versions of an image for different screen sizes |
| <q> | Defines a short quotation | Used to quote text within a paragraph |
| <samp> | Defines a sample output from a computer program | Used to display sample output from a computer program |
| <summary> | Defines a visible heading for a <details> element | Used to provide a heading for an expandable section of content |
| <var> | Defines a variable or placeholder in a mathematical expression or programming context | Used to display variables or placeholders in mathematical or programming contexts |
| <area> | Defines a clickable area inside an image map | Used to define clickable regions within an image map |
| <base> | Defines the base URL and target for all links on a page | Used to specify the base URL and target for all links on a page |
| <bdi> | Defines text that should be isolated from its surrounding text for bidirectional text formatting | Used to format text in a way that is correct for different writing systems |
| <bdo> | Defines the directionality of text | Used to override the default text direction of a document |
| <data> | Defines machine-readable data within an HTML document | Used to provide machine-readable data within an HTML document |
| <dialog> | Defines a dialog box or window | Used to display a dialog box or window on a web page |
| <embed> | Defines a container for an external application or interactive content | Used to embed content such as videos, games, and other multimedia on a web page |
| <fieldset> | Defines a group of related form elements | Used to group related form elements together |
| <footer> | Defines a footer for a document or section | Used to provide information such as authorship, copyright, or contact details at the bottom of a web page or section |
| <legend> | Defines a caption for a <fieldset> element | Used to provide a caption or title for a group of related form elements |
| <optgroup> | Defines a group of options within a <select> element | Used to group together related options within a drop-down list |
| <output> | Defines the result of a calculation or user input | Used to display the output of a calculation or user input |
| <track> | Defines text tracks for media elements, such as <audio> and <video> elements | Used to specify captions, subtitles, or other text tracks for a media element |
| <var> | Defines a variable or placeholder text | Used to denote a variable or placeholder text within a document |
| <wbr> | Defines a word break opportunity | Used to specify a point in text where a word break can occur if needed |
| <template> | Defines a reusable content template | Used to define a reusable content template that can be instantiated multiple times |
| <slot> | Defines a placeholder for external content in a web component | Used to define a placeholder for external content within a web component |
| <picture> | Defines a container for multiple image sources | Used to provide multiple sources for an image to ensure optimal display on different devices and screen sizes |
| <summary> | Defines a summary for a <details> element | Used to provide a summary or title for a <details> element |
| <datalist> | Defines a list of predefined options for an input control | Used to provide a list of predefined options for an input control |
| <keygen> | Defines a key pair generator field for forms | Used to generate a public-private key pair for use in form submission |
| <menu> | Defines a list or menu of commands | Used to create a list or menu of commands or actions |
| <mark> | Defines highlighted text | Used to highlight or mark text within a document |
| <ruby> | Defines a ruby annotation, which provides additional information or pronunciation for East Asian text | Used to provide additional information or pronunciation for East Asian text |
| <rp> | Defines what to show in browsers that do not support ruby annotations | Used to provide fallback content for browsers that do not support ruby annotations |
| <rt> | Defines the pronunciation of characters in a ruby annotation | Used to provide the pronunciation of characters within a ruby annotation |
That’s the complete exhaustive list of HTML tags for your reference.