How to use the document head and meta tags

The head is metadata

The head is not the page header. It supplies information to browsers, search engines, and sharing services.

A practical head

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beginner HTML Guide</title>
  <meta name="description" content="Learn the foundations of modern HTML.">
  <link rel="stylesheet" href="/styles.css">
</head>

Place key tags correctly

  • Put charset near the start of head
  • Use one concise, page-specific title
  • The viewport tag makes responsive layouts behave correctly
  • Load shared styles with link; use defer for most scripts

What does not belong

Do not put headings, paragraphs, or navigation in head. Avoid obsolete tags such as keywords and http-equiv="X-UA-Compatible"; modern HTML needs neither.