Reviewed July 2026. This article was substantially updated to reflect current web standards and practices.
The original infographic introduced HTML5 and CSS3 as new technologies. Today, HTML and CSS are living, modular web standards. The core workflow is simpler: structure content semantically, style it responsively, and test it with real users and devices.
The modern starter checklist
- Declare the HTML doctype, page language, UTF-8 encoding, viewport, and a unique title.
- Use landmarks such as
header,nav,main, andfooterwhere they match the content. - Write a logical heading hierarchy and descriptive link text.
- Connect labels to form controls and add useful image alternatives.
- Load CSS from a stylesheet and begin with a small-screen layout.
- Test zoom, keyboard use, contrast, long content, and multiple viewport sizes.
What to avoid
Avoid table-based layout, empty links, clickable generic containers, fixed-width pages, autoplaying media, and JavaScript that replaces native HTML without preserving its accessibility.
Where to verify details
Use the HTML Living Standard and maintained browser documentation for current syntax and support. Old tutorials can still explain fundamentals, but version-specific compatibility advice should be checked before use.
From infographic to working page
An infographic can introduce the vocabulary, but the next step is to build and inspect a real document. Create a small page with a navigation link, article, image, list, and form. Use browser developer tools to see how the source becomes a document object model and an accessibility tree. This makes the effect of semantic choices visible.
Questions to ask for every element
- What does this content mean, and is there a native element for that meaning?
- Does the element need a visible label or alternative text?
- What happens when CSS, JavaScript, or the image fails to load?
- Can someone reach and operate it with a keyboard?
- Will the reading order remain logical when the layout changes?
- Does the content still work with larger text and a narrow viewport?
Use validation as one part of quality assurance
A validator can catch malformed nesting, duplicate IDs, obsolete attributes, and other conformance problems. It cannot determine whether a heading is useful, a form is understandable, or a call to action is honest. Pair automated checks with keyboard testing, assistive-technology checks, responsive review, performance measurement, and proofreading.
Keep examples current by checking the Living Standard and browser compatibility information. Web standards evolve incrementally, so the goal is not to memorize a version number. The goal is to understand the platform well enough to verify a feature before relying on it.