Skeleton and title

HTML course · Beginner · Lesson 14/68

Add the document skeleton and the page title.

Skeleton and title: fill head

You have an empty HTML skeleton. In this lesson you'll fill <head> and add the page's title.

Head gets lang, meta charset, viewport, and title. lang sets the page's language, charset the character set, viewport the mobile fit, and title the tab title. Visitors don't see them first, but the page needs them to work correctly.

title and lang: two key head elements

The <title> element is the page's tab title. When a visitor opens the page, the browser tab shows this text. Keep it short and descriptive; example Alex York - About me.

The lang attribute on <html> tells the page's language. Use lang="en" for English, lang="tr" for Turkish. It helps screen readers and search engines.

Exercise Take the skeleton, fill head with lang and title

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 - About me. Leave <body> empty for now; we'll fill it in the next lesson.

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>
  </body>
</html>

Test yourself

For an English about me page, 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 - About me</title>

Match each head component to its role

meta charset

Character set
meta viewport

Mobile fit
title

Tab title
lang

Page language

Skeleton and title