Elements #

Tags are case-insensitive, but it is recommended to use lowercase.

Normal Elements #

<Opening Tag>Nested Content</Closing Tag>

Normal elements can have nested elements and text nodes.

The Nested Content sets the default value.
<textarea>Default</textarea>

Void Elements #

<Tag />

The trailing slash is not required, but it makes XHTML-compatible and more readable.

Void elements cannot have nested elements and text nodes.

The value attribute sets the default value.
<input value="Default" />

  • <meta>
  • <link>
  • <img>
  • <input>
  • <hr>
  • <br>

Content Categories #

  • <!doctype html>
  • <html>
  • <head>
    • <meta>
    • <title>

    • <link>

      External CSS, Favicon

    • <style>

      Internal CSS

    • <script> <noscript>

      Can be nested in the <body> element.

  • <body>
    • <header>
    • <main>
    • <footer>
    • <aside>
    • <nav>

    • <article>

      Independent Content

    • <section>

      Semantic Block Grouping

    • <div>

      Non-Semantic Block Grouping

    • <span>

      Non-Semantic Inline Grouping

    • ▶
      <dialog>

      Creates a modal or non-modal dialog.

      The closedby attribute controls how a dialog can be dismissed.
      The closedby="any" attribute closes a dialog by a light dismiss user action (e.g., clicking the backdrop), a platform-specific user action (e.g., pressing the ESC key), or a developer-specified mechanism.
      The closedby="closerequest" attribute closes a dialog by a platform-specific user action or a developer-specified mechanism. This option is the default for modal dialogs.
      The closedby="none" attribute closes a dialog by a developer-specified mechanism. This option is the default for non-modal dialogs.

      The open attribute is a boolean attribute that determines whether a dialog is currently displayed. Directly manipulating this attribute inHTML is not recommended. Instead, use JavaScript methods HTMLDialogElement.show(), HTMLDialogElement.showModal(), and HTMLDialogElement.close() for better control.

    • ▶
      <form>

      The action attribute defines a URL to which form data will be submitted. After submission, the current URL will be updated to the defined URL.

      The method="get" sends form data as a query string after the existing URL.

    • <fieldset> <legend>
    • <label>
    • <input>
    • <button>
    • <datalist> <select> <optgroup> <option>
    • <textarea>
    • <output>
    • ▶
      <table>
      • <caption>
        Must be the first child of its parent <table> element.
      • <colgroup>
        Column Group
        The span attribute can be used when the <colgroup> has no <col> elements.
      • <col>
        Column
        The span attribute can be used when its parent <colgroup> element does not have the span attribute.
      • <thead>
        Table Head
      • <tbody>
        Table Body
      • <tfoot>
        Table Foot
        • <tr>
          Table Row
          • <th>
            Table Header
            Attributes: scope headers rowspan colspan aria-sort
          • <td>
            Table Data
            Attributes: headers rowspan colspan
    • <hgroup>
    • <h1>~<h6>
    • <p>

    • <strong> <b>

      Bold

    • <em> <i>

      Italic

    • <s>

      Strikethrough

    • <mark>

      Highlight

    • <del> <ins>

      Delete and Insert

    • <small>

    • <var> <sub> <sup>

      Variable

    • <kbd>

      Keyboard

    • <samp>

      Program Sample Output

    • <pre> <code>
    • <bdo> <bdi>
    • <hr> <br>
    • <ul> <ol> <li>
    • <dl> <dt> <dd>
    • <details> <summary>
    • <data> <time>
    • <a>
    • <figure> <figcaption>
    • <img> <map> <area>
    • <picture> <source>
    • <video> <source>
    • <audio> <source>
    • <iframe>