看到一篇文章的笔记
- sectioning elements:
<nav>
<aside>
<article>
<section>
<body>
- when to use
- once per navigation block
- sub-navigation in
<nav>
element doesn’t need to be wrapped in a second<nav>
element
- a
<nav>
is unnecessary around a search form - don’t use word “nav” or “navigation” in the label
- a
<nav>
doesn’t have to be a list of links
- when to use
<aside>
should not inside an<aside>
- difference between
<article>
and<section>
<article>
is like B(Block) in BEM while<section>
is like E(Element)<article>
stores self-contained content which makes sense when placed in a different context<section>
is a sub-section that requires context from its parent sectioning element
- comments sections should be wrapped in an
<article>
- difference between
- don’t wrap div for a section
<div>
has no semantic meaning- useful for the sake of styling purposes
- header and footer
- don’t put header or footer inside header or footer
- no side bars or navigation in it
- one
<main>
element on page visible
- labeling sections —— one method a time
- add an aria-label attribute (cannot translate language)
- add a
<h#>
element - use an
aria-labelledby
attribute