Ch 2 · Lists, Links & Images · HTML
Topic 2 of 3 in HTML — Build Your First Web Page — 4 lessons.
Lists
Group related items with lists: <ul> for bullets and <ol> for numbers — each item goes in an <li>. Lists make pages easier to scan, whether you are showing ingredients, steps or a menu. In the example, a heading introduces an unordered list of three favourite foods, so the browser shows bullet points. Try swapping <ul> for <ol> and watch the bullets turn into numbers.
Links & Images
Links use <a href="…"> to point somewhere. Images use <img src="…" alt="…">. The alt text describes the image for screen readers.
Lists Inside Lists
Sometimes a list item has its own smaller list, like a to-do list where one job has several parts. HTML lets you put a whole new list inside an <li>. This is called nesting, and the browser indents the inner list so the structure is clear.
Where Links Can Go
The href in a link can point to more than another website. The same <a> tag can jump to a part of the current page, open a new tab, or start an email.