Introductory text

Write the self-introduction text with headings and paragraphs.

Introductory text: h1, h2, and paragraphs

Head is filled. Now you'll fill <body>. First add <h1> (your name) and <h2> (your title); this pair is what visitors see first at the top.

Then write one or two paragraphs introducing yourself using <p> elements. Each paragraph holds a sentence or a few sentences; space appears automatically between paragraphs.

Emphasis with strong and em

Inside a paragraph you may want to highlight some words. Two tags help: <strong> and <em>.

<strong> marks importance; browsers usually render it important. <em> adds emphasis; browsers usually render it italic. Both carry meaning, not just style; screen readers also change tone.

Exercise Add h1, h2, and paragraphs to body

Take the skeleton with filled head from the previous lesson. Inside <body> add h1 (your name: Alex York) and h2 (your title: Photographer). Then add two p elements: in the first, emphasize a phrase with strong and a word with em; in the second, write a short closing sentence.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alex York - About me</title>
  </head>
  <body>
    <h1>Alex York</h1>
    <h2>Photographer</h2>
    <p>Hi! I'm Alex. I shoot <strong>street and portrait</strong> photography and love <em>travel</em>.</p>
    <p>This page is a short introduction to who I am.</p>
  </body>
</html>

Test yourself

Complete the h1 heading
```
<h1>____</h1>
```
Show answer
```
<h1>Alex York</h1>
```
Which tag is best for adding emphasis to a word?
- <strong>
- <em>
- <mark>
- <hr>
Show answer

<em> — Correct. <em> is for emphasis; strong marks importance, mark highlights, and hr separates.
Match each tag to its meaning

h1

Main heading
h2

Subheading
p

Paragraph
strong

Important text
em

Emphasized text

Next lesson: Emphasis and separation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies