Three lessons in, your page has a name, an introduction and three named sections, but About is still one thin, generic sentence. This lesson turns it into real prose, and gives you a way to make one phrase in it matter more than the rest.
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.
Now here is a real sentence, the kind your About section deserves. Run it:
It reads fine, but every word carries the same weight. Nothing tells a reader, or a screen reader, which part matters most. Watch what happens when two phrases move inside the sentence instead of sitting beside it. Run it:
Two phrases changed. One is bold. One is italic. You did not write two new paragraphs. You put two small elements inside the one you already had, wrapped directly around the words that mattered. That is new for you as an author. Every content element you have written so far, your h1, h2 and p tags, has sat beside its neighbors in the body, one after another. This is the first time you have nested one element inside another element's running text on purpose.
The syntax
The two tags this lesson adds:
<strong>text that matters most</strong>
<em>text you would lean on if you said it aloud</em><strong> marks strong importance. Browsers show it bold by default, but that is a side effect, not the point. <em> marks stress emphasis, the way your voice would land harder on a word if you spoke the sentence. Browsers show it in italics by default, for the same reason.
Nesting them inside a paragraph works like nesting anything else. One rule matters now for the first time: closing tags come back out in the reverse order they went in. The last tag you opened is the first one you close.
<p>Some <strong>very <em>truly</em> important</strong> news.</p>Reading the closes from the inside out: </em> closes the innermost tag first, then </strong>, then </p> closes the paragraph last. Picture it like parentheses. You cannot close an outer one while an inner one is still open.
A minimal working example
<h2>About</h2>
<p>
I build small tools for people who hate filling out forms. My favorite
part of the job is the moment a form <strong>fills itself in</strong>
because the data was already sitting there, waiting to be used.
</p>One phrase in that bio outranks the rest of the sentence, and now the markup says so.
Common mistakes
Forgetting the closing tag. You write <strong>this matters and move on to the next sentence, the next paragraph, the next section. The browser keeps the tag open the whole time, because nothing has told it to stop. Suddenly every paragraph after that point is bold too. When bold text shows up somewhere you never asked for it, look upstream for a <strong> or <em> that never got its closing tag.
Reaching for <strong> because it looks nice. A whole sentence gets wrapped in <strong>, not because it is more important than the rest of the page, but because bold looks confident. Nothing about this breaks. That is the danger: it renders exactly as intended, while quietly telling a screen reader that this ordinary sentence outranks everything around it. If the want is purely visual, with nothing to say about importance, the right tool is CSS, which comes in Act II.
Mixing up which tag does which. You reach for <em> expecting bold, or <strong> expecting italics, and the result looks off in a way that is hard to place at first. <strong> is the bold one. <em> is the italic one. If the weight looks wrong, check which tag you actually typed.
Try it yourself
Your About section still says "One sentence about you. Another sentence about you." Time to make it true.
- Run the starting code below. Confirm About still reads as two generic placeholder sentences.
- Replace those two sentences with two or three real sentences about yourself. This is your actual bio now.
- Pick one phrase, a skill, a goal, whatever matters most, and wrap it in
<strong>. - Pick a different word or short phrase, something you would naturally stress if you said the sentence aloud, and wrap it in
<em>. - Run it. Confirm one phrase is bold and the other is in italics.
- Break it on purpose: delete the closing
</strong>tag and run it. Watch the bold spread into every paragraph that comes after it, not only the phrase you wrapped. Put the tag back and confirm the bold snaps back to that one phrase alone.
▸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.
Your About section now sounds like you, with one phrase that stands out on purpose. Skills is still a single flat sentence listing three words with commas between them. The next lesson turns it into an actual list.