Semantic HTML: What, Why, and How
summary
Concrete rules and examples for immediate use not platitudes Use one H1 and follow heading order for screen reader outlines, landmark roles header main footer appear once each, and validate the document outline with a screen reader Meta tags and open graph/schema improve SEO, picture with Source loads smallest image for performance, and table caption colgroup thead and scope make large tables navigable Forms produce multipart key value pairs on submit, and input type attribute has 21 possible values while details/summary creates a toggle with no JavaScript also use one H1
AI-written summary · about
chapters (12)
- 0:00Introduction to semantic HTML
- 1:26Basic HTML page structure
- 3:57SEO and meta tags
- 5:43Headings and document outline
- 7:08Landmark and ARIA roles
- 9:15Enriching content with HTML
- 13:51Forms and form controls
- 18:11Input types and validation
- 21:02Links vs buttons accessibility
- 22:50Responsive images and iframes
- 23:56Built-in interactive elements
- 25:00Q&A on frameworks and semantics
related talks
01h 05mHTML: The Good Parts
23mSemantics for Cynics
11mIt's the Markup that Matters
19mHTML can do that?
57mAdvanced HTML for Performance & Accessibility
30mAdvanced HTML for Performance & Accessibility
31mAdvanced HTML for good developers
44mThe HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 Minutes