Most of the web is text, so the elements that structure text are the ones you will use most. In this lesson you will meet headings, paragraphs, and the tags that add emphasis and meaning to words.
Headings: h1 to h6
HTML has six levels of heading, from <code><h1></code> (the most important) down to <code><h6></code> (the least). They create a hierarchy, like a document outline. Use exactly one <code><h1></code> per page for the main title, then h2 for sections, h3 for subsections, and so on.
Paragraphs and line breaks
Body text goes in paragraphs using the <code><p></code> element. For a single line break inside text — like in an address — use <code><br></code>, which has no closing tag. For a thematic break between ideas, <code><hr></code> draws a horizontal rule.
Emphasis: strong and em
To give words meaning, use <code><strong></code> for strong importance (shown bold) and <code><em></code> for emphasis (shown italic). There are also <code><b></code> and <code><i></code> which look the same but carry no meaning — prefer strong and em so screen readers convey the importance.
<strong>Important text</strong>- Opening tag
<strong> - Content
Important text - Closing tag
</strong>
- Look bold / italic
- Carry no meaning
- Screen readers ignore the intent
- Use only for pure visual style
- Look bold / italic too
- Mean importance / emphasis
- Screen readers convey it
- Preferred for meaningful text
Build a tiny article in the editable box: one h1 title, an h2 section heading, two paragraphs, and use strong and em at least once each. This is real, structured content.
1. How many <h1> elements should a page usually have?
2. Which element is a paragraph?
3. Why prefer <strong> over <b>?
4. What should decide which heading level you use?
- Headings h1–h6 create a meaningful outline; use one h1 per page.
- Paragraphs use <p>; <br> is a line break and <hr> a thematic break.
- Use <strong> and <em> for meaning, not just bold/italic looks.
- Pick heading levels by meaning, not size — style comes from CSS.