Skip to content

html.md

Latest commit

 

History

History
51 lines (32 loc) · 973 Bytes

html.md

File metadata and controls

51 lines (32 loc) · 973 Bytes

HTML

Quotes

Semantically correct quotes

Long quote - <blockquote> Short quote - <q>

For quote with author:

figure > blockquote + figcaption > cite (work name)

FAQ

We don't JS for this kind of component.

Instead use <details> and <summary>:

<details>
  <summary>Some question</summary>
  <div>
    Answer
  </div>
</details>

<article>

This isn't supposed to mean an actual article!

Actually it means one thing of many (like cards)

Breadcrumbs

WAI Aria Authoring Guide

WAI Aria Example

For wrapper:

  • use <nav> with aria-label="Breadcrumb"
  • wrap items in <ol>

For items:

  • use <li>
  • with <a>

For separator:

  • use ::before with content: '' (because screen readers will anounce the content)