What you'll learn
Now that you have the skeleton, let's add real content. HTML gives you a rich vocabulary of text elements — and the golden rule is to choose each one for its meaning, not for how it happens to look. That habit makes your pages accessible, searchable, and easy to style later.
By the end you'll be able to:
- Structure a document with headings
<h1>–<h6> - Write paragraphs and add breaks and rules
- Convey emphasis and importance meaningfully
- Use inline elements, quotations, and HTML entities
Headings & the document outline
HTML offers six levels of heading, from <h1> (most important) down to <h6>. They create your page's outline, like the headings in a book. Use exactly one <h1> per page for its main title, then nest lower levels logically — an <h2> for each section, <h3> for sub-sections, and so on.
Watch out
<h1> to <h4> to get smaller text — that breaks the outline screen readers and search engines rely on. Choose the level for its meaning, and change the size later with CSS.Paragraphs, breaks & rules
Body text goes in paragraphs — the <p> element. The browser automatically adds space between paragraphs, and it collapses any extra spaces and line breaks in your source into a single space, so you format your code however you like. When you need an explicit line break within a block (like in an address or a poem), use the void element <br>. A <hr> draws a thematic divider between sections.
Emphasis & importance
Two elements carry meaning about tone: <em> marks emphasis (typically shown italic) and <strong> marks strong importance (typically bold). There are also <i> and <b>, which look the same but carry no importance — prefer the meaningful <em>/<strong> so assistive technology can convey your intent. Here it all comes together:
<h1>The Solar System</h1>
<h2>The Inner Planets</h2>
<p>
Mercury is the <strong>smallest</strong> planet and the
<em>closest</em> to the Sun.
</p>
<p>Water is written as H<sub>2</sub>O.</p>
<blockquote>
Somewhere, something incredible is waiting to be known.
<cite>— Carl Sagan</cite>
</blockquote>Inline text & quotations
Several small elements mark up phrases inside a line of text:
| Element | Meaning |
|---|---|
<span> | A generic inline container with no meaning — a hook for styling |
<mark> | Highlighted or marked text of relevance |
<code> | A snippet of computer code, shown in a monospace font |
<small> | Fine print — disclaimers, copyright, side comments |
<sub> / <sup> | Subscript and superscript (H₂O, x²) |
<abbr> | An abbreviation, with the full term in a title attribute |
For quotations, <blockquote> marks a longer, block-level quote, while <q> handles a short inline one. Pair either with <cite> to name the source.
HTML entities
Some characters are special: a raw < would start a tag, and & begins every entity. To display them literally, use an HTML entity — a code beginning with& and ending with ;:
| Type this | To display | Why |
|---|---|---|
< | < | a raw < would be read as the start of a tag |
> | > | the counterpart to < |
& | & | & begins every entity, so it must be escaped |
© | © | symbols with no key on the keyboard |
| a space | a non-breaking space that won't collapse or wrap |
Recap & quick check
Key takeaways
- Use headings h1–h6 to build a logical outline — one h1 per page, no skipped levels.
- Paragraphs go in <p>; the browser collapses extra whitespace, so format source freely.
- Prefer meaningful <em> and <strong> over the purely visual <i> and <b>.
- Inline elements like <span>, <mark>, <code>, <sub>/<sup> mark up phrases within text.
- Escape special characters with entities: < for <, > for >, and & for &.
Quick check
1. How many <h1> elements should a page typically have?
2. What happens to extra spaces and line breaks inside a <p> in the source?
3. Which element best conveys strong importance?
4. How do you display a literal < character on the page?
5. What is <span> used for?
Your pages can hold rich, meaningful text now. Next we add the feature that turns pages into a web: links and navigation.