HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>HTML Lists Example</title>

  <style>

    ul { list-style-type: circle; }

    ol { list-style-type: upper-alpha; }

    dt { font-weight: bold; margin-top: 0.5rem; }

    dd { margin-left: 1.5rem; }

  </style>

</head>

<body>

  <h1>HTML Lists Example</h1>



  <h2>Unordered List</h2>

  <ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Cherry</li>

  </ul>



  <h2>Ordered List</h2>

  <ol>

    <li>First step</li>

    <li>Second step</li>

    <li>Third step</li>

  </ol>



  <h2>Nested List</h2>

  <ul>

    <li>Main item 1

      <ul>

        <li>Sub item 1.1</li>

        <li>Sub item 1.2</li>

      </ul>

    </li>

    <li>Main item 2</li>

  </ul>



  <h2>Definition List</h2>

  <dl>

    <dt>HTML</dt>

    <dd>A markup language for creating web pages.</dd>

    <dt>CSS</dt>

    <dd>A stylesheet language for designing web pages.</dd>

  </dl>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Lists — Complete Example