Research/HTML

HTML_lists

RIEM 2023. 5. 2. 18:57

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>

 

 

 

저작자표시