HTML & Semantic Markup — Learning Roadmap
Estimated Time to Job-Ready
3-5 weeks of consistent learning (1-2 hours/day) to reach genuine competence — HTML has a small enough surface area that "job-ready" here really means "writes clean, semantic, accessible markup by default," which is achievable faster than most technologies on this platform, but is still routinely done badly by developers who skip straight to a framework without it.
Phase 1: Document Structure & Core Elements (Week 1)
html/head/body, charset, and viewport meta — get these right by habit, every single pageh1-h6), paragraphs, lists (ul/ol/li), links (a)header, nav, main, article, section, aside, footerCheckpoint: can you build a simple one-page site (header, a couple of content sections, footer) using only semantic elements, with zero divs used for anything a semantic element already covers?
Phase 2: Forms, Tables & Media (Week 2)
email, number, tel, date), required/pattern validationfor/id — not just placed visually near an inputthead, tbody, th scopealt text written correctly, picture/srcset for responsive deliveryCheckpoint: if you disconnect a form's CSS entirely, is every field still clearly labeled and usable by keyboard alone? If not, something structural is wrong, not just unstyled.
Phase 3: Accessibility & Modern HTML (Week 3)
details/summary for JavaScript-free disclosure widgetsdialog element for native modalstitle, description, Open Graph basicsCheckpoint: can you explain, out loud, the difference between — and why you'd almost always pick the second?Phase 4: Web Components & Interview Readiness (Week 4-5)
customElements.define, Shadow DOM basics, when a native custom element is a reasonable choice vs. a framework componentdivCommon Pitfalls Specific to HTML (Not Generic Study Advice)
role="button" on a div is a real pattern, but it's a fallback for when no native element fits, not a first choicealt text or filling it with the filename — alt="IMG_4821.jpg" passes no accessibility audit and helps no oneh3 chosen because "it looks the right size" rather than because it's genuinely a subsection of an h2, breaks the document outline that screen reader users rely on to navigateGetting Your First HTML-Adjacent Role