Documentation has improved greatly in the past few years especially on MDN. As I review practices I will keep a list of shorthand notes.
🔗 MDN: HTML Content Categories
🔗 MDN: Using ARIA Roles, States, and Properties
- Use implicit roles over explicit ones whenever possible
- Use landmarks and "skipnavs"
| Tag Name |
Number |
Common Uses |
ARIA Role (implicit) |
Role Type |
Notes |
<body> |
1️⃣ |
|
generic |
|
|
| Tag Name |
Number |
Common Uses |
ARIA Role (implicit) |
Role Type |
Notes |
<nav> |
♾️ |
Menus, tables of content, indexes |
navigation |
Landmark |
⚪ Primary navigational elements only, a footer index does not need it ⚪ Parent to ol/li navigational menus ⚪ Can be used around paragraph navigation ("Welcome to my page, where you can see my art, my photos...") |
<article> |
♾️ |
Independent potentially distributable/syndicated unit — Forum post, blog entry, item card, widget — can have child sections |
article |
Document structure |
⚪ If self-contained and could be used similarly in more than one place, it is an article ⚪ Should have a heading tag ⚪ Should have time tag ⚪ Can be nested where relationships exist: 1️⃣ Blog Post ♾️ Blog Post Comments |
<section> |
♾️ |
Generic sectioning typically with a header |
region if given name |
Landmark |
⚪ Many potential uses, serves as a fallback sectioning element when a better one does not exist ⚪ Use div for style-only elements |
<aside> |
♾️ |
Sidebars, callouts |
complementary |
Landmark |
⚪ Nothing in documentation specifies this is a good use for sidebar navigation? ⚪ Also flow content |
| Tag Name |
Number |
Common Uses |
ARIA Role (implicit) |
Role Type |
Notes |
<header> |
♾️ |
Container for logo, nav, search, or nested in sectioning content (article) |
banner if not nested in sectioning content |
Landmark |
⚪ Seen on first website |
<footer> |
♾️ |
Document footer, or nested in sectioning content (article) |
contentinfo |
Landmark |
⚪ Use role="contentinfo" as bugfix for Safari 13 |
| Tag Name |
Number |
Common Uses |
ARIA Role (implicit) |
Role Type |
Notes |
<main> |
1️⃣ |
Flow content such as article, aside, h1, table
|
main |
Landmark |
⚪ Do not include child elements that will repeat across pages, such as navigation — page-level content only |