DEV 1-3 - Code lists of items semantically, using native HTML list elements
Why is this important?
Lists, when coded correctly, can provide useful information, for example,
- The fact that there is a list of related items;
- The number of items in the list;
- The number of the current item in the list.
Lists also add structure to a page, making it easier to read and scan words.
If something is a list, always code it as one using <ul>,<ol>, <dl>
Include all menus if possible - they are logically lists - when style sheets are turned off, they will maintain structure and meaning.
Avoid using images or text characters such as asterisks to create list effects
Use html lists rather than spacers and bullet images - style the lists if necessary, using CSS.
Code <ul>, <ol>, <dl> properly according to standards
- Ensure correct syntax when nesting a list within a list (see example);
- Use <ul> for unordered lists – these are simple, non-hierarchical lists of items with a bullet point at the front of each line, like this text you are reading now;
- Use <ol> for ordered lists – these are lists with a hierarchy. By default they will have a number in front of them but these can use numbers, letters or roman numerals;
- Use <dl> for descriptions. Description lists allow you to group related terms and descriptions programmatically. A <dl> has two elements which are used in pairs:
- <dt> is a definition term;
- <dd> is the definition of that term.
Use CSS to alter appearance of bullets and numbers
list-style: disc url("newbullet.png")
Code example of a nested list
<p>Items needed for holiday:</p>
</li> <!-- note the placement -->
How this list appears in the browser
Items needed for holiday:
- Swimming things
- Sun cream
Navigation elements should be coded as lists
Even horizontal menus can be coded as lists using CSS, for example:
- Use display: inline or display: inline block on the li definition, or
- Use float: left on the li definition.
Examples of good practice
EN 301 549 v 2.1.2
- 18.104.22.168 Info and Relationships