Organize your text content
Remember when I talked about the box-content semantic elements, the <nav>, <main> and others? Well there's a lot more of them for the text. If you care enough, you can probably find a semantic HTML element for anything. Here's a few that you should use:
Text blocks with <p>
If you don't know what to use for your block of text, your probably need a paragraph. Paragraphs come with a natural margin that makes them readable even without adding style. Paragraphs are good, use them!
Quotes with <blockhouse>
The good old quote we often see in articles! It can actually comes with the <cite> element and attribute to help you sources your quotes, as well as a <footer> to indicate the end of the quote and its author. Take a look at the specifications on this page to make better quotes.
Lists with <ul>, <ol>, <dl>
If you enumerate something (text, links, etc...) you probably should add them in a list. Lists are useful for screen readers users as they are announced as a list with the total number of elements inside. Then when reading each entry, the screen reader voices its position.
<ul> with <li> inside creates an unordered list with bullets:
- Element A
- Element C
- Element Z
<ol> with <li> will create an ordered list with numbers for each element:
- Element 1
- Element 2
- Element 3
<dl> is not very popular but is super useful as it's a definition list. Most people still use two columns tables for definitions, but this is way better for screen readers users.
- Term 1
- Definition 1
- Term 2
- Definition 2
- Term 3
- definition 3
Of course all those lists come with their basic design, but please note that you can change them very easily. You can make your lists go in a single line, change their separation, or even use a custom image instead of dots! Just be careful to not put informative content as a decoration, as it will not be vocalized. Also when reading the source code of a page, HTML lists are very easy to understand.
Pre-formatted text with <pre>
If you have to present some code, it's probably good to wrap it inside a <pre> tag to preserve its formatting. Please note that you should also use the inline semantic <code> element (we'll talk about it later in these pages).
Make breaks with <hr>
The <hr> element is to indicate a break inside your content: a kind of pause, a change of subject. You could think that the old <hr> element is useless when we can style these breaks with CSS, but they indicate to screen readers users that they can take a break too!
Next: All about images