HTML from Scratch: Creating Lists in HTML. Lesson #8 Overcod.net

HTML from Scratch: Creating Lists in HTML. Lesson #8

Let’s continue learning the basics of HTML.
In this lesson, I will show you how to create unordered and ordered lists. Don’t skip this lesson! Once you know how to create lists, you’ll be able to beautifully format web pages, like setting up a website menu.

Creating an Unordered List in HTML
To create an unordered list on an HTML page, you need to use the following tags:

<ul>
  <li>Text #1</li>
  <li>Text #2</li>
</ul>

Explanation:
<ul></ul> — defines an unordered list.
<li></li> — defines list items within the unordered list.

Example:

<html>
<head>
  <title>Creating an Unordered List in HTML - overcod.net</title>
</head>
<body>
  <ul>
    <li>Text #1</li>
    <li>Text #2</li>
  </ul>
</body>
</html>

The result will look like this:

Text #1
Text #2

You’ll see filled circles before each list item.

Unordered List Attributes
If you add the “type” attribute with the value “circle” to the <ul> tag, you’ll see empty circles instead of filled ones:

<ul type="circle">

Example:

<html>
<head>
  <title>Creating an Unordered List in HTML - overcod.net</title>
</head>
<body>
  <ul type="circle">
    <li>Text #1</li>
    <li>Text #2</li>
  </ul>
</body>
</html>

The result will look like this:
○ Text #1
○ Text #2

If you add the “type” attribute with the value “square”, you’ll see filled squares instead of circles:

<ul type="square">

Example:

<html>
<head>
  <title>Creating an Unordered List in HTML - overcod.net</title>
</head>
<body>
  <ul type="square">
    <li>Text #1</li>
    <li>Text #2</li>
  </ul>
</body>
</html>

The result will look like this:
▪ Text #1
▪ Text #2

Creating an Unordered List with Nested Items
You can create more complex lists by adding nested lists. To do this, add a new list inside any of the list items.

Example:

<html>
<head>
  <title>Creating an Unordered List in HTML - overcod.net</title>
</head>
<body>
  <ul>
    <li>Text #1</li>
    <li>Text #2
      <ul>
        <li>Text #3</li>
        <li>Text #4</li>
      </ul>
    </li>
    <li>Text #5</li>
  </ul>
</body>
</html>

The result will look like this:

Text #1
Text #2
- Text #3
- Text #4
Text #5

Creating an Ordered List in HTML
To create an ordered list on an HTML page, use the following tags:

<ol>
  <li>Text #1</li>
  <li>Text #2</li>
</ol>

Explanation:
<ol></ol> — defines an ordered list.
<li></li> — defines list items within the ordered list.

Example:

<html>
<head>
  <title>Creating an Ordered List in HTML - overcod.net</title>
</head>
<body>
  <ol>
    <li>Text #1</li>
    <li>Text #2</li>
  </ol>
</body>
</html>

The result will look like this:

Text #1
Text #2

Ordered List Attributes
If you add the “start” attribute with a value like “5”, the numbering will start from that number:

<ol start="5">

Example:

<html>
<head>
  <title>Creating an Ordered List in HTML - overcod.net</title>
</head>
<body>
  <ol start="5">
    <li>Text #1</li>
    <li>Text #2</li>
  </ol>
</body>
</html>

The result will look like this:
5. Text #1
6. Text #2

If you add the “type” attribute with the value “A”, you’ll see uppercase letters instead of numbers:

<ol type="A">

Example:

<html>
<head>
  <title>Creating an Ordered List in HTML - overcod.net</title>
</head>
<body>
  <ol type="A">
    <li>Text #1</li>
    <li>Text #2</li>
  </ol>
</body>
</html>

The result will look like this:
A. Text #1
B. Text #2

If you add the “type” attribute with the value “a”, you’ll see lowercase letters instead:

<ol type="a">

Example:

<html>
<head>
  <title>Creating an Ordered List in HTML - overcod.net</title>
</head>
<body>
  <ol type="a">
    <li>Text #1</li>
    <li>Text #2</li>
  </ol>
</body>
</html>

The result will look like this:
a. Text #1
b. Text #2

Creating a Definition List
To create a definition list on an HTML page, use the following tags:

<dl>
  <dt>1. HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>2. CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Explanation:
<dl></dl> — defines a definition list.
<dt></dt> — defines the term.
<dd></dd> — defines the definition of the term.

Example:

<html>
<head>
  <title>Creating a Definition List in HTML - overcod.net</title>
</head>
<body>
  <dl>
    <dt>1. HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>2. CSS</dt>
    <dd>Cascading Style Sheets</dd>
  </dl>
</body>
</html>

The result will look like this:

That’s all for today! Subscribe to my blog for updates! Don’t miss new lessons on the basics of HTML.
Good luck!

HTML from Scratch: Creating Lists in HTML. Lesson #8

Leave a Reply Cancel reply

Latest posts in this category

Popular posts