HTMLLesson 10 of 10Jump to practice

The head and meta tags

Set the character encoding, make your page fit phone screens, and describe it for search engines.

The <head> is never shown on the page, but it matters a lot. It tells the browser how to read your page, how to size it on a phone, and what search engines should say about it.

Here is the head every page on your site should start with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh apples | Hudson Valley Orchard</title>
  <meta name="description" content="Order Honeycrisp and Gala apples from our family orchard, shipped anywhere in the US.">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  ...
</body>
</html>

Line by line

Line Why it’s there
lang="en" The page’s language. Screen readers use it to pick a voice. Use es for Spanish
charset="utf-8" The text encoding. UTF-8 covers every script, accent and emoji. Put it first
viewport Makes the page as wide as the phone’s screen instead of shrinking a desktop page
<title> Shown in the tab and as the link in search results. Make each page’s title unique
description Often shown under the title in search results. Aim for one or two clear sentences
<link rel="stylesheet"> Loads your CSS file
<link rel="icon"> The small icon in the browser tab
A complete page in Spanish
Open in editor
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi primera página</title>
</head>
<body>
<h1>¡Bienvenidos!</h1>
<p>Esta es mi primera página web.</p>
<script>
  console.log("Title:", document.title);
  console.log("Language:", document.documentElement.lang);
</script>
</body>
</html>
Result

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Make accents like é and ñ, emoji and every other script display correctly.

    <meta charset="">

  2. Exercise 2

    Make the page fit the width of a phone screen.

    <meta name="" content="width=device-width, initial-scale=1">

  3. Exercise 3

    Tell browsers and screen readers that this page is written in Spanish.

    <html ="es">

Quiz: 3 questions

1. Where do people usually see your meta description?
2. What happens on a phone if you leave out the viewport tag?
3. Which of these belongs in the <head>?

Finish the practice to complete this lesson.

Sign in to keep your progress on any device.