Web Standards in Dreamweaver, Part 1

Mark Lists As Lists

In HTML 4.01 and XHTML there are three nondeprecated list definitions to choose from: ordered list, unordered list, and definition list. It is important to use the correct type of list when entering your information—do not simply choose one for visual effect. Once again, if you are going for a certain look, use CSS to achieve it.

Use ordered lists for a list of items numbered in sequential order, for example, a list of step-by-step instructions or ranked items.

<ol>

     <li>list item one</li>

     <li>list item two</li>

</ol>

This is displayed in most browsers as shown in Figure 2-2.

Figure 2-2. Ordered list in a browser

Use unordered lists for a list of unordered items, for example, a list of attributes.

<ul>
     <li>list item one</li>
     <li>list item two</li>
</ul>

This is displayed in most browsers as shown in Figure 2-3.

Figure 2-3. Unordered list in a browser

Use a definition list if you have a list of items and explanations. By using this type of list, you make it clear to someone using an assistive technology such as a screen reader (or other device that can only see the structure of the document) that the list contains items and their definitions.

If you create this kind of list just by altering the presentational aspects of the page, your intentions may not be clear to someone who cannot see that presentation. The definition list includes <dt> tags for terms and <dd> tags for definitions.

<dl>
     <dt>the term</dt>
     <dd>the definition</dd>
     <dt>another term</dt>
     <dd>another definition</dd>
</dl>

This markup is displayed in most browsers as shown in Figure 2-4.

Figure 2-4. Definition list in a browser

Special Characters

When inserting special characters such as brackets (< >) or the ampersand (&), you should always use the correct Unicode character entities. When you enter common characters into Design view, Dreamweaver MX enters the correct character code for you, for example, Dreamweaver adds < in place of < and & in place of &. However, if you are working in Code view or need to insert a character that is not on your keyboard, there are additional characters available from the Text tab of the Insert toolbar that you can insert into the document. The Text tab is shown in Figure 2-5.

Figure 2-5. Character entities in the Insert toolbar

The more unusual characters can be found by clicking the button on the right of the Characters tab (or clicking the arrow on the far right and selecting Other Characters). This opens a panel of characters to choose from and insert into your document, as shown in Figure 2-6.

Figure 2-6. More character entities