HTML Lists
Lists in HTML
Unordered Lists
Lists
follow a common skeleton every time — an outer container tag,
and a new tag for each bullet. Observe:
<ul>
<li>Bullet
1</li>
<li>Bullet
2</li>
<li>Bullet
3</li>
</ul>
Which
would create:
- Bullet
1
- Bullet
2
- Bullet
3
Let’s
explain:
<ul>
stands for Unordered List,
which means that the bullets are not ranked or numbered in any way, they’re all
the same.
<li>
means List Item,
each one corresponding to a bullet.
Closing
</li>
tags
are not strictly necessary in HTML 4, but I recommend that you
always use them. They’ll help your stylesheets work better and will make a
future transition to XHTML much easier. Leaving
them out now may leave you with a tonne of work in the future.
You
also don’t need to add in line breaks to go on to the next point, it will all
be taken care of for you. Once a block of text is made into a bullet you can
continue on formatting the text normally, and adding in paragraphs, images and
the like.
Different bullets
It’s
a simple matter of adding an attribute to change the nature of your bullets.
For square ones, add
type="square"
,
and for empty circles, add type="circle"
to
the ul
tag. They can also be added to li
s to affect
individual points. Examples:- It is a square.
- And
this is a circle.
If
you nest your lists (put one inside another), they
will be indented underneath and the bullet type will
change to show the transition, from
disc
(the
default, full circle) to circle
to square
. Of course you
can step in and change this order manually if you want. Note that these values
must all be in lowercase.
Ordered Lists
If
you want your list to be ordered instead of unordered, it’s a simple matter of
just substituting the
<ul>
elements with <ol>
s, which of
course stand for Ordered Lists.<ol>
<li>List Item
1</li>
<li>List Item
2</li>
<li>List Item
3</li>
</ol>
This
will create:
- List
Item 1
- List
Item 2
- List
Item 3
See?
All that was changed was that one letter. Beyond that, the rest of the
structure remains intact, meaning you still use
li
s the same you did
already. Your browser will keep adding numbers if you keep adding list items.
You can add or take away any of the items and the list will renumber itself
into order.
You
can nest different types of lists into each other if you want, just remember to
close them correctly. The progression of bullet-types that happens when you
nest still occurs if you put it under an
ol
.
Different types of numbers
You
can change the stylings of your ordered lists too, with the same attribute
syntax as before, just using different values. You can do Roman numerals,
letters, and both of the above in small characters. The full list:
type="A"
type="a"
type="I"
type="i"
Note
that even if the list was to be labelled ’b’ or ’iv’, the attribute value is
still set as the first number — i.e. ‘
a
’ and ‘i
’.
Changing the start-point
If
you need to start the count at a number other than 1, you just add another
attribute, like so:
<ol
start="5">
You
can also step in the middle of a list and change the number of an item (and
therefore all of the items that follow). Add
value="9"
to
an item and the list will skip its numbering to 9 and then continue on to ten
and onwards from there.
Example:
<ol type="1" value="1"> <li>Arabic Number</li> <li>Arabic Number</li> </ol> <ol type="a" value="1"> <li>Lower Alphabet</li> <li>Lower Alphabet</li> </ol> <ol type="A" value="1"> <li>Upper Alphabet</li> <li>Upper Alphabet</li> </ol> <ol type="i" value="1"> <li>Lower Roman numeral</li> <li>Lower Roman numeral</li> </ol> <ol type="I" value="1"> <li>Upper Roman numeral</li> <li>Upper Roman numeral</li> </ol>
Definition Lists
There
is this third list type, useful for information that comes in pairs. The tag
for a definition list is, predictably
<dl>
. A one-term
list would look like this:<dl>
<dt>Piyush Patel</dt>
<dd><em>noun</em>;
Computer Teacher.</dd>
</dl>
Piyush Patel
noun; Computer Teacher.
<dt>
stands for Definition Term.
It is not indented.
<dd>
stands for Definition Description.
It appears indented. You don’t have to keep these tags in pairs, many
dd
s are allowed under the same dt
. Also, don’t worry — you can use these lists for any purpose
without compromising their logical meaning. ‘Definition’ lists was just a misleading
name they were given. Once again, the end tags aren’t strictly necessary, but
take it from someone who knows: use them.
Nested
List Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<!-- HTML Example of Defination List -->
<dl>
<dt>URL
<dd>Universal Resource Locator
<dt>W3C
<dd>World Wide Web Consortium
<dt>PNG
<dd>Portable Network Graphics
</dl>
HTML <ol> tag define ordered list(list of Ordered items). HTML <ol> tag is a Container tag.
<ol> Tag Attributes
HTML <ol> tag specified Order list display list of item and its attribute help to change the type of order list.
Attributes | Value | Description |
---|---|---|
type | 1 a A i I | Arabic Number, Lowercase alphabet, Uppercase alphabet, Lowercase Roman Numeral, Uppercase Roman Numeral, By default value is "1". |
start | "Start_Sequence_Number" | define start sequence number of the list. |
<li> Tag Attributes
<li> tag specified list items and its attribute help to change the type of order list.
Attributes | Value | Description |
---|---|---|
type | 1 a A i I | Arabic Number, Lowercase alphabet, Uppercase alphabet, Lowercase Roman Numeral, Uppercase Roman Numeral, By default value is "1". |
start | "Start_Sequence_Number" | define start sequence number of the list. |
Comments
Post a Comment