HTML Document Head and Metadata
Set the character encoding, viewport, title, description, and stylesheet for a page.
On this page
The concept
The head element holds information about the page rather than its visible content. The doctype puts the browser in standards mode, and lang on the html element declares the language. meta charset utf-8 makes the text decode correctly, and the viewport meta tag makes the page scale properly on phones. The title appears in the browser tab and in search results, and the description meta tag is often used as the snippet. A canonical link tells search engines which URL is the main one for duplicated pages.
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Loops in Python | Example Site</title>
<meta name="description" content="Learn how loops repeat code, with examples.">
<link rel="canonical" href="https://example.com/loops">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Loops in Python</h1>
</body>
</html>Follow the code
Open the walkthrough to inspect the example one step at a time.
Show guided walkthrough
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Loops in Python | Example Site</title> <meta name="description" content="Learn how loops repeat code, with examples."> <link rel="canonical" href="https://example.com/loops"> <link rel="stylesheet" href="styles.css"></head><body> <h1>Loops in Python</h1></body></html>Follow the example
Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.
View the complete dry-run table
| Step / line | What happens | State after step | Output so far |
|---|---|---|---|
| The doctype switches the browser into standards mode. | — | — | |
| The page language helps screen readers, translation tools, and hyphenation. | — | — | |
| Declare UTF-8 early so that every character is decoded correctly. | — | — | |
| Without this tag mobile browsers show a zoomed-out desktop layout. | — | — | |
| Shown in the tab, bookmarks, and search results. Keep it specific. | — | — | |
| Load the stylesheet from the head so the page is styled when it first appears. | — | — | |
| Visible content belongs in body. The browser renders the page; there is no console output. | — | — |
Behind the scenes
How HTML processes this code
The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.