HTML Head

Understand the topic

The head contains metadata and resource declarations rather than the main visible content. Common entries include character encoding, the document title, viewport settings, a description, stylesheets, icons, and deferred scripts. Put the charset declaration early. Metadata should describe this particular document rather than being copied unchanged across unrelated pages.

Worked example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Find beginner workshops at our community library.">
  <title>Workshops | Community Library</title>
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>

The viewport setting lets mobile layout use the device width. The title and description identify the document; the linked files provide presentation and behavior.

Practice

Write head metadata for a page called Library Membership.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Library Membership | Community Library</title>

Common mistake

Do not disable zoom through viewport settings. People need to enlarge text and controls.

HTML documentation