Lists

Html list is used to display items in a sequence. They appear as bulleted lines of text in the browsers. There are several kinds of lists. - Unordered List - Ordered List - Definition Lists - Menu Lists - Directory Lists
Unordered List
Unordered list has each item with the same leading symbol. The items in the list will be rendered in the same order that they are entered. The default bullet symbol will be displayed as dark circle. The unordered list is created using <ul>..</ul> block and the item in the list use the <li> element. <ul> Header of unordered list <li> 1st list item <li> 2nd list item <li> 3rd list item <ul> The each item in the list is displayed as bullet symbol. The symbol can be - a dark circle - a circle - a square
type attribute
We can change the symbol appearance using the type attribute The type attribute can have the values - disc - circle - square
Empty list
If there is no any list item, it is called as Empty list. The header text will be rendered indented. This way we can created indented text format as well as we can also use <blockquote> element.
Nested Lists
List can be nested one inside the other. For creating a nested list use the second list as the item of the first(outer) list
Note
The inner most list will be double indented.The inner most list items are rendered with different item
Ordered List
Unordered list has each item has a sequential leading symbol. The browser assigns this sequence automatically. The Ordered list is created using <ol>..</ol> block and the item in the list use the <li> element. The browser inserts an extra line before the list and indents the list a few spaces to the right. <ol> Header of unordered list <li> 1st list item <li> 2nd list item <li> 3rd list item <ol> The each item in the list is displayed as leading symbol. The symbol can be - 1 (Arabic numerals: 1, 2,3..) - a (Lowercase letters: a, b, c.. etc.) - A (Uppercase letters: A, B, C.. etc.) - i (Lowercase Roman Numerals: i, ii, iii.. etc.) - I (Uppercase Roman Numerals: I, II, III.. etc.)
Attributes of Ordered List
The symbol appearance can be changed using the type attribute and start attribute.
type attribute
Using type attribute
start attribute
Using start attribute The first symbol in the sequence is 1, a, A, i, I. To change the default setting of the sequence the start attribute is used. If the start element attribute us assigned the value 5 and the type attribute value as A, the sequence will start from "E".
Definition Lists
A definition list is a sequence of terms and descriptions of these terms. The definition list are created using the <dl>..</dl> block. Inside <dl> element the following elements are inserted. <dt> tag - Definition term <dd> tag - Definition description Definition lists are rendered differently on different browsers. All terms and descriptions are rendered on a new line. More than one terms and more than one description are included in the definition list.
Attributes of definition list
compact - A definitoin list can be rendered compactly if the compact(remove spaces) attribute is added to <dl> element. When the compact attribute is added the description starts on the same line as the associated term.
Directory List
The <dir> list is similar to unordered list. The <dir> list contains element items defined by <li> items. <dir> Header of unordered list <li> 1st list item <li> 2nd list item <li> 3rd list item <dir>
Menu List
The <menu> list is similar to unordered list. The <menu> list contains element items defined by <li> items. <menu> Header of unordered list <li> 1st list item <li> 2nd list item <li> 3rd list item <menu>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +