Name and title
Add the page skeleton and the name–title headings.
Name and title: fill head
You have an empty HTML skeleton. In this lesson you'll fill <head> and add name and title to <body>.
Head gets lang, meta charset, viewport, and title. Body gets an <h1> (your name) and an <h2> (your title). This pair is what visitors see first at the top of the card.
h1 and h2 hierarchy
Heading tags form a hierarchy: <h1> is the main heading, <h2> a subheading. A page usually has one h1; h2s support it.
In this project h1 carries the card owner's name (e.g. Alex York), h2 the title (e.g. Front-end developer). This hierarchy tells both screen readers and search engines how the page is structured.
Exercise Fill head, add h1 and h2
Take the empty skeleton from the previous lesson. Add lang="en" to <html>; inside <head> add meta charset=utf-8, viewport (width=device-width, initial-scale=1), and title with content Alex York - Business card. Inside <body> add h1 (your name) and h2 (your title).
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 - Business card</title>
</head>
<body>
<h1>Alex York</h1>
<h2>Front-end developer</h2>
</body>
</html>Test yourself
-
For an English business card, which lang value fits on <html>?
- lang="de"
- lang="eng"
- lang="en"
- lang="english"
Show answer
lang="en" — Correct. For English we use the BCP 47 code 'en'.
-
Complete the title content
<title>____</title>Show answer
<title>Alex York - Business card</title> -
Match each head component to its role
- meta charset
- Character set
- meta viewport
- Mobile fit
- title
- Tab title
- lang
- Page language