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:<ol> with <li> will create an ordered list with numbers for each element:
  1. Element 1
  2. Element 2
  3. 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

Initially published: November 23rd, 2020
Generated: November 12th, 2021