- It’s a golden age for rich, meaningful markup.
- We nest div inside div inside div, and we give every div a stack of classes—but when we look in the CSS, our classes provide little insight into what we’re actually trying to define.
- We write and without a moment’s hesitation. Looking at Github, one can find plenty of examples of . But why? You can’t have more than one main element, so you already know how to reference it directly.
- We have no excuse for not expecting our fellow developers to know and understand them.
- An end-user may not notice or care if you stick a form class on your form element, but you should. You should care about bloating your markup and slowing down the user experience. You should care about readability.
- If and when the semantics of HTML5 fall short, we have ARIA, specifically designed to fill in the gaps.
- ARIA is too often dismissed as “just accessibility,” but really—true to its name—it’s about Accessible Rich Internet Applications.
- You could use a header element, but since you can have more than one header element, that’s probably not going to work. But ARIA’s [role=banner] is already there in the spec, definitively saying, “This is a top-of-page header.”
- Once you have , adding an extra class is simply redundant and messy.
- don’t write , because the semantics are already present in the element itself.
- Good markup does not change from project to project.
- The W3C recommends paragraph tags for wrapping form elements.
- Note that [aria-hidden] is more semantic than a utility .hide class, and could also be used here, but aria-expanded seems more appropriate.