5-Minute Semantic Upgrade
Replace a `div`-only page with `header`, `main`, `section`, and `footer`. Keep it to one phone screen.
Frontend / Knowledge library
HTML
the document skeleton of the web
Why learn HTML?
Every page on the web is HTML at the end of the pipeline. Frameworks come and go; HTML is the contract they all compile to. Non-negotiable knowledge.
The problem it solves
HTML provides the universal structure and meaning of web content, making pages readable by browsers, search engines, and assistive technologies while enabling responsive mobile layouts.
Where it came from
Created at CERN as a simple markup for sharing physics documents. Standardized through browser wars, nearly replaced by XHTML, then reborn as the living HTML5 standard.
- 1991: Tim Berners-Lee published the first HTML tag set for linked documents.
- 1995: HTML 2.0 became the first formal standard.
- 1997: HTML 4.x emphasized separation of structure from presentation (with CSS).
- 2014: HTML5 became a major milestone with semantic elements and rich media support.
- Now: WHATWG maintains HTML as a Living Standard with ongoing incremental improvements.
Build your understanding
Work through these exercises in order. Try the task before opening a reference.
- Build a page using only semantic tags (no divs).
- Make an accessible form with labels & fieldsets.
- Explain the difference between <section>, <article>, <aside>.
- Hand-write a valid document with meta tags for SEO/social.
- Audit a real site's markup with a11y devtools and fix 5 issues.
More ways to practice
Accessible Image Card
Build a card with an image, heading, short text, and link. Use meaningful `alt` text and logical heading order.
Mobile Form Essentials
Create a sign-up form using `label` + matching `id`, proper input types (`email`, `tel`), and `required` fields.
Daily Reflection Snippet
Write a short journal entry using semantic text tags (`article`, `time`, `p`) and validate the HTML.
Mini Landing Page Skeleton
Create a fast-loading page skeleton with viewport meta, semantic landmarks, and lazy-loaded image placeholders.
Documentation and sources
- WHATWG HTML Living Standard (html.spec.whatwg.org)
- MDN Web Docs: HTML (developer.mozilla.org)
- web.dev Learn HTML (web.dev)
- W3C WAI Tutorials (www.w3.org)
Catalog research notes
- HTML is a Living Standard (continuous updates), not a versioned "HTML6" release model.
- Modern declarative attributes like `popover` and `inert` reduce JavaScript needed for common UI behavior.
- Performance-oriented attributes such as `loading="lazy"` are widely used for faster mobile pages.
- Form and accessibility mappings are continually refined for better assistive-tech and cross-browser consistency.
Connect the ideas
Built on
Enables
Explore next
Real World Example
Archival Document Skeleton Standardization
A historical society digitizing paper records for public web access.
The business problem
Inconsistent document structures across digitized files prevent search engines from indexing content correctly, leading to poor discoverability.
How this topic solves it
Implementing a standardized HTML document skeleton ensures that metadata, headers, and content sections are semantically defined, allowing crawlers to parse the archival records accurately.
- Define the root document structure using the standard HTML skeleton.
- Insert metadata within the head element to describe the archival record.
- Use semantic elements like header, article, and footer to organize the digitized text.
- Apply links to connect related historical documents.
- Validate the markup to ensure compliance with web standards.
The flow shows how raw data is transformed into a structured HTML document for web consumption.
Unstructured digitized archival data
Standardized tags like head and body
Using article and header for content
External crawler indexing the content
- Raw Text → wraps → HTML Skeleton
- HTML Skeleton → organizes → Semantic Markup
- Semantic Markup → exposes → Search Engine
Expected business outcome
Improved search engine visibility and consistent rendering of historical documents across all user devices.
Limitations and checks
HTML defines structure but not visual presentation; checking for visual consistency requires external CSS validation.