Reviewed July 2026. This article was substantially updated to reflect current web standards and practices.
HTML is not a word processor. The goal is to describe what content means, then let CSS determine how that meaning should look across devices and user settings.
Structure the reading order
Use h1 through h6 for a logical outline, p for paragraphs, and ul or ol for genuine lists. Do not choose a heading level because of its default size.
Use emphasis intentionally
strong marks strong importance and em marks stress emphasis. Use blockquote and cite for quotations and sources, and code and pre for code. Visual bold or italic styling alone belongs in CSS.
Retire presentational markup
Elements and attributes created mainly for appearance, such as font, should not be part of a modern build. CSS provides consistent spacing, typography, color, alignment, and responsive behavior without weakening document meaning.
Keep links and controls distinct
A link navigates somewhere; a button performs an action. Making that distinction improves keyboard behavior, accessibility, analytics, and user expectations.
Text semantics that improve understanding
Use abbr when an abbreviation needs an expansion, time for machine-readable dates or times, address for contact information related to the nearest article or page, and figure with figcaption when media needs a caption. Tables are appropriate for genuinely tabular data and should include headers that identify rows or columns.
Quotations need context. Use q for a short inline quotation and blockquote for a longer one, then identify the source in surrounding text or with a citation. Do not use quotation elements simply to create indentation.
Formatting decisions belong in the design system
A strong stylesheet defines paragraph measure, heading rhythm, list indentation, link states, quotation treatment, code blocks, and data tables consistently. It also accounts for user settings. Text should remain usable when a person enlarges it, changes default fonts, uses high contrast, or turns off motion.
Review content in context
- Read the heading outline without the body copy. Does it summarize the page logically?
- Read links out of context. Does each one suggest a destination or action?
- Check that emphasis is rare enough to retain meaning.
- Confirm lists are real groups rather than decorative checkmarks built from loose paragraphs.
- Verify tables work on small screens without hiding relationships.
- Test copied text and print output when those tasks matter to the audience.
Semantic HTML does not prevent expressive visual design. It creates a dependable layer beneath that design so the same content can work in browsers, assistive technology, search systems, reader modes, and future interfaces.