HTML document structure

Build the correct foundation of an HTML page.

STEP 1 · LEARN

How it works

DOCTYPE declares the document type, while html, head and body separate page information from visible content.

Correct example

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web workshop</title>
</head>
<body>
  <h1>Web workshop</h1>
</body>
</html>

DOCTYPE enables standards mode. lang declares the language, head holds metadata, and body contains what the user sees.

Common mistake

<html>
<head><title>My page</title></head>
<h1>Welcome</h1>
</html>

DOCTYPE, language, charset and body are missing. A browser may display something, but the document does not fully declare its structure.

STEP 2 · APPLY

Add a DOCTYPE, language, UTF-8 charset, title and one h1.

index.htmlHTML

Safe resultisolated

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

STEP 4 · CHECK

0%not checked

Explain the solution logic

Check the structure from the outside in: DOCTYPE, html with lang, head with charset and title, then body with one h1.