coding180 icon

Coding180

HTML Element: Nested List - Example

HTML Element: Nested List - Example

Tutorials > HTML > HTML List Elements


The HTML language allows us to insert a list inside another. 
Lists of different types can be nested, for example we can have an unordered list and one of the items can be an ordered list.

For the nesting of lists, we only have to be careful in the correct opening and closing of the tags.

We will implement a page that lists a series of countries in an ordered list and then in each country we will have a list of hyperlinks of newspapers from that country:

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
    <meta charset="UTF-8">
</head>

<body>
    <ol>
        <li>Argentina
            <ul>
                <li><a href="http://www.lanacion.com.ar">La Nacion</a></li>
                <li><a href="http://www.clarin.com.ar">Clarin</a></li>
                <li><a href="http://www.pagina12.com.ar">Pagina 12</a></li>
            </ul>
        </li>
        <li>Spain
            <ul>
                <li><a href="http://www.elpais.es">El Paris Digital</a></li>
                <li><a href="http://www.abc.es">ABC</a></li>
                <li><a href="http://www.elmundo.es">El Mundo</a></li>
            </ul>
        </li>
        <li>Mexico
            <ul>
                <li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
                <li><a href="http://www.el-universal.com.mx">El Universal</a></li>
            </ul>
        </li>
    </ol>
</body>

</html>

The result in the browser is:

HTML Nested list example

A list can be inserted into a li element as we can see:

<li>Argentina
    <ul>
        <li><a href="http://www.lanacion.com.ar">La Nacion</a></li>
        <li><a href="http://www.clarin.com.ar">Clarin</a></li>
        <li><a href="http://www.pagina12.com.ar">Pagina 12</a></li>
    </ul>
</li>

Indentation

The white space that we leave on the left is called indentation and is intended to make the HTML code more readable.

Indentation allows us to easily identify where an HTML markup begins and where it ends.


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel