1. Document Metadata

  • <!DOCTYPE>: Declares the document type and version of HTML.
  • <html>: The root element of an HTML document.
  • <head>: Contains meta-information about the document.
  • <title>: Sets the title of the document (shown in the browser tab).
  • <meta>: Provides metadata such as character set, viewport settings, etc.
  • <link>: Specifies relationships between the current document and external resources (like stylesheets).
  • <style>: Contains CSS styles for the document.
  • <script>: Defines a client-side script (JavaScript).

2. Content Sectioning

  • <body>: Contains the content of the document.
  • <header>: Represents introductory content, typically contains headings and navigation.
  • <footer>: Represents footer content, usually contains metadata or links.
  • <nav>: Defines a set of navigation links.
  • <section>: Represents a thematic grouping of content.
  • <article>: Represents an independent piece of content, like a blog post.
  • <aside>: Represents content related to the main content, often as a sidebar.
  • <h1> to <h6>: Define headings, with <h1> being the highest level.
  • <hgroup>: Groups a set of <h1> to <h6> headings.

3. Text Content

  • <p>: Defines a paragraph.
  • <hr>: Creates a thematic break (horizontal rule).
  • <pre>: Displays preformatted text, preserving whitespace.
  • <blockquote>: Represents a section that is quoted from another source.
  • <ol>: Defines an ordered list (numbered).
  • <ul>: Defines an unordered list (bulleted).
  • <li>: Defines a list item.
  • <dl>: Defines a description list.
  • <dt>: Defines a term in a description list.
  • <dd>: Defines a description of the term in a description list.
  • <figure>: Represents self-contained content, like an image with a caption.
  • <figcaption>: Provides a caption for a <figure> element.
  • <div>: A generic container for flow content.

4. Inline Text Semantics

  • <a>: Defines a hyperlink.
  • <b>: Represents text with strong importance (bold).
  • <i>: Represents text in an alternate voice or mood (italic).
  • <strong>: Indicates strong importance (bold).
  • <em>: Indicates emphasis (italic).
  • <small>: Represents side comments or smaller text.
  • <s>: Represents content that is no longer accurate or relevant (strikethrough).
  • <cite>: Represents the title of a work.
  • <q>: Defines a short inline quotation.
  • <dfn>: Represents the defining instance of a term.
  • <abbr>: Represents an abbreviation or acronym.
  • <data>: Links content with a machine-readable translation.
  • <time>: Represents a specific time or range of time.
  • <code>: Represents computer code.
  • <var>: Represents a variable in a mathematical expression.
  • **<samp>: Represents sample output from a program.
  • **<kbd>: Represents user input.
  • **<sub>: Renders text as subscript.
  • **<sup>: Renders text as superscript.
  • <span>: A generic inline container.
  • <br>: Inserts a line break.
  • <wbr>: Suggests an optional line break.
  • **<ins>: Represents inserted text.
  • **<del>: Represents deleted text.
  • **<mark>: Represents highlighted text.
  • **<ruby>: Represents ruby annotations.
  • **<rt>: Represents the text of a ruby annotation.
  • **<rp>: Provides parentheses for browsers that do not support ruby annotations.
  • **<bdi>: Isolates a portion of text that might be formatted in a different direction from the surrounding text.
  • **<bdo>: Overrides the current text direction.

5. Embedded Content

  • <img>: Embeds an image.
  • <audio>: Embeds sound content.
  • <video>: Embeds video content.
  • <source>: Specifies multiple media resources for <audio> and <video>.
  • <track>: Provides text tracks for <video> and <audio> elements.
  • <embed>: Embeds external content (e.g., Flash).
  • <object>: Embeds multimedia content.
  • <param>: Defines parameters for an <object> element.
  • <canvas>: Provides a space for drawing graphics on the fly via JavaScript.
  • <map>: Defines an image map.
  • <area>: Defines clickable areas within an image map.
  • <picture>: Contains one or more <source> elements for responsive images.

6. Form Elements

  • <form>: Defines a form for user input.
  • <input>: Defines an input field.
  • <textarea>: Defines a multi-line text input.
  • <button>: Defines a clickable button.
  • <select>: Defines a dropdown list.
  • <optgroup>: Groups related options in a dropdown list.
  • <option>: Defines an option in a dropdown list.
  • <label>: Defines a label for an <input> element.
  • <fieldset>: Groups related elements in a form.
  • <legend>: Defines a caption for a <fieldset>.
  • <datalist>: Provides a set of predefined options for <input>.
  • <output>: Represents the result of a calculation or user action.
  • <progress>: Represents the progress of a task.
  • <meter>: Represents a scalar measurement within a known range.

7. Tabular Data

  • <table>: Defines a table.
  • <caption>: Defines a table caption.
  • <thead>: Groups the header content in a table.
  • <tbody>: Groups the body content in a table.
  • <tfoot>: Groups the footer content in 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.
  • <col>: Specifies column properties for one or more columns in a table.
  • <colgroup>: Groups columns for styling.

8. Scripting

  • <script>: Defines a client-side script (JavaScript).
  • <noscript>: Defines an alternative content for users that have disabled scripts.
  • <template>: Holds HTML that can be cloned and rendered at runtime.
  • <slot>: A placeholder for content that can be replaced.

9. Interactive Elements

  • <details>: Represents a disclosure widget from which the user can obtain additional information.
  • <summary>: Represents a summary or legend for a <details> element.
  • <dialog>: Represents a dialog box or other interactive component.

10. Miscellaneous

  • <style>: Defines CSS styles.
  • <link>: Defines the relationship between the current document and an external resource (like a stylesheet).
  • <meta>: Provides metadata about the HTML document.