Build: charset and viewport

Declare UTF-8 encoding and the viewport for mobile devices.

Official sourceWHATWG HTML — metaReviewed: 2026-08-26

STEP 1 · LEARN

How it works

Declare UTF-8 encoding and the viewport for mobile devices. Semantic structure should describe meaning, not visual appearance.

Correct example

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web workshop</title>
</head>
<body><h1>Web workshop</h1></body>
</html>

meta charset declares the document character encoding. meta viewport tells a mobile browser that the layout viewport should follow the device width. Both are metadata and belong in head.

Common mistake

<head><meta charset=""><meta name="viewport"></head>

The elements exist, but their values are missing: the browser receives neither UTF-8 encoding nor the width=device-width rule.

STEP 2 · APPLY

Your exercise

Complete the example. Declare UTF-8 encoding and the viewport for mobile devices.

index.htmlHTML

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The head declares UTF-8.
The viewport includes width=device-width.

Explain the solution logic

First complete charset="UTF-8", then add name="viewport" and content="width=device-width, initial-scale=1" to the second meta element.

How it works

Your exercise

Write and see the result

What needs to pass