Some rights reserved
Semantic HTML
Lunch & Learn @ Deep Dive Coding
August 24, 2018
#BULunchNLearn #BUDeepDive
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
#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. ”
Slide 4
Slide 4 text
#BULunchNLearn #BUDeepDive
I HTML
W
Slide 5
Slide 5 text
#BULunchNLearn #BUDeepDive
I HTML
W ?
Slide 6
Slide 6 text
HTML
Users
W
#BULunchNLearn #BUDeepDive
Slide 7
Slide 7 text
#BULunchNLearn #BUDeepDive
Good Foundation
Z
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
#BULunchNLearn #BUDeepDive
Semantic HTML
Slide 10
Slide 10 text
Semantic HTML
• Markup that has meaning
• Markup that describes the content itself,
not the way it looks
• Elements used for their intended
purpose*
• Valid*
#BULunchNLearn #BUDeepDive
Prototyping
Production
vs.
Slide 21
Slide 21 text
#BULunchNLearn #BUDeepDive
HTML
Users
W
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
#BULunchNLearn #BUDeepDive
John Ruskin
Quality is never an accident.
It is always the result of
intelligent effort.
Slide 24
Slide 24 text
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