Click here to complete the attribute assignment
  • Attributes provide additional information about an element
    • Attributes are always specified in the start tag
    • Attributes usually come in name/value pairs like: name="value"

The ordered list uses the “type" attribute, which configures the symbols used for ordering the list.

For example:

<ol type=”A”> will number the list in Uppercase alphabetical order.

The code in red shows how the type="A" is inserted into the starting tag <ol>

<ol type ="A">

<li>Red</li>
<li> Blue</li>
<li>Green </li>

</ol>

Result:

A. Red
B. Blue
C. Green

<ol type ="I">

<li>Red</li>
<li> Blue</li>
<li>Green </li>

</ol>

Result:

I. Red
II. Blue
III. Green

NOTE: The type attribute for Unordered List is not used in HTML5.
CSS must be used to configure these attributes by using the property list-style-type.
Click here for an example.

<ul type ="circle">

<li>Red</li>
<li> Blue</li>
<li>Green </li>

</ul>

Result:

○Red
○Blue
○Green

The following is a list of available values for the type attribute of the Ordered List Element:

<ol type="A"> : It displays Uppercase letters in order

  1. Red
  2. Green
  3. Blue

<ol type="a"> : It displays lowercase letters in order

  1. Red
  2. Green
  3. Blue


<ol type="I"> : Uppercase roman numerals are displayed in order

  1. Red
  2. Green
  3. Blue


<ol type="i">: Lowercase roman numerals are displayed in order

  1. Red
  2. Green
  3. Blue

The following is a list of available values for the type attribute of the Unordered Element:

NOTE: The type attribute for Unordered List is not used in HTML5.
CSS must be used to configure these attributes by using the property list-style-type.
Click here for an example.

<ul type="disc"> : It displays discs in the list

This is the default attribute type. You do not need to add the type="disc"

  • ●Red
  • ●Green
  • ●Blue

<ul type="square"> : It displays square bullets in the list

  • ■Red
  • ■Green
  • ■Blue


<ul type="circle"> : Uppercase roman numerals are displayed in the list

  • ○Red
  • ○Green
  • ○Blue

 

Task:

  1. Create and save the HTML with Dreamweaver and name it "YourName_list_practice2.html"
  2. Create 4 different Ordered Lists that lists 7 days of the week.
    1. Each ordered list will have different type value at the starting tag <ol> ('A',' a',' I','i').
  3. Create 3 different Unordered Lists that lists the following: Cyan, Magenta, Yellow, Black
    1. Each unordered list will have a different type at the starting <ul> tags ('disc', 'square', 'circle')
  4. Save all changes and test your HTML file. Then, upload it to the google classroom