HTML CODES & EXAMPLES

HTML Lists

Learn how to create ordered lists, unordered lists, nested lists, multi-level lists and description lists using HTML.

What are HTML Lists?

Organize information clearly

HTML lists are used to display a collection of related items. Lists are commonly used for navigation menus, course modules, features, instructions, categories and other structured content.

HTML provides three main types of lists: unordered lists, ordered lists and description lists.

Unordered List

Create a list using bullet points

An unordered list is created with the <ul> element. Each item is placed inside an <li> element.

unordered-list.html

<ul>
  <li>Computer Fundamentals</li>
  <li>Microsoft Word</li>
  <li>Microsoft Excel</li>
  <li>Microsoft PowerPoint</li>
</ul>

Ordered List

Create a numbered list

An ordered list is created using the <ol> element. Items are automatically numbered.

ordered-list.html

<ol>
  <li>Create an Account</li>
  <li>Select a Course</li>
  <li>Complete Payment</li>
  <li>Start Learning</li>
</ol>

List Items

Understanding the li element

The <li> element represents an individual item inside an ordered or unordered list.

list-item.html

<ul>

  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>

</ul>

Ordered List Types

Change the numbering style

list-types.html

<ol type="1">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>


<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>


<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>


<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>


<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Start Attribute

Start numbering from a specific value

start-list.html

<ol start="5">

  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>

</ol>

Result: The list starts from number 5 instead of number 1.

Reversed List

Display ordered items in reverse order

reversed-list.html

<ol reversed>

  <li>Final Step</li>
  <li>Second Step</li>
  <li>First Step</li>

</ol>

Nested Lists

Create a list inside another list

nested-list.html

<ul>

  <li>
    Computer Courses

    <ul>

      <li>CCA</li>
      <li>DCA</li>
      <li>ADCA</li>

    </ul>

  </li>

</ul>

Multi-Level List

Create multiple levels of content

multi-level-list.html

<ul>

  <li>
    Class 10

    <ul>

      <li>
        Mathematics

        <ul>
          <li>Chapter 1</li>
          <li>Chapter 2</li>
          <li>Chapter 3</li>
        </ul>

      </li>

      <li>
        Science

        <ul>
          <li>Physics</li>
          <li>Chemistry</li>
          <li>Biology</li>
        </ul>

      </li>

    </ul>

  </li>

</ul>

Description List

Create terms and their descriptions

A description list uses <dl> for the list, <dt> for the term and <dd> for its description.

description-list.html

<dl>

  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web pages</dd>

</dl>

Navigation Menu with List

Use lists to create website navigation

navigation-list.html

<nav>

  <ul>

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

    <li>
      <a href="/about-us/">About Us</a>
    </li>

    <li>
      <a href="/courses/">Courses</a>
    </li>

    <li>
      <a href="/shop/">Shop</a>
    </li>

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

  </ul>

</nav>

Styled List with CSS

Create a modern list design

styled-list.html

<ul class="course-list">

  <li>Computer Fundamentals</li>
  <li>Microsoft Word</li>
  <li>Microsoft Excel</li>
  <li>Microsoft PowerPoint</li>

</ul>


<style>

.course-list{
  list-style:none;
  padding:0;
}

.course-list li{
  padding:14px 18px;
  margin-bottom:8px;
  background:#f3f7fc;
  border-left:4px solid #1769d5;
  border-radius:8px;
}

</style>

Custom List Marker

Change the appearance of bullet points

custom-marker.html

<ul class="custom-list">

  <li>Live Classes</li>
  <li>Study Material</li>
  <li>Online Tests</li>
  <li>Certificates</li>

</ul>


<style>

.custom-list{
  list-style:none;
  padding:0;
}

.custom-list li{
  margin:10px 0;
}

.custom-list li::before{
  content:"✓";
  margin-right:10px;
  color:#1769d5;
  font-weight:bold;
}

</style>

Course Category List

Practical education website example

course-categories.html

<ul>

  <li>
    Computer Courses

    <ul>
      <li>CCA</li>
      <li>DCA</li>
      <li>ADCA</li>
      <li>PGDCA</li>
    </ul>

  </li>


  <li>
    Accounting Courses

    <ul>
      <li>Tally Prime</li>
      <li>Tally with GST</li>
    </ul>

  </li>


  <li>
    Professional Courses

    <ul>
      <li>Digital Marketing</li>
      <li>Web Designing</li>
      <li>Graphic Designing</li>
    </ul>

  </li>

</ul>

Important List Attributes

Common attributes and properties

<ul>

Creates unordered list

<ul>

<ol>

Creates ordered list

<ol>

<li>

Creates list item

<dl>

Creates description list

<dl>

<dt>

Defines a description term

<dd>

Defines term description

<dd>Language</dd>

type

Changes ordered list numbering

type=”A”

start

Sets starting number

start=”5″

reversed

Reverses ordered numbering

reversed

Live HTML Example

Run the complete HTML lists example

LIVE PREVIEW

Practice Task

Test your HTML lists knowledge

🎯 Create a Course List

Create a webpage containing a structured list of courses.

Create an unordered list of computer courses.
Create an ordered list of learning steps.
Create a nested list containing course categories.
Create a description list for HTML, CSS and JavaScript.
Create a navigation menu using an unordered list.
Style the list using CSS.

`;document.getElementById( "sncecListsPreview" ).srcdoc = code;}/* ========================= AUTO RUN ========================= */document.addEventListener( "DOMContentLoaded", function(){sncecListsRun();} );

SNCEC PORTAL