Your Skills section is still one flat sentence with commas between the words. This lesson turns any collection of separate things into a real list, one your browser, and a screen reader, can count.
The concept
Here is your page as it stands. Run it:
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
Focus on the Skills line. Three things, joined by commas, inside one sentence:
Now the same three things, marked up differently. Run it:
Three bullets, each on its own line. You did not add punctuation to separate the items. You told the browser there are three separate items, and it drew each one as its own line, with a marker in front. That is a list: a container element holding one or more list items.
Not every list works the same way. Run this one:
Numbers instead of bullets. The content is a different shape too: these three lines only make sense in this order. Boiling the water has to happen before you add the leaves. That difference, whether the order carries meaning, is the whole concept of this lesson.
The syntax
Two kinds of list, both built from the same piece:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>First step</li>
<li>Second step</li>
</ol><ul> is an unordered list. The items are a group, and rearranging them changes nothing about what the list means. <ol> is an ordered list. The sequence itself is part of the meaning, so a browser numbers the items to show it. Either way, every item goes inside an <li>, a list item. <li> is the element your content actually goes in. <ul> and <ol> do not take plain text or other visible elements directly. It is <li> itself, not its parent, that gets the marker: a bullet inside <ul>, a number inside <ol>.
Choosing between them is not about how you want it to look. A numbered look does not make an unordered group ordered. The question is always: if you shuffled these items, would anything about their meaning change?
A minimal working example
<h2>Shopping list</h2>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
<h2>How to make tea</h2>
<ol>
<li>Boil the water</li>
<li>Add the tea leaves</li>
<li>Wait four minutes</li>
</ol>A shopping list has no required order. A recipe does. The markup says so before a reader even looks closely.
Common mistakes
Keeping everything as one <li>. You take "HTML, CSS, JavaScript" and wrap the whole comma-separated sentence in a single <li>, inside a <ul>. You get one bullet holding all three words crammed together, not three separate bullets. Technically valid HTML, but it misses the point: to a screen reader too, this still reads as one item, not three. Each distinct thing gets its own <li>.
Plain text with no <li> at all. You type your three skills directly inside <ul>, expecting the list styling to apply automatically. Nothing wraps each one, so no bullets appear anywhere, only an unmarked block of run-together text. The marker belongs to <li>, not to <ul> or <ol>. If a list shows no bullets or numbers, check whether the items are actually wrapped in <li> tags.
Choosing <ol> because numbers look more organized. You put your three skills inside <ol> because numbered lists look more official. The page shows 1. HTML, 2. CSS, 3. JavaScript. Nothing looks broken. The symptom is the numbers themselves: they claim an order that does not exist. If shuffling the skills would not change what the list means, those numbers are lying. Switch to <ul> and the bullets replace them.
Try it yourself
Skills still reads as one sentence with commas. Give it real structure.
- Run the starting code below. Confirm Skills is still one flat sentence.
- Replace that sentence with a
<ul>containing three<li>items, one for each of your skills. - Run it. Confirm each skill has its own bullet, on its own line.
- Break it on purpose: remove the
<li>and</li>tags from around one item only, leaving its text sitting directly inside the<ul>. Run it, and watch that one line lose its bullet while the other two keep theirs. Put the tags back.
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
Skills is now a real list, not a sentence pretending to be one. About and Skills both carry structure a screen reader can navigate. Contact is still a dead end, a sentence telling a visitor to email you with no actual way to click through. The next lesson gives it a real link.