this page to make better quotes.
<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:<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.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>
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).
<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