HTML Document Head and Metadata

Set the character encoding, viewport, title, description, and stylesheet for a page.

<!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>

Explanation

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.

—

—

—

—

—

—

—