Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Semantic HTML

Semantic HTML

Bright Umbrella's Lunch & Learn series for Deep Dive Coding: https://abrightumbrella.com/deep-dive-coding

Emily Lewis

August 24, 2018

More Decks by Emily Lewis

Other Decks in Technology


  1. Some rights reserved Semantic HTML Lunch & Learn @ Deep

    Dive Coding August 24, 2018 #BULunchNLearn #BUDeepDive
  2. Web Storage Geolocation Offline Web Apps Accessibilty Transitions ARIA Service

    Workers Structured Data Angular Canvas HTML5 PHP React UX Python Ruby Java JavaScript Python SVG
  3. #BULunchNLearn #BUDeepDive Seth Godin “If you can figure out how

    to do something interesting or unique or noteworthy, people will find you and pay you extra because you're not like everyone else ... you're different. ”
  4. #BULunchNLearn #BUDeepDive I HTML W

  5. #BULunchNLearn #BUDeepDive I HTML W ?

  6. HTML Users W #BULunchNLearn #BUDeepDive

  7. #BULunchNLearn #BUDeepDive Good Foundation Z

  8. Good Foundation • Semantics for machine readability • Accessible for

    all users • Development efficiencies • Syndication • SEO and findability • User experience enhancements • Solid foundation for advanced techniques Z
  9. #BULunchNLearn #BUDeepDive Semantic HTML </>

  10. Semantic HTML • Markup that has meaning • Markup that

    describes the content itself, not the way it looks • Elements used for their intended purpose* • Valid* </>
  11. * #BULunchNLearn #BUDeepDive

  12. #BULunchNLearn #BUDeepDive <a> <button> vs.

  13. #BULunchNLearn #BUDeepDive HTML Users W

  14. HTML5 <main> <footer> <section> <aside> <nav> <header> <figure> <article>

  15. #BULunchNLearn #BUDeepDive <div> <article> vs.

  16. None
  17. None
  18. None
  19. date search email tel url <input type=“ ”

  20. #BULunchNLearn #BUDeepDive Prototyping Production vs.

  21. #BULunchNLearn #BUDeepDive HTML Users W

  22. More perks • Web standards • Portability for devices •

    Common standard for teams • Easier troubleshooting & maintenance • More accessible, including to search engines! • Leaner markup = lighter-weight pages </>
  23. #BULunchNLearn #BUDeepDive John Ruskin Quality is never an accident. It

    is always the result of intelligent effort.
  24. Resources • Take Your Markup to 11 • Bootstrap Without

    All the Debt • Input Types: Give Users the Right Mobile Keyboard • Lunch & Learn @ Deep Dive Coding n
  25. #BULunchNLearn #BUDeepDive Questions?

  26. Connect! • @emilylewis • @lealea • @abrightumbrella • @ctrlclickcast 8

    emily@abrightumbrella.com lea@abrightumbrella.com abrightumbrella.com ctrlclickcast.com