Skip to main content

Elements

Cool HTML elements nobody uses - https://news.ycombinator.com/item?id=33068563 - https://tapajyoti-bose.medium.com/7-cool-html-elements-nobody-uses-436598d85668

Void elements don't need trailing slash (/>)​

We can write <meta charset="UTF-8"> instead of <meta charset="UTF-8" />.

https://stackoverflow.com/questions/7366344/do-we-still-need-forward-slashes-when-closing-void-elements-in-html5

Unfortunately Prettier does revert them, see https://github.com/prettier/prettier/issues/5246

The W3C Validator does not recommend trailing slash:

Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

<head> elements​

https://html.spec.whatwg.org/multipage/semantics.html#the-head-element

The title element is a required child in most situations, but when a higher-level protocol provides title information, e.g., in the subject line of an email when HTML is used as an email authoring format, the title element can be omitted.

https://www.joshwcomeau.com/snippets/html/html-skeleton

HTML Head Elements Cheat Sheet: https://kapeli.com/cheat_sheets/HTML_Head_Elements.docset/Contents/Resources/Documents/index

<img>​

alt is required - see https://html.spec.whatwg.org/multipage/images.html#alt

Page structure​

https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements

See:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

http://html5doctor.com/nav-element/

https://html.spec.whatwg.org/multipage/sections.html#the-nav-element

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose

Can have an ul inside:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

https://tdarb.org/blog/hamburger-menu-alternative.html

article​

https://html.spec.whatwg.org/multipage/sections.html#the-article-element

An article can have header, nav, section and footer (source):

<article>
  <header>
    <h1>Demos in Exampland</h1>
    <p>Written by A. N. Other.</p>
  </header>
  <nav>
    <ul>
      <li><a href="#public">Public demonstrations</a></li>
      <li><a href="#destroy">Demolitions</a></li>
      ...more...
    </ul>
  </nav>
  <div>
    <section id="public">
      <h1>Public demonstrations</h1>
      <p>...more...</p>
    </section>
    <section id="destroy">
      <h1>Demolitions</h1>
      <p>...more...</p>
    </section>
    ...more...
  </div>
  <footer>
    <p>
      <a href="?edit">Edit</a> | <a href="?delete">Delete</a> |
      <a href="?Rename">Rename</a>
    </p>
  </footer>
</article>

dialog​

https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

https://developer.chrome.com/blog/what-is-the-top-layer/

z-index has no effect in the top layer.

If we have a <form> is inside a <dialog> we can use method='dialog' (source).