A11y Front-end Roadmap #5 - Basic typography
Format text with meaningful tags.
There's no need to dive into the depths of typography, but it is definitely worth knowing the basics.
1 . Headings from <h1> to <h6>
They are used for heading elements: titles, if you prefer. There is quite a debate about whether or not to allow multiple level 1 headings, but for the rest, never forget to skip a level when nesting titles for content. Headings should have specific IDs if you need them for aria-labelledby references.
2 . Paragraphs <p>
A block of text, usually united by a single concept. By creating visual space between content blocks, it enhances readability and the organization of information.
3 . Break Row <br>
This tag breaks text, sending what follows it to the next row. It can be useful to divide an address, to separate verses in a poem, and in other cases where you don't change topics but need a new line. But please, please... don't use <br> for styling purposes; use CSS styles instead!
4 . Thematic Break <hr>
Once known simply as “Horizontal Rule”, it now has the semantic meaning of a thematic break between paragraph-level elements, suggesting a change in topic. Don't use it for graphic design purposes; you can easily create a divider with a <span> and a couple of lines of CSS.
5 . Text Formatting Tags
<strong>: The text is of strong importance; by default, it applies a bold font weight.<em>: Denotes emphasized text, which conveys a change in meaning or importance.<blockquote>: Used for extended quotations from other sources. It typically renders the text indented.
6 . Lists
<ul> and <ol> (with <li> for items): Lists of items, unordered and ordered respectively. Ordered lists should be used only when you want/have to convey that the items have a defined and specific order. You can hide bullets and numbers from the lists via CSS (specifying list-style-type: none), but using them allows assistive technologies to know exactly the total number of items and which is the current one that they are reading—a really nice feature given for free. They cannot contain other tags other than <li> elements as first children (well, they can contain also <script> and <template>), but inside each item, you are free to insert (almost) everything you want, even nested lists, that become automatically secondary, tertiary and so on.
7 . Note on Non-Semantic Formatting Tags
Just a quick one: you may know <b> and <i> tags for bold and italics. Don't use them; they're basically useless if you want to convey a semantic meaning for the text they're wrapping, because they have no semantic weight. Also, avoid using <u>: underlined text should be used only for links.
A11y Front-end Roadmap Table of contents
Step 5 - Basic Typography semantics