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

Next lesson: Contact list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies