Complete List of Essential HTML5 Tags Every Developer Should Know

Last updated 1 month, 1 week ago · 6 min read
This article will list most HTML5 elements and what you can use them for in your HTML5 document.

Before we list them let's define what HTML is.
HTML (Hypertext Markup Language) forms the foundation of web development, defining the structure and content of web pages. This means that all the web pages you view on a browser are structured by HTML, including this website.
Over the years HTML has advanced starting from its first version HTML1 HTML2, HTML3, HTML4, and now HTML5.
HTML5 has brought many new elements and features, and in this article, we will highlight and explore most of these important elements.

Here's a comprehensive list of HTML elements:

  • <html>: Defines the root of an HTML document.
  • <head>: Contains metadata and other information about the document.
  • <title>: Defines the title of the document.
  • <body>: Contains the content of the document.
  • <header>: Represents introductory content at the beginning of a document or section.
  • <footer>: Represents footer content at the end of a document or section.
  • <nav>: Represents a section of navigation links.
  • <article>: Represents an independent piece of content.
  • <section>: Represents a generic section of content.
  • <aside>: Represents content aside from the content it is placed in.
  • <main>: Represents the main content of the document.
  • <figure>: Represents self-contained content, such as images, diagrams, or code snippets.
  • <figcaption>: Represents a caption or legend for the content of a <figure> element.
  • <p>: Represents a paragraph.
  • <div>: Represents a generic container for other elements.
  • <span>: Represents a section in a document for styling purposes.
  • <strong>: Represents strong importance, typically displayed in bold.
  • <em>: Represents emphasized text, typically displayed in italics.
  • <blockquote>: Defines a section that is quoted from another source.
  • <cite>: Defines the title of a work.
  • <q>: Defines a short inline quotation.
  • <abbr>: Defines an abbreviation or acronym.
  • <address>: Defines contact information for the author or owner of a document.
  • <time>: Defines a specific time or a duration.
  • <code>: Defines a piece of computer code.
  • <kbd>: Defines keyboard input.
  • <mark>: Defines marked or highlighted text.
  • <sub>: Defines subscript text.
  • <sup>: Defines superscript text.
  • <hr>: Defines a thematic break or horizontal rule.
  • <a>: Defines a hyperlink.
  • <img>: Defines an image.
  • <video>: Defines a video.
  • <audio>: Defines audio content.
  • <ul>: Defines an unordered list.
  • <ol>: Defines an ordered list.
  • <li>: Defines a list item.
  • <dl>: Defines a description list.
  • <dt>: Defines a term/name in a description list.
  • <dd>: Defines a description of the term/name in a description list.
  • <table>: Defines a table.
  • <thead>: Defines the header of a table.
  • <tbody>: Defines the body content of a table.
  • <tfoot>: Defines the footer content of a table.
  • <tr>: Defines a row in a table.
  • <th>: Defines a header cell in a table.
  • <td>: Defines a standard cell in a table.
  • <form>: Defines an HTML form for user input.
  • <button>: Defines a clickable button.
  • <figure>: Represents self-contained content, such as images, diagrams, or code snippets.
  • <figcaption>: Represents a caption or legend for the content of a <figure> element.
  • <time>: Represents a specific time or a duration.
  • <video>: Defines a video.
  • <audio>: Defines audio content.
  • <canvas>: Represents a region that can be used to draw graphics on the fly via scripting.
  • <progress>: Represents the completion progress of a task.
  • <meter>: Represents a scalar measurement within a known range.
  • <details>: Represents a disclosure widget from which the user can obtain additional information or controls.
  • <summary>: Represents a summary, caption, or legend for the content of a <details> element.
  • <datalist>: Represents a set of predefined options for other controls.
  • <dialog>: Represents a dialog box or other interactive component.
  • <template>: Represents a fragment of HTML that can be cloned and inserted in the document by script.
  • <script>: Is used to add inline script into a web page.
  • <style>: Is used to add inline styling to a web page.
  • Complete List of Essential HTML5 Tags Every Developer Should Know

    In HTML, most elements have both opening and closing tags. However, some elements do not follow this rule.
    These are known as void elements.
    Void HTML elements are self-closing, meaning they do not have closing tags and cannot contain any content or child elements.    
    Here is a list of HTML void elements:

         
    1. <input>: Defines an input control. Input control has the type attribute which will define the type of input it will accept, Ex: type="text", accepts text input, type="email" accepts email input, type="password", accepts password, etc.
    2.    
    3. <br>: This element is used to break to a new line.
    4.    
    5. <hr>: Is used to create a horizontal line.
    6.    
    7. <meta>: Defines the title of the document.
    8.    
    9. <link>: Contains the content of the document.
    10.    
    11. <area>: Defines clickable areas in image maps.
    12.    
    13. <col>: Defines styles for table columns.
    14.    
    15. <embed>: Embeds external content (e.g., videos, plugins).
    16.    
    17. <img>: Used to embed an image content into a webpage.
    18.    
    19. <input>: Creates input fields for forms, commonly used within the <form> element. It includes a special attribute, type, with values such as type="text", type="email", type="tel", etc., allowing the input fields to have different formats and functionalities.
    20.    
    21. <source>: Specifies alternative resources for media elements.
    22.    
    23. <track>: Adds subtitles or captions for media content.
    24.    
    25. <wbr>: Suggests line break opportunities for long words/URLs.

    In conclusion, HTML tags serve as the foundation of web development,
    defining the structure and content of web pages. Void elements, such as <img> (for embedding images) and
    (for line breaks), are self-closing and fulfill specific roles without requiring closing tags.
    Meanwhile, non-void elements, like <p> (for paragraphs), <div> (for containers), and <h1> to <h6> (for headings), utilize both opening and closing tags to encapsulate content and add meaning or organization to a webpage.      

    To master HTML, it's essential to delve deeper into each element. Select a specific tag, study its documentation across multiple resources,
    and experiment with it practically to gain a comprehensive understanding of how it works in various contexts.        
    With that, we bid you farewell for now. Be sure to explore the articles below to continue expanding your knowledge.

    More Articles

    The Importance of Domain Extensions: .com Vs .net Vs .org Vs .ng

    .org, .com and .net Choosing the right domain extensions

    2 days, 5 hours ago · 6 min read
    How to Become a Full Stack Developer: Essential Skills You Need

    Skills to Become a Full Stack Developer in 2025

    5 days, 6 hours ago · 11 min read
    Choosing the Right Database for Your Business Website

    How to Choose the right Database for Your Business Website

    5 days, 6 hours ago · 6 min read
    Common Programming Mistakes and How to Avoid Them

    Avoiding common programming mistakes: best practices for quality code

    1 week, 6 days ago · 16 min read
    A Comprehensive Guide to Domain Parking and Leveraging It for Passive Income

    What is Domain parking and how to earn money from it ?

    1 week, 6 days ago · 8 min read
    How to Set Up Django with PostgreSQL, Nginx, and Gunicorn on Ubuntu VPS Server

    How to Set Up Django with PostgreSQL, Nginx, and Gunicorn on Ubuntu VPS Server

    2 weeks, 4 days ago · 10 min read
    Essential Elements for Building an SEO-Friendly Website

    Steps to Building an SEO-Friendly Website

    3 weeks, 2 days ago · 7 min read
    The Ultimate guide to building a stunning website: a step by step guide

    How to build a stunning website (A step by step guide)

    3 weeks, 2 days ago · 12 min read
    A Comprehensive Guide to Database Normalization

    What is Database Normalization ?

    1 month, 1 week ago · 6 min read
    How to debug a code: A comprehensive guide for beginners

    What is debugging? How to debug a code for beginners

    1 month, 1 week ago · 8 min read