0
0
HTMLmarkup~5 mins

List use cases in layout in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Lists help organize content clearly on a webpage. They make information easy to read and understand.

To show steps in a process, like a recipe or instructions.
To display features or benefits of a product.
To create navigation menus for websites.
To list items like articles, links, or resources.
To group related information visually.
Syntax
HTML
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<ul> creates a bulleted list.

<ol> creates a numbered list.

Examples
This shows a simple bulleted list of fruits.
HTML
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
This shows a numbered list for morning routine steps.
HTML
<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>
Using a list inside a navigation menu to organize links.
HTML
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
Sample Program

This webpage uses lists to organize navigation links, product features, steps to use, and helpful resources. Lists make the content easy to scan and understand.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Use Cases</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      line-height: 1.5;
    }
    nav ul {
      list-style-type: none;
      padding: 0;
      display: flex;
      gap: 1rem;
      background-color: #f0f0f0;
      border-radius: 0.5rem;
    }
    nav ul li a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }
    nav ul li a:hover,
    nav ul li a:focus {
      color: #007acc;
      outline: none;
    }
    section {
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#features">Features</a></li>
        <li><a href="#steps">Steps</a></li>
        <li><a href="#resources">Resources</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="features">
      <h2>Product Features</h2>
      <ul>
        <li>Easy to use</li>
        <li>Fast performance</li>
        <li>Secure and reliable</li>
      </ul>
    </section>
    <section id="steps">
      <h2>How to Use</h2>
      <ol>
        <li>Sign up for an account</li>
        <li>Choose your plan</li>
        <li>Start using the service</li>
      </ol>
    </section>
    <section id="resources">
      <h2>Helpful Resources</h2>
      <ul>
        <li><a href="#tutorials">Tutorials</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#support">Support</a></li>
      </ul>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 Example Company</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Lists improve readability and structure on webpages.

Use <ul> for unordered (bulleted) lists and <ol> for ordered (numbered) lists.

Lists inside navigation help screen readers understand the menu.

Summary

Lists organize information clearly and simply.

Use bulleted lists for items without order, numbered lists for steps or sequences.

Lists improve accessibility and user experience on websites.