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 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 We can change the symbol appearance using the type attribute The type attribute can have the values - disc - circle - square 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. 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 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.) The symbol appearance can be changed using the type attribute and start attribute. Using type 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". 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. 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. 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> 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>