HTML Lists

In this tutorial you’ll learn how to create different types of Lists in HTML.

HTML Lists Explained

HTML lists enable you to create well formatted, semantic content in a list style format. You have three different options in terms of the types of lists you can make.

• Unordered HTML List – The style used for this actual list, displays your list typically with a small circle or bullet icon for each list item but that can be changed via CSS
• Ordered HTML List – Is a numbered list that uses a 1,2,3 type format but can also use Roman Numerals
• Description HTML List – Used to create a list of Terms and their Descriptions

HTML List Examples:

Here are the three types of lists you can create with HTML.

HTML Unordered List Example

To create an Unordered List, you would first need the start tag <ul> followed by as many list items represented by the opening tag <li> followed by your list item in plain text, then the closing tag </li> and then repeat for each list item. Then you close the Unordered List with the closing tag </ul>.

<ul>
  <li><strong>HTML </strong>- Hyper Text Markup Language</li>
  <li><strong>CSS </strong>- Cascading Style Sheets</li>
  <li><strong>JavaScript </strong>- Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS</li>
  <li><strong>PHP </strong>- Is a server side programming language</li>
  <li><strong>MySQL </strong>- Is a Relational Database Management System</li>
  <li><strong>Linux </strong>- The most widely used operating system for websites</li>
</ul>

Results

• HTML – Hyper Text Markup Language
• CSS – Cascading Style Sheets
• JavaScript – Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS
• PHP – Is a server side programming language
• MySQL – Is a Relational Database Management System
• Linux – The most widely used operating system for websites

HTML Ordered List Example

To create an Ordered List, you would first need the start tag <ol> followed by as many list items represented by the opening tag <li> followed by your list item in plain text, then the closing tag </li> and then repeat for each list item. Then you close the Ordered List with the closing tag </ol>.

<ol>
  <li><strong>HTML </strong>- Hyper Text Markup Language</li>
  <li><strong>CSS </strong>- Cascading Style Sheets</li>
  <li><strong>JavaScript </strong>- Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS</li>
  <li><strong>PHP </strong>- Is a server side programming language</li>
  <li><strong>MySQL </strong>- Is a Relational Database Management System</li>
  <li><strong>Linux </strong>- The most widely used operating system for websites</li>
</ol>

Results

1. HTML – Hyper Text Markup Language
2. CSS – Cascading Style Sheets
3. JavaScript – Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS
4. PHP – Is a server side programming language
5. MySQL – Is a Relational Database Management System
6. Linux – The most widely used operating system for websites

HTML Description List Example

To create an HTML Description List, you would first need the start tag <dl> followed by as many Term and Description list items represented by the opening tag <dt> followed by your term name, then the closing tag </dt> and then the opening <dd> then the text which is what describes the term and then the closing tag </dd> repeat for each Term and Description list item. Then you close the Description List with the closing tag </dl>.

<dl>
  <dt>HTML</dt>
  <dd>- Hyper Text Markup Language</dd>
  <dt>CSS</dt>
  <dd>- Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>- Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS</dd>
  <dt>PHP</dt>
  <dd>- Is a server side programming language</dd>
  <dt>MySQL</dt>
  <dd>- Is a Relational Database Management System</dd>
  <dt>Linux</dt>
  <dd>- The most widely used operating system for websites</dd>
</dl>

Results

HTML

– Hyper Text Markup Language

CSS

– Cascading Style Sheets

JavaScript

– Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS

PHP

– Is a server side programming language

MySQL

– Is a Relational Database Management System

Linux

– The most widely used operating system for websites

You Can Nest Your HTML Lists

<ol>
  <li><strong>HTML </strong>- Hyper Text Markup Language
      <ul>
          <li>HTML 3.2 - 1997</li>
          <li>HTML 4.0.1 - 1999</li>
          <li>XHTML - 2000</li>
          <li>HTML 5 - 2014</li>
      </ul>
  </li>
  <li><strong>CSS </strong>- Cascading Style Sheets</li>
  <li><strong>JavaScript </strong>- Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS</li>
  <li><strong>PHP </strong>- Is a server side programming language</li>
  <li><strong>MySQL </strong>- Is a Relational Database Management System</li>
  <li><strong>Linux </strong>- The most widely used operating system for websites</li>
</ol>

Results

1. HTML – Hyper Text Markup Language
   • HTML 3.2 – 1997
   • HTML 4.0.1 – 1999
   • XHTML – 2000
   • HTML 5 – 2014
2. CSS – Cascading Style Sheets
3. JavaScript – Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS
4. PHP – Is a server side programming language
5. MySQL – Is a Relational Database Management System
6. Linux – The most widely used operating system for websites

HTML Lists Recap

Creating lists with HTML is really easy and you have options on the type of list you can create with an Unordered List, Ordered List and a Description List.

Hopefully you enjoyed this HTML List Tutorial and make sure to checkout other HTML Tutorials here on PixemWeb. Happy Coding.

Share This On: