Inside the Head

Mission 1 continues. Your page has a head, but it is almost empty. Today you fill it with the information that browsers and search engines need.

Show the answer

The body. The head holds information about the page. Visitors do not see it, but it changes how the page looks and works.

Title and description

The title is the name of your page. It shows in the browser tab, as the heading of a search result and on a shared link. Make it clear and give every page its own title. Long titles are cut after about 60 characters.

The description is one or two sentences about the page. Search engines often show it below the title. It goes into a <meta> tag. A meta tag gives information about the page; it has no closing tag.

<title>Ayla's web page</title>
<meta name="description" content="I am learning web development.">

Tap the numbers and see where the title and the description appear.

Find on image

Where does it show?

Required 15 XP

The title and the description of one page show up in three places. Tap each number.

More information for the browser

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Design Training</title>
  <meta name="description" content="Learn HTML, CSS and JavaScript step by step.">
  <meta name="author" content="Ayla K.">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="icon.png">
</head>

The slide example also has <meta name="keywords">. Search engines ignore it today, so you can leave it out.

Style and script

<style> holds CSS for this one page. It usually goes into the head. <script> holds JavaScript, or loads a JavaScript file with the src attribute. Put scripts at the end of the body. A script file can also go into the head with the attribute defer: then it waits until the page is ready, like this: <script src="script.js" defer></script>.

<script>
  console.log("Hello World!");
</script>

This script writes "Hello World!" to the console, a tool for developers. You do not see it on the page. You use the console in Unit 4.

Matching

What does each part of the head do?

Required 15 XP

Match each element with its job.

Fill the head

Choose and type the missing parts of a head. First guess where the title appears.

Practice

Fill the head

Required 30 XP

Four gaps in the head. Choose or type each missing part, then press Run and check.

Slide bug: the colour that did nothing

Bug Hunter mission: nine small bugs hide in the course slides. Here is the first one. Run the slide's code, then find the two bugs and fix them.

Practice

Slide bug: the colour that did nothing

Required 30 XP

This code comes from a course slide. We added a heading so that you can see the colours. It has two small bugs. Press Run and check first, then tap a line with a bug and choose the fix.

Title

The name of the page in the browser tab and in search results.

Meta tag

Information about the page in the head, like the character set or a description.

Character set

The list of letters and signs a page can show. UTF-8 has them all.

Viewport

The visible area of the screen. The viewport meta tag makes a page fit a phone.

Stylesheet

A CSS file with the look of a page.

Console

A tool for developers that shows messages from JavaScript.

In short

• The head holds the title, meta tags, links, style and scripts. Visitors do not see it.
• Every page needs <meta charset="UTF-8">, the viewport meta tag and its own title.
• CSS writes color, even when English text says colour.

Sources

1. MDN Web Docs (2026). What's in the head? Web page metadata.
2. MDN Web Docs (2026). <title>: The Document Title element.
3. MDN Web Docs (2026). <meta>: The metadata element.
4. MDN Web Docs (2026). <meta name="viewport">.
5. MDN Web Docs (2026). <link>: The External Resource Link element.
6. MDN Web Docs (2026). <style>: The Style Information element.
7. MDN Web Docs (2026). <script>: The Script element.
8. MDN Web Docs (2026). color (CSS property).