Basics of HTML/HTML5 Lists(order lists)

Basics of HTML/HTML5 Lists(order lists)

Published: March 12, 2014 Author: JasonDarkX2  Category: Tech,Tutorials


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: 
    <ol>
 	<li>item 1</li>
 	<li>item 2</li>
 	<li>item 3</li>
</ol>
    <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:
    Default list-style-type:upper-alpha;
    type="A"    		 list-style-type:upper-roman;
    type="I"
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    By default order list always start at 1 and goes up chronologically in ascending order. You can define to something else by adding the start attribute to your list.

    Examples of order lists:
    Default Starts at 5 Starts at 10
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    1. item 0
    2. item 1
    3. item 2
    4. item 3
    If you ever need an order list to go in reverse/descending order , you can simply use the new HTML5 list attribute reversed like so:
    1. item 1
    2. item 2
    3. item 3
    4. item 4
    The final markup could look something like this: 
    <ol type="I" reversed>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 </ol>
    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
    No comments