The Elementary Standards

Lists are an important element in the structure of a website. Definition lists, ordered lists and unordered lists each have an official W3C use guideline but semantic interpretation of implementation methods are varied.

The structure of an HTML document may not be difficult except for coding discipline. Semantic structures offer benefits for users and assistive technologies (which includes search engines).

The expanded use of an ordered/unordered list embedded with header and paragraph(s) for article titles and summaries of the articles makes sense.

This method passes validation because the List Item (li) element has a block-level (or, flow) content model: it can be used as a for other elements. [See HTML 5 test. See HTML 5 W3C Validation results. See HTML 4/Strict W3C Validation results.

How to Meet WCAG 2.0 states Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. This is followed by 1.3.1 Info and Relationships: “Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A).“ Techniques for WCAG 2.0 offers H48: Using ol, ul and dl for lists.

Therefore, lists can be used for the semantic representation of content.

Ordered List (with header and paragraphs)

        
        <ol>
           <li>
                <section>
                          <h3>[Title]</h3>
                          <p>[Date]</p>
                          <p>[Summary paragraph]</p>
                </section>
           </li>
           <li>
                <section>
                          <h3>[Title]</h3>
                          <p>[Date]</p>
                          <p>[Summary paragraph]</p>
                </section>
           </li>
           [...]
        </ol>	
        
        

Unordered List (with Definition/Data List)

        
        <ul>
           <li>
                <dl>
                          <dt>[Title]</dt>
                          <dd>[Summary paragraph]</dd>
                          <dd>[Author]</dd>
                          <dd>[Date]</dd>
                </dl>
           </li>
           [...]
        </ul>