Add images and lists
Organize related information and provide text alternatives for images.
- Create ordered and unordered lists
- Add an image with alt text
- Choose useful alternative text
Use <ul> when order does not matter and <ol> when the sequence matters. Each list item belongs in an <li>. Lists give browsers, assistive technology and readers a clear group of related items.
1<h1>Day hike</h1>
2<ul>
3 <li>Water bottle</li>
4 <li>Map</li>
5 <li>Snack</li>
6</ul>
7<img src="trail.jpg" alt="A marked trail through a pine forest">Day hike Water bottle Map Snack A marked trail through a pine forest
The src attribute tells the browser where an image is. The alt attribute gives a text alternative when the image cannot be seen or loaded. Describe the image’s useful information; use alt="" for an image that is purely decorative.
Key takeaways
Use ul or ol to group list items.
Every list item belongs in li.
Write useful alt text for meaningful images.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write HTML
Write the markup, preview it in a sandboxed browser frame, and check the visible text against the requirements.
Plan a weekend
Make a heading Weekend plan and an unordered list with these three items: Visit the market, Walk by the river, and Read in the park.
- Plan text
Your markup is previewed in a sandboxed frame. Run tests to check the visible page text.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…