• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal○Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms●Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
○Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
○Embedding Video○Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags○Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz

Exercise: Build a Crew member Loadout

HTML Lists

Mission

The Meridian crew is packing for a night rescue. The launch sequence must be numbered, the rescue kit needs bullets, and two mission terms need short explanations.

What you'll build

A page with three list types: numbered launch steps, a bulleted rescue kit, and a glossary pairing mission terms with their meanings.

Choose a list by its job

The preceding demo's launch steps used <ol> because sequence mattered. Its kit used <ul> because the items can be packed in any order. A <dl> pairs each <dt> term with its <dd> description. Each ordered or unordered list item goes in an <li>.

For a different brief, a supply list could look like this:

html
<ul>
  <li>Water flask</li>
  <li>Field notebook</li>
</ul>
<dl>
  <dt>Relay</dt><dd>Passes a message to the bridge.</dd>
</dl>

Checkpoint

Preview the page. The setup steps should be numbered, the supplies should have bullets, and each term in the description list should sit next to its explanation. If the sequence is not numbered, inspect the outer list tag first.

Your Task

Build a page that uses all three list types:

  1. Add an <ol> to the page.
  2. Inside your <ol>, add at least 3 <li> steps.
  3. Add a <ul> to the page.
  4. Inside your <ul>, add at least 3 <li> items.
  5. Add a <dl> to the page.
  6. Inside your <dl>, add at least 2 <dt> terms, each followed by a matching <dd> definition.

Payoff

The crew now has steps, supplies, and short explanations in the right list shapes.

Hint 1
1 / 4
HINT 1

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

HINT 2

Each item in an ordered or unordered list is wrapped in an <li> tag.

HINT 3

For a description list, use <dl> with <dt> for the term and <dd> for the description.

HINT 4

Lists can be nested: put a <ul> or <ol> inside an <li> to create sub-lists.

Loading editor…
READY
intercourses
html