Reference · module 3
Lists and page structure
Everything this module explains, on one page.
Lists
Make bulleted and numbered lists.
- A bulleted list is <ul>, an unordered list, and every item inside is an <li>. The browser draws the bullets; you only write the items.
- When order matters, like recipe steps, use <ol>, an ordered list. Its <li> items are numbered 1, 2, 3 automatically, so adding a step renumbers everything.
- A list can sit inside a list item: <li>Fruit <ul><li>Apple</li></ul></li>. The inner list goes inside the <li>, never directly inside the outer <ul>.
The mistake you are about to make
<ul>Milk</ul>
<ul><li>Milk</li></ul>
The ul already says it is a list, so wrapping each item seems redundant. Only li elements are list items; bare text inside ul is invalid.
The page skeleton
Write the basic structure every HTML page shares.
- Every page starts with <!DOCTYPE html>, which tells the browser to use modern HTML. Then comes <html lang="en">, which wraps everything and names the language.
- Inside html are two parts. <head> holds information about the page — its title, character set, styles — and is not shown. <body> holds everything visible.
- <title> goes in the head and is the name shown on the browser tab and in search results. It is different from the <h1> heading on the page itself.
The mistake you are about to make
<body><title>Shop</title></body>
<head><title>Shop</title></head>
The title is text about the page, so it seems to belong with the page content. It is metadata for the tab and search results, so it lives in head.
Semantic sections
Use header, nav, main and footer instead of anonymous boxes.
- Semantic elements name the role of a part of the page: <header> for the top area, <nav> for navigation links, <main> for the main content, <footer> for the bottom.
- They look like plain boxes, but screen readers and search engines understand them. A blind user can jump straight to main and skip the menu.
- <div> is a box with no meaning, used only for grouping and styling when no semantic element fits. A page built only from divs works but says nothing about itself.
The mistake you are about to make
<div class="menu">
<nav>
div with a clear class name looks just as descriptive. The class is for styling and means nothing to a screen reader; nav tells it this is navigation.