Advanced HTML for good developers
summary
Shows concrete, testable HTML practices: add width and height on images to eliminate cumulative layout shift and combine srcset/sizes for responsive sources; use loading="lazy" but set eager for LCP images; apply fetchpriority and preload alongside preconnect/DNS-prefetch to shape network order; follow Lighthouse guidance — DOM <1500 nodes, depth <32, no parent >60 children (warning at 800); prefer native elements (button, details, dialog) because div-only pages hide links from assistive tech; mentions Early Hints HTTP status for server-side preloading.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:08HTML Simplicity
- 2:15HTML Elements
- 3:02Accessibility Role
- 6:19Performance Impact
- 10:11Native Functionality
- 14:06Image Optimization
- 19:42Prioritization Techniques
- 26:55Preloading Resources
- 29:01Early Hints
- 29:54Conclusion
related talks
50mAdvanced HTML for Good Developers
57mAdvanced HTML for Performance & Accessibility
44mThe HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 Minutes
34mHTML Best Practice
28mHumanizing The Markup Language: Thoughtful Semantics for Better Web Experiences
28mSemantic HTML: What, Why, and How
19mHTML can do that?
43mHTML. The standard that will rock it