How to section HTML elements笔记
看到一篇文章的笔记
- 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-labelledbyattribute