Lists in HTML

Create ordered, unordered, and description lists to organize content in Alex's portfolio projects.

Lists organize information. Think of a shopping list or recipe steps. HTML has three types of lists — each for different needs. Alex wants to add a skills list to their portfolio and organize project features.

List Tag Anatomy

Every list needs a container and items inside. Here's how list tags work:

    <ul>
    content
    </ul>
  

Opening tag → List items go here → Closing tag

The <ul> tag means "unordered list" — like bullet points. Inside, each <li> tag creates one list item.

Unordered Lists

Unordered lists show items with bullet points. Perfect for Alex's skills section where order doesn't matter.

<!-- Alex's skills section on their homepage -->
<h2>My Skills</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>React</li>
</ul>

What just happened?

The browser added bullet points automatically. Each <li> became a separate line. Try this: add more skills like "Python" or "Node.js".

Nested Lists

You can put lists inside lists. Alex wants to organize skills by category:

<!-- Alex's detailed skills with categories -->
<h2>Technical Skills</h2>
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Notice the browser changes bullet styles automatically. Main items get solid circles. Nested items get hollow circles or squares.

Ordered Lists

Ordered lists use numbers instead of bullets. Perfect for step-by-step instructions or rankings. Alex wants to list project development steps.

<!-- Alex's project development process -->
<h2>My Development Process</h2>
<ol>
  <li>Plan the project requirements</li>
  <li>Create wireframes and mockups</li>
  <li>Write clean HTML structure</li>
  <li>Add CSS styling</li>
  <li>Test across different browsers</li>
</ol>

What just happened?

The <ol> tag created numbered steps automatically. Each <li> got the next number. Try this: add "Deploy to web hosting" as step 6.

Ordered List Attributes

You can control numbering with attributes. The start attribute picks where numbers begin. The type attribute changes number style.

<!-- Alex's advanced project checklist starting from step 5 -->
<h3>Final Steps</h3>
<ol start="5" type="A">
  <li>Run accessibility tests</li>
  <li>Optimize for mobile devices</li>
  <li>Launch the website</li>
</ol>

The type="A" used letters instead of numbers. Other options: type="a" for lowercase, type="I" for Roman numerals, type="i" for lowercase Roman.

Description Lists

Description lists pair terms with definitions. Like a glossary or FAQ section. Alex wants to explain web development terms on their blog. A description list uses three tags: <dl> wraps everything, <dt> holds the term, and <dd> holds the definition.

<!-- Alex's web development glossary -->
<h2>Web Dev Terms</h2>
<dl>
  <dt>HTML</dt>
  <dd>Markup language that structures web content</dd>
  
  <dt>CSS</dt>
  <dd>Stylesheet language that controls visual appearance</dd>
  
  <dt>JavaScript</dt>
  <dd>Programming language that adds interactivity</dd>
</dl>

What just happened?

Terms appeared in bold. Definitions got indented automatically. The browser knows this is a glossary format. Try this: add "API" with definition "Interface that lets programs talk to each other".

Lists in Real Websites

Major websites use lists everywhere. GitHub uses lists for repository files. Twitter uses lists for social media feeds. Apple uses lists for product features. Navigation menus are actually lists too. Here's how Alex might create a complete project showcase:

<!-- Alex's featured project with all list types -->
<h2>Weather App Project</h2>

<h3>Features</h3>
<ul>
  <li>Current weather display</li>
  <li>5-day forecast</li>
  <li>Location search</li>
</ul>

<h3>Build Steps</h3>
<ol>
  <li>Design the user interface</li>
  <li>Connect to weather API</li>
  <li>Add responsive styling</li>
</ol>

<h3>Technologies</h3>
<dl>
  <dt>Frontend</dt>
  <dd>React with TypeScript</dd>
  
  <dt>API</dt>
  <dd>OpenWeatherMap service</dd>
</dl>

Each list type serves a specific purpose. Features don't need order — use <ul>. Build steps follow sequence — use <ol>. Technology explanations need definitions — use <dl>.

Common List Mistakes

Missing List Container

Writing <li>Item</li> without <ul> or <ol> wrapper breaks the structure. Always wrap list items in a container.

Wrong Content in Lists

Only <li> tags can be direct children of <ul> or <ol>. Don't put text or other tags directly inside.

Pro tip: Screen readers announce list length to users. Proper list markup helps visually impaired people navigate your content.

Lists organize your content and make it scannable. Users love bullet points and numbered steps. They break up long paragraphs and highlight key information. Choose unordered for features, ordered for processes, and description for explanations.

Quiz

Next: Tables in HTML

Learn to organize data in rows and columns with proper table structure and accessibility features.

← Previous Course Index Next →