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