Monday, November 5, 2018

HTML Lists

            No comments

Example

An Unordered List:

  • Item
  • Item
  • Item
  • Item

An Ordered List:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

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:

Example

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

Unordered HTML List - Choose List Item Marker

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


ValueDescription

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:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example:

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


Example:

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

Example:

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

Example:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ordered HTML List - The Type Attribute

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

TypeDescription
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
Example:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Example :UpperCase Letters

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Example : Lowercase Letters

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Example UpperCase Roman Number

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Nested HTML Lists

List can be nested (lists inside lists):

Example:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

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:

Example:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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:

Example :


<!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>

<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>


Chapter Summary

  • Use the HTML <ul> element to define an unordered list
  • Use the CSS list-style-type property to define the list item marker
  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to describe the term in a description list
  • Lists can be nested inside lists
  • List items can contain other HTML elements
  • Use the CSS property float:left or display:inline to display a list horizontally



HTML List Tags

TagDescription
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list


Share:

Related Posts:

0 comments:

Post a Comment

Contact Form

Name

Email *

Message *

Popular Posts

  • JavaScript Date Formats
    JavaScript Date Input There are generally 3 types of JavaScript date input formats: TypeExample ISO Date "2015-03-25" (The Int...
  • C# - Constants and Literals
    The constants refer to fixed values that the program may not alter during its execution. These fixed values are also called literals. Const...
  • SQL CREATE TABLE Statement
    The SQL CREATE TABLE Statement The CREATE TABLE statement is used to create a new table in a database. CREATE   TABLE   table_name  (...
  • C# - Anonymous Methods
    We discussed that delegates are used to reference any methods that has the same signature as that of the delegate. In other words, you can ...
  • C# - Classes
    When you define a class, you define a blueprint for a data type. This does not actually define any data, but it does define what the class ...
  • PHP 5 Functions
    PHP User Defined Functions Besides the built-in PHP functions, we can create our own functions. A function is a block of statements tha...
  • SQL Select Top
    The SQL SELECT TOP Clause The SELECT TOP clause is used to specify the number of records to return. The SELECT TOP clause is useful on ...
  • HTML5 Migration
    Migration from HTML4 to HTML5 This chapter is entirely about how to  migrate  from  HTML4  to  HTML5 . This chapter demonstrates how to...

Blog Archive

Blog Archive

Hassan.mosmer1@gmail.com