HTML_lists

HTML Lists

With HTML lists, you can group a set of items in lists. There are two types of list, 1)unordered list and 2)ordered list.

Unordered HTML List

With <ul> tag, you can create unordered list. There are <li> tag inside <ul> tag.

 

<ul>   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ul>

 

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. 

<ol>   <li>Coffee</li>   <li>Beer</li>   <li>Water</li> </ol>

 

 

HTML Description Lists

There is description list. It is a list for term what describe each term.

The <dl> tag specifies the description list, the <dt> tag defines the term(name), and the <dd> tag describes each term:

<dl>   <dt>coffee</dt>   <dd>- black one</dd>   <dt>Milk</dt>   <dd>- white one</dd> </dl>

 

 

<dl style="border:1px solid">   <dt style="border:1px solid">coffee</dt>   <dd>- black one</dd>   <dt style="border:1px solid">Milk</dt>   <dd>- white one</dd> </dl>

 

 

HTML Unordered Lists

The HTML <ul> tag specifies an unordered (bulleted) list.

 

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list is displayed with bullet marks in front by default. And you already know how it looks.

 

Unordered HTML List - List Item Marker

The CSS ‘list-style-type’ property can specifies the style of the list item marker. There are four value types.

 

• Disc value : bullet marker by default
• Circle value : circle marker
• Square value : square marker
• None : not marked

 

<ul style="list-style-type:circle;">   <li>Coffee</li>   <li>Coffee</li>   <li>Coffee</li> </ul>

<ul style="list-style-type:square;">   <li>Coffee</li>   <li>Coffee</li>   <li>Coffee</li> </ul>

<ul style="list-style-type:none;">   <li>Coffee</li>   <li>Coffee</li>   <li>Coffee</li> </ul>

 

Nested HTML Lists

Lists can be nested. It means lists can be located inside lists.

<ul> Brand   <li></li>   <li>Chanel <ul>   <li>Bag</li>   <li>Perfume</li> </ul>   </li>   <li>Hermes</li> </ul>

 

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, for creating a navigation menu.

 

<ul>   <li><a href="#home">Home</a></li>   <li><a href="#collection">Collection</a></li>   <li><a href="#brand">Brand</a></li>   <li><a href="#blog">Blog</a></li> </ul>

Still the lists are vertical.

<style> ul {   list-style-type: none;   margin: 0;   padding: 0;   overflow: hidden;   background-color: #333333; } </style>

 

In CSS, I added styles to ‘ul’ tag with list-style-type, margin, padding, overflow and background-color. With overflow, you can choose display option. 

 

Padding is the space between border and content. And margin is outside space of border.

 

Still it looks bad.

li {   float: left; }

 

Wow, the list is positioned horizontall because of ‘Float’ property.

 

li a {   display: block;   color: white;   text-align: center;   padding: 16px;   text-decoration: none; }

 

 

‘Display’ property has 4 types of values, 1)none, 2)inline, 3)black and 4)inline-block.

 

This is ‘inline’ value in display property.

 

This is ‘inline-block’ value in display property.

 

This is ‘none’ value in display property.

You see nothing because display property has ‘none’ value.

li a:hover {   background-color: #111111; }

 

If you hover a mouse on <a> tag and <li> tag, the background color of it changes to #111111. I think this is user-friendly option that user can easily know where the mouse is located.

 

 

HTML Ordered Lists

The HTML <ol> tag specifies an ordered list. An ordered list can be numerical or alphabetical.

 

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers by default.

<ol>   <li>Alpha</li>   <li>Bravo</li>   <li>Charlie</li> </ol>

 

 

There are 5 types.

• “1” numbers by default
• “A” for uppercase letters
• “a” for lowercase letter
• “I” for uppercase roman numbers
• “i” for lowercase roman numbers

 

<ol type="A">   <li>Alpha</li>   <li>Bravo</li>   <li>Charlie</li> </ol>

 

 

 

 

Control List Counting

You can count number with list and also you can decide the starting number for counting.

<ol start="20">   <li>Alpha</li>   <li>Bravo</li>   <li>Charlie</li> </ol>

 

Ordered list can be nested as well

<BODY> <ol>   <li>Coffee</li>   <li>Tea <ol type="i">   <li>Black</li>   <li>Brown</li> </ol>   </li>   <li>Milk</li> </ol> </BODY>

 

HTML Other Lists

HTML also supports description lists.

 

HTML Description Lists

A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

 

<d1>   <dt>Coffee</dt>   <dd>- black hot drink</dd>   <dt>Juice</dt>   <dd>- Yami</dd> </d1>