Semantic HTML

Semantic HTML uses meaningful tags.

  ## Non-semantic (bad)
  ```html
  <div>Header</div>
  <div>Footer</div>
  ```
  
  ## Semantic (good)
  ```html
  <header>Header</header>
  <footer>Footer</footer>
  ```
  
  ## Real world benefit
  - Google understands page better
  - Screen readers help blind users
  - Better SEO ranking
  
  ## Common semantic tags
  header, nav, main, section, article, footer