New Posts
Home / Web Designing / HTML / How to Use HTML Lists.

How to Use HTML Lists.

How to Use HTML Lists.

HTML Lists are incredibly useful ways to organizing contents.  HTML gives us three different types of lists to use. However, contents need to be organized group to gather.

HTML lists

  1. Unordered lists.
  2. Ordered lists.
  3. Definition lists.
  • Ul means unordered list.
  • Ol means ordered list.
  • Li means list.

Unordered Lists.

 <!doctype html>

  <head>

  <title>Creating lists</title>

  </head>

  <body>

    <h1>HTML’s List </h1>

    <h2>Creating lists</h2>

    <p>Let’s examine how to create lists in HTML</p>

    <h3>Unordered lists</h3>

    <ul>

      <li>Item one    </li>

      <li>Item two    </li>

      <li>Item three

        <ul>

          <li>item 3.1    </li>

          <li>item 3.2    </li>

          <li>item 3.3    </li>

        </ul>

      </li>

      <li>item four </li>

    </ul>

  </body>

</html>

Ordered Lists.

Ordered list very similar to unordered list so much so, in fact, they share almost exactly the same syntax.

<!doctype html>

  <head>

  <title>Creating lists</title>

  </head>

  <body>

    <h1>HTML Essential Training</h1>

    <h2>Creating lists</h2>

    <p>Let’s examine how to create lists in HTML</p>

    <h3>Ordered lists</h3>

<ol>

      <li>Item one    </li>

      <li>Item two    </li>

      <li>Item three    </li>

       <li>item 3.1    </li>

          <li>item 3.2    </li>

          <li>item 3.3    </li>

        </ol>

  </body>

</html>

Definition Lists .

Description list which refers to the HTML5 definition list.

The list consists of two parts for each item term and description because the syntax is so flexible many authors do not really know fully understand what description list can do.

This really is the most semantic element in all of HTML.

  • Dl means definition list.
  • Dt means definition term.
  • Dd means definition description.

<!doctype html>

<head>

<title>Creating lists</title>

</head>

<body>

<h1>HTML Essential Training</h1>

<h2>Creating lists</h2>

<p>Let’s examine how to create lists in HTML</p>

<h3>Description lists</h3>

<h4>Basic description list</h4>

<dl>

  <dt>Unordered list </dt>

  <dd>Grouping of list items in no specific order</dd>

  <dt>Ordered list</dt>

  <dd>Grouping of list items in a specific order</dd>

  <dt>Description list</dt>

  <dd>Grouping of terms and descriptions</dd>

</dl>

<h4>Multiple terms</h4>

<dt>DL</dt>

<dt>Description list</dt>

<dt>Definition list</dt>

<dd>

  <p>List that groups content together by terms and descriptions. </p>

</dd>

<h4>Multiple descriptions</h4>

<dt>Course</dt>

<dd> HTML Essentail </dd>

<dt>Author</dt>

<dd> M.Ramzan </dd>

<dt>Producer</dt>

<dd> Mohamamd Haris </dd>

<dt>Technical Reviewers</dt>

<dd> Adil Khan </dd>

<dd>Mohamad Waseem</dd>

<dd> Ali Khan</dd>

</body>

</html>

 Exploring List Types in More Detail.

The Ol type has five values 1- A -a- I- i.

The Ul type has 3 values discs, circle, square.

<!doctype html>

<head>

<title>

        HTML Lists

</title>

</head>

<body>

<h1>

    HTML Lists

</h1>

<ol type=”a”>

<li> One </li>

<li> Two </li>

<ol start=”5″>

                <li> One </li>

                <li> Two </li>

                <ol type=”i” start=”7″>

                                <li> One </li>

                                <li> Two </li>

                                                <li> Three </li>

</ol>

<li> Three </li>

</ol>

<li> Three </li>

</ol>

<ul typ=”circle”>

<li> Four </li>

<li> Five </li>

<ul>

<li> Four </li>

<li> Five </li>

<ul>

<li> Four </li>

<li> Five </li>

<li> Six </li>

</ul>

<li> Six </li>

</ul>

<li> Six </li>

</ul>

<dl><dt> One </dt>

<dd> The first non-zero number. </dd><dt> Two </dt><dd> The number after one. </dd>

<dt> Three </dt>

<dd> To get ready. </dd>

<dt> Four </dt>

<dd> Now Go, Cat, Go! </dd>

</dl>

</body>

</html>

Noted: There is type attribute is used within ol and ul but ul is obsolete in HTML5 and I recommended that use ol and ul with CSS.

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

External Style Sheet

How to Use External Style Sheet. 

How to Use External Style Sheet. An External style sheet is simply texting files with …