Semantic HTML

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

Transcript

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.
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