nikku/SEMANTIC_HTML_ELEMENTS.md

## SEMANTIC_HTML_ELEMENTS.md

      
    Raw
  

              SEMANTIC_HTML_ELEMENTS.md
            
          
    Use Semantic HTML Elements

TLDR

Understand the semantic elements that HTML offers and use them in favor of divs
Clickable <div />? Try not to do it, if it clearly is a UI control.
Consider: Not every element that is clickable must be a UI control but every click action needs to be accessible from a UI control.
The Case of Buttons

<!-- NO UI CONTROL -->
<div onClick={ (event) => alert('foo') }>
</div>
<!-- actual UI controls -->
<button onClick={ (event) => alert('foo') }>
</button>

<a></a>

<input type="button" />
What do we gain from actual buttons


Browser is aware
Keyboard navigation / trigger / outlines out of the box
out of the box disabled states
improved screen reader support (already without a11y hints)

We could add all of this to <div> using custom styling and aria hints, or we simply use semantic HTML elements that offer it out of the box.-
There is much more semantic HTML elements

<section>
<li>
<code>
<header>
<nav>
<p>