freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 3.4 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Ordered and unordered lists

This lesson covers

  • Unordered lists with <ul>
  • Ordered lists with <ol> and its attributes
  • Nested lists
  • Description lists with <dl>

Short answer

Use <ul> for a list where order does not matter, like features or ingredients. Use <ol> when order matters, like steps or rankings. Each item goes in <li>. For terms and definitions, like an FAQ or glossary, use a description list with <dl>, <dt>, and <dd>.

Unordered lists

<ul>
  <li>Free Wi-Fi</li>
  <li>Pool with Mayon view</li>
  <li>Airport pickup</li>
</ul>

Browsers show bullets by default. Screen readers announce list, 3 items, which helps users know how much is coming.

Ordered lists

<ol>
  <li>Wash the rice.</li>
  <li>Add water to the first knuckle.</li>
  <li>Cook for 20 minutes.</li>
</ol>

Useful attributes:

  • start="5" begins counting at 5.
  • reversed counts down, nice for a top 10 list.
  • type="A" uses letters, type="i" uses Roman numerals.

Nested lists

Put a whole list inside an <li> to make sub items:

<ul>
  <li>Albay
    <ul>
      <li>Legazpi</li>
      <li>Daraga</li>
    </ul>
  </li>
  <li>Sorsogon</li>
</ul>

The inner list goes inside the li, before its closing tag. Only <li> may be a direct child of ul or ol.

Description lists

<dl>
  <dt>Laing</dt>
  <dd>Taro leaves cooked in coconut milk.</dd>
  <dt>Pinangat</dt>
  <dd>Laing wrapped in taro leaf parcels.</dd>
</dl>

dt is the term, dd is the description. Glossaries, FAQs, and spec sheets fit well. The Key terms section on this page is a description list.

Try it: build a recipe

Turn the ingredients into an unordered list and the steps into an ordered list.

Live preview

Quick quiz

1. Which list fits step by step instructions?
2. What may be a direct child of <ul>?
3. Which tag holds a term in a description list?
4. Where does a nested list go?

Common mistakes

  • Fake lists with dashes or br. Typed dashes are not real lists for screen readers.
  • Putting text directly in ul. Every item needs an li.
  • Using ol for unordered items. Numbers imply a sequence that does not exist.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<ul>
Unordered list.
<ol>
Ordered list.
<li>
List item.
Nested list
A list inside a list item.
<dl>
Description list of terms and details.

Questions beginners ask

How do I remove bullets?

Use CSS: list-style: none. Keep the ul for meaning.

Are navigation menus lists?

Often, yes. A menu is a list of links, as you will see in Lesson 4.4.

Can li hold paragraphs or images?

Yes. An li can contain most content.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.