Text formatting
This course covers the HTML tags that format text and what each one means. It starts with headings as a numbered outline, read by screen readers and search engines, and the rule of one h1 with no skipped levels. It then separates strong and em, which mark importance and stress, from b and i, which mark a visual convention. Later lessons cover mark, small, del, ins, s, sub, sup, code, kbd, samp, var, abbr and time. A final lesson formats one product description with all of them.
What you'll learn
- ✓Choosing heading levels by rank in the page outline, not by font size
- ✓Building one h1 and a heading hierarchy with no skipped levels
- ✓Telling strong and em apart from b and i with a read-aloud test
- ✓Using mark, small, del, ins, s, sub and sup for their specific jobs
- ✓Marking precise content with code, kbd, samp, var, abbr and time
- ✓Checking heading structure in the DevTools Accessibility panel
Headings are a hierarchy, not a font size
Styled this way, the h3 looks just like a big, important heading, and the h1 looks like a small label: visually, this reads correctly. Structurally, it's backwards, and the last two courses' running theme applies at full force: h1–h6 carry meaning independent of any CSS, just like…
Read the full lesson free →Curriculum
7 lessonsHeadings are a hierarchy, not a font size
Heading levels h1 to h6 encode rank in the page outline, which screen readers and search engines use.
One h1, a real hierarchy, no skipped levels
Use one h1 per page and an unbroken hierarchy below it, since the HTML5 outline algorithm was never implemented.
strong and em: meaning, not just appearance
strong marks importance and em marks stress that changes meaning, recorded in markup even when screen readers stay silent.
b and i: when only the look matters, honestly
b and i mark text offset by visual or typographic convention, such as key terms, foreign words and ship names.
mark, small, del, ins, sub, and sup
Six inline tags with narrow jobs: contextual highlights, fine print, document edits, and positions that carry meaning.
code, kbd, samp, var, abbr, and time: marking up precise content
Tags for precise content: code, keystrokes, program output, variables, expanded abbreviations and machine-readable dates with time.
Putting it all together: formatting a real product description
One product description marked up with every tag from the course, plus a checklist for any block of prose.