Lists and Definitions Rules
- CSS can be used to create custom numbering or bullets for ordered and unordered lists
- Images should not be used to create the visual appearance of a list
- Use CSS to create custom numbering or bullets for ordered and unordered lists
- A deinition item in a definition list
- A term item in a definition list
- The dl element can be used to create lists of definitions.
- The dt element is used to itemize each term to be defined. One or more dd elements follow each dt element and provide definitions for the term.
lielements can be used with
ulmarkup to create ordered and unordered lists of information.
- Defines the starting value for an ordered list
lielements can be used to create ordered lists of information.
- The default numbering of items in an ordered list uses decimal numbers starting from one (1).
- The numbering style and current list number can be changed using the CSS list-style-type property. Possible values include decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian or none.
lielements can be used to create unordered lists of information.
- The default rendering of an unordered list uses a solid black circle as the bullet for each item; this default can be modified to a variety of shapes including discs, circles and squares using the CSS list-style property.
- Custom bullets can be defined using the CSS background-image property or the CSS list-style-image property.
Do not use paragraph or div elements to create lists.
If consecutive p elements include a string of non-space characters followed by a period or right paranthesis character (”)”), the markup may be representing an ordered list of items. If the markup is representing an ordered or other type of list, it should use HTML list markup with CSS for styling.
Do not use inline images to create the appearance of a list.
If consecutive p elements contain an img element with the alt attribute content that includes a single character or the null content, it may be representing a bulleted list of items. If the markup is representing a bulleted or other type of list, it should use HTML list markup and CSS, for incorporating the custom bullet.
Nested lists deeper than 5 levels are difficult for people to understand, especially screen reader users.
Reorganize the structure of the nested lists into sections that can be identified using meaningful section titles using heading markup.