Inside the Head

After this lesson, you can complete the tab title, UTF-8 charset, and viewport in a document's head.

BEGIN WITH A QUESTION

Understanding begins with a question.

You have opened five tabs, all named ‘Untitled’. How do you find the correct page? Small pieces of metadata have a substantial effect on reading.

Complete the tab title, UTF-8 charset, and viewport in a document's head.

UNDERSTAND THE CONCEPT

Title is not h1

Title is the document name usually shown in browser tabs, history, and bookmarks. H1 is the main heading in the page content. Their wording may be similar, but their roles differ. ‘Book Collection — Mini Library’ is easier to identify than ‘Page 1’.

Characters and screen size

Meta charset="utf-8" helps browsers read characters such as é, symbols, and letters from many languages. Place it near the beginning of head. Meta viewport with content="width=device-width, initial-scale=1" sets the initial viewport to the device width. This helps mobile display but does not automatically make every layout responsive.

Metadata is not a paragraph

Head information is not displayed as ordinary page content. The preview displays body; Lucia also shows the document title above the preview panel so you can see changes to title.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Book Collection — Mini Library</title>
</head>
<body>
  <h1>Book Collection</h1>
  <p>Reading for a quiet afternoon.</p>
</body>
</html>

BROWSER RESULT

Title identifies the page; charset declares its encoding; viewport helps the browser display the page on a small device.

COMMON MISTAKES

<body>
  <title>Book Collection</title>
</body>

Move title into head. Do not replace h1 with title: the page still needs a readable heading in body.

TRY TOGETHER

Practice clarifies understanding.

01 Which element determines the document name in the browser tab?

<h1>Book Collection</h1><title>Book Collection</title><meta charset="utf-8">

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Give the unnamed tab a title

Complete head with the title ‘Garden Journal’, UTF-8 charset, and a viewport matching device width with an initial scale of 1. Keep the body content.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Complete the metadata here -->
</head>
<body>
  <h1>Garden Journal</h1>
  <p>New leaves appeared today.</p>
</body>
</html>

index.htmlHTMLLn 1, Col 110 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Title names the document; h1 names its main content.
UTF-8 supports characters from many languages.
Viewport helps the initial display on small devices; it does not replace responsive CSS.

MetadataDocument structure

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Head °Title °Meta °Character encoding °Viewport °

Library: Three languages behind one page ↗

Next lesson →