It’s good to write HTML code that is semantically correct, which means that the HTML structures and elements you use accurately describes the structure of the information.
Use a list whenever you have a repeated list of items in your content.
There are 3 types of lists:
Unordered lists <ul> :
Unordered lists are simple bulleted lists.
Use when there is no particular order to the items, when you won’t need to cross-reference an item to other content elsewhere.
Elements:
<ul> … </ul>
Unordered list; paired tag.
<li> … </li>
List item; paired tag.
Example:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ul>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ul>
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ul>
</ul>
</ul>
Ordered lists <ol>:
Ordered lists are similar to unordered lists, but with a numbering (or lettering) order applied by the browser.
Elements:
<ol> … </ol>
Ordered list; paired tag.
<li> … </li>
List item; paired tag.
Example:
<ol style=”list-style-type:decimal;”>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ol style=”list-style-type:lower-alpha;”>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ol style=”list-style-type:lower-roman;”>
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ol>
</ol>
</ol>
Definition lists:
Definition lists are for lists of term/definition pairs.
Elements:
<dl> … </dl>
Definition list; paired tag.
<dt> … </dt>
Definition term; paired tag.
<dd> … </dd>
Definition definition; paired tag.
Example:
<dl> <dt> The dl element </dt>
<dd>Paired tags define the start and end of a definition list.</dd>
<dt> The dt element </dt>
<dd>Paired tag that indicates the term being defined.</dd>
<dt> The dd element </dt>
<dd>Paired tag that indicates the definition of the term. Each term should be followed by a definition.</dd>
</dl>
Looks like The dl element Paired tags define the start and end of a definition list.
The dt element Paired tag that indicates the term being defined. The dd element Paired tag that indicates the definition of the term. Each term should be followed by a definition.
There are lots of other ways you can structure content of this type (e.g. in a table, or using sub-headings), but if it matches this pattern, it’s best to use a definition list, because it clearly indicates the relationships between the terms & definitions to any software looking at your page.
Use a list whenever you have a repeated list of items in your content.
There are 3 types of lists:
- Unordered lists (bulleted lists)
- Ordered lists (incrementing numbers or letters instead of bullets)
- Definition lists (list term/definition pairs)
Unordered lists <ul> :
Unordered lists are simple bulleted lists.
Use when there is no particular order to the items, when you won’t need to cross-reference an item to other content elsewhere.
Elements:
<ul> … </ul>
Unordered list; paired tag.
<li> … </li>
List item; paired tag.
Example:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ul>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ul>
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ul>
</ul>
</ul>
Ordered lists <ol>:
Ordered lists are similar to unordered lists, but with a numbering (or lettering) order applied by the browser.
Elements:
<ol> … </ol>
Ordered list; paired tag.
<li> … </li>
List item; paired tag.
Example:
<ol style=”list-style-type:decimal;”>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ol style=”list-style-type:lower-alpha;”>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ol style=”list-style-type:lower-roman;”>
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ol>
</ol>
</ol>
Definition lists:
Definition lists are for lists of term/definition pairs.
Elements:
<dl> … </dl>
Definition list; paired tag.
<dt> … </dt>
Definition term; paired tag.
<dd> … </dd>
Definition definition; paired tag.
Example:
<dl> <dt> The dl element </dt>
<dd>Paired tags define the start and end of a definition list.</dd>
<dt> The dt element </dt>
<dd>Paired tag that indicates the term being defined.</dd>
<dt> The dd element </dt>
<dd>Paired tag that indicates the definition of the term. Each term should be followed by a definition.</dd>
</dl>
Looks like The dl element Paired tags define the start and end of a definition list.
The dt element Paired tag that indicates the term being defined. The dd element Paired tag that indicates the definition of the term. Each term should be followed by a definition.
There are lots of other ways you can structure content of this type (e.g. in a table, or using sub-headings), but if it matches this pattern, it’s best to use a definition list, because it clearly indicates the relationships between the terms & definitions to any software looking at your page.
No comments:
Post a Comment