Codectionary / Developer documentation / HTML

<head>

The <head> element contains metadata about the document — information that is not displayed directly on the page but is used by browsers, search engines, and other tools. This includes the page <title>, character encoding, linked stylesheets, scripts, and social media preview data. It must come before <body> and contains no visible content itself.

Syntax

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
</head>

Examples

Typical Head Contents

A well-formed head with the essentials.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codectionary - Learn to Code</title>
  <link rel="stylesheet" href="styles.css">
</head>

Head with a Script

Linking an external script from the head, deferred so it does not block rendering.

<head>
  <title>Codectionary - Learn to Code</title>
  <script src="app.js" defer></script>
</head>

Head with Favicon and Description

Additional common head metadata.

<head>
  <title>Codectionary - Learn to Code</title>
  <link rel="icon" href="/favicon.ico">
  <meta name="description" content="Thoughts on web development.">
</head>

Best practices

  • Always include a <title> and charset meta tag as early as possible in <head>
  • Use defer or async on <script> tags in the head so they do not block page rendering
  • Keep the head focused on metadata — no visible content belongs here
  • Charset and viewport meta tags are typically placed first for performance reasons

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation