HTML5 LIST CHAPTER 12

12th TUTORIAL ON HTML LIST



HTML lists allow web authors to group a set of related items in lists.

<!DOCTYPE html>

<html>

<body>

 

<h2>An Unordered HTML List</h2>

 

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 

<h2>An Ordered HTML List</h2>

 

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

</body>

</html> 

 

OUTPUT

An Unordered HTML List

  • Coffee
  • Tea
  • Milk

An Ordered HTML List

1.    Coffee

2.    Tea

3.    Milk

 

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

</body>

</html>

OUTUPT

An unordered HTML list

  • Coffee
  • Tea
  • Milk

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value

Description

disc

Sets the list item marker to a bullet (default)

circle

Sets the list item marker to a circle

square

Sets the list item marker to a square

none

The list items will not be marked

Example - Disc

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List with Disc Bullets</h2>

 

<ul style="list-style-type:disc;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 

</body>

</html>


OUTPUT

Unordered List with Disc Bullets

  • Coffee
  • Tea
  • Milk

 

Example - Circle

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List with Circle Bullets</h2>

 

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

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 

</body>

</html>

OUTPUT

Unordered List with Circle Bullets

  • Coffee
  • Tea
  • Milk

Example – Square

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List with Square Bullets</h2>

 

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

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

 

</body>

</html>

 

OUTPUT

Unordered List with Square Bullets

  • Coffee
  • Tea
  • Milk

Example - None

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List without Bullets</h2>

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

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

</body>

</html>

 

OUTPUT

Unordered List without Bullets

  • Coffee
  • Tea
  • Milk

 

 

Ordered HTML List

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

The list items will be marked with numbers by default:

<!DOCTYPE html>

<html>

<body>

 

<h2>An ordered HTML list</h2>

 

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 

</body>

</html>

OUTPUT

An ordered HTML list

1.    Coffee

2.    Tea

3.    Milk

 

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type

Description

type="1"

The list items will be numbered with numbers (default)

type="A"

The list items will be numbered with uppercase letters

type="a"

The list items will be numbered with lowercase letters

type="I"

The list items will be numbered with uppercase roman numbers

type="i"

The list items will be numbered with lowercase roman numbers

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

</body>

</html>

OUTPUT

Ordered List with Numbers

1.    Coffee

2.    Tea

3.    Milk

 

Uppercase Letters:

<!DOCTYPE html>

<html>

<body>

 

<h2>Ordered List with Letters</h2>

 

<ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 

</body>

</html>

OUTPUT

Ordered List with Letters

A.   Coffee

B.   Tea

C.   Milk

 

Lowercase Letters:

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Ordered List with Lowercase Letters</h2>

 

<ol type="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 

</body>

</html>

 

OUTPUT

 

Ordered List with Lowercase Letters

a.     Coffee

b.    Tea

c.     Milk

 

 

Uppercase Roman Numbers:

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

</body>

</html>

 

OUTPUT

 

Ordered List with Roman Numbers

     I.         Coffee

   II.         Tea

 III.         Milk

 

Lowercase Roman Numbers:

 

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

</body>

</html>


OUTPUT

 

Ordered List with Lowercase Roman Numbers

      i.         Coffee

    ii.         Tea

  iii.         Milk

 

 

 

HTML Description Lists

HTML also supports 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:

<!DOCTYPE html>

<html>

<body>

 

<h2>A Description List</h2>

 

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

 

</body>

</html>

OUTPUT

A Description List

Coffee

- black hot drink

Milk

- white cold drink

 

Nested HTML Lists

List can be nested (lists inside lists)

<!DOCTYPE html>

<html>

<body>

<h2>A Nested List</h2>

<p>List can be nested (lists inside lists):</p>

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

<li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

</body>

</html>

OUTPUT

A Nested List

List can be nested (lists inside lists):

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Note: List items can contain new list, and other HTML elements, like images and links, etc.

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

<!DOCTYPE html>

<html>

<body>

<h2>The start attribute</h2><p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:</p>

 

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

<ol type="I" start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

</body>

</html>

OUTPUT

The start attribute

By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:

50. Coffee

51. Tea

52. Milk

    L.         Coffee

 LI.         Tea

LII.         Milk

 

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

 overflow: hidden;

  background-color: #333333;

}

li {

  float: left;

}

li a {

  display: block;

  color: white;

  text-align: center;

  padding: 16px;

  text-decoration: none;

}

li a:hover {

  background-color: #111111;

}</style>

</head>

<body>

<h2>Navigation Menu</h2>

<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li><a href="#contact">Contact</a></li>

  <li><a href="#about">About</a></li>

</ul>

 

</body>

</html>

OUTPUT

Navigation Menu

 

In this example, we use CSS to style the list horizontally, to create a navigation menu:

 

Home  News   Contact  About

 

Comments

Post a Comment

Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more