Basics of HTML/HTML5 Lists(order lists)
A list commonly known as a grouping of items that maybe displayed in a chronological order, in web design/ development a list may be not only used to show data but also used for navigation purposes. The most common list you’ll see is order list and unordered list. But for for this tutorial we'll be focusing on order lists. To start a list is made up of three components 1.) A starting tag such as: <ol> -for order list <ul> -for unordered list
    2.) Second are list items which are defined using the <li>tag like so: [code language="html"] <li>item 1</li> <li>item 2</li> <li>item 3</li> [/code] <li> is really easy you can ad as many list item as you want…. 3.) Lastly you end the list with the closing tag you started with like so: </ol> -for order list </ul> -for unordered list The list type is determined by the CSS property list-style-type or simply the type attribute introduced in HTML5 Have I lost ya yet? lol, it’s really easy stuff. Examples of order lists:
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    [code language="HTML"] <ol> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> [/code]
    1. item A
    2. item B
    3. item C
    4. item D
    [code language="HTML"] <ol type="A"> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <!--CSS version!--> <ol style="list-style-type:upper-alpha;"> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> [/code]
    1. item I
    2. item II
    3. item III
    4. item IV
    [code language="HTML"] <ol type="I"> <li>item I</li> <li>item II</li> <li>item III</li> <li>item IV</li> </ol> <!--CSS version!--> <ol style="list-style-type:upper-roman;"> <li>item I</li> <li>item II</li> <li>item III</li> <li>item IV</li> </ol> [/code] By default order list always start at 1 and goes up chronologically. You can define to something else by adding the start attribute to your list.
    1. item 1
    2. item 2
    3. item 3
    4. item 4
    1. item A
    2. item B
    3. item C
    4. item D
    [code language="HTML"] <ol start="0"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> <ol Type="A" start="10"> <li>item A</li> <li>item B</li> <li>item C</li> <li>item D</li> </ol> [/code] If you ever need an order list to go in reverse, you can simply use the new HTML5 list attribute reversed like so:
    1. item 1
    2. item 2
    3. item 3
    4. item 4
    [code language="html"] <ol type="I" reversed> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> [/code] The HTML5 attributes start and reverse are only supported in the following browsers:
    1. Firefox
    2. Chrome
    3. Opera
    4. Safari
    Well that's everything you need to know about order lists.Now go lists some stuff. Otherwise check out part 2- Unorder lists.
    Tags:HTML, HTML5, web, Web Design, Web Tutorial
    Share:

    No comments

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.