unordered lists
- space between topic and points
- space between bullets
- topic head aligns with other text
|
<ul>unordered
lists<!-- do not end ul tag yet-->
<li>space between topics and
points
<li>space between bullets
<li>topic head aligns with other
text
</ul> <!--Notice
there is no end for li tag, only ul tag-->
|
|
compact unordered lists
no space between topic and
points
less space between (smaller)
bullets
topic head aligns with bullets
|
<ul="compact">compact
unordered list
<li>no space between topic and
points
<li>less space between (smaller)
bullets
<li>topic head aligns with bullets
</ul>
|
types of bullets
- square, circle or disc types
can be set when type "ul" code
- can change type
for specific "li"
- following list points use
that style until change style in some browsers; in other browsers that
style only for that point
nested lists
- bullets for nested lists
change in most browsers
- may appear as "circle"
if previous was "disc"
|
<ul type="square">types
of bullets
<li>square, circle or disc types
can be set when type "ul" code
<li type="disc">can
change type for specific "li"
<li>following list points use
that style until change style in some browsers; in other browsers that
style only for that point
<ul>nested lists
<li>bullets for nested lists
change in most browsers
<li>may appear as "circle"
if previous was "disc"
</ul><!--end
tag for nested list-->
</ul><!--end
tag for initial list; each ul needs end tag-->
|
ordered lists
- will number your list
- can select start number
with ol code
nested lists
- these will also be numbered
- unless you change type
of order
reset type for nested
list
- can also use other types
- select type with ol
or li
other ways of ordering
- select type with
ol or li code
- order by small letters
or Roman numerals
- large Roman
numerals
- small roman
numerals
|
<ol>ordered
lists
<li>will
number your list
<li>can
select start numer when type ol code
<ol start="8"><b>nested
lists</b><!--bold
is so notice nested list but bold may not show up in all browsers; see
what start="8" does to next line-->
<li>these will also be numbered
<li>unless you change type of order
</ol><!--closes
nested list that started with 8-->
<ol type="A"><b>
reset type for nested list</b><!--selects
capital letter type to use A, B, C, etc. -->
<li>can also use other types
<li>select type with ol or li
code
<ol type="a"><b>other
ways of ordering</b><!--selects
small letter type for a, b, c, etc.-->
<li>select type with ol or li
code
<li>order by small letters or
Roman numerals
<li type="I">large
Roman numerals<!--li
code used to select type for large Roman numeral here-->
<li type="i">small
Roman numerals<!--and
for small Roman numeral here-->
</ol><!--closes
nested list that began with type "a"-->
</ol><!--closes
nested list that began with type "A"-->
</ol><!--closes
initial list; need end tag for each ol tag-->
|
- definition lists
- are useful not only for actual definitions but for this sort of layout
with a "hanging indent". W3C guidelines for accessibility
encourage designers to use structural tags for their original purpose
rather than layout. Does that include not using this tag for visual
effect? Or when you use the tag for visual effect are you actually defining
a term anyway?
|
<dl>
<dt><b>definition
lists</b><!--end
bold only, dt does not take an ending tag-->
<dd>are useful not only for
actual definitions but for this sort of layout with a "hanging indent".
W3C guidelines for accessibility encourage designers to use structural
tags for their original purpose rather than for layout. Does that include
not using this tag for visual effect? Or when you use the tag for visual
effect are you actually defining a term anyway?
<!--note there is no end tag for
dd either-->
</dl><!--must
have end tag for dl-->
|