SyntaxStudy
Sign Up
HTML Beginner 5 min read

The HTML Head Element

The HTML Head Element

The <head> element is a container for metadata — information about the document that is not displayed directly on the page. It must be the first element inside <html>, before <body>. Content in <head> is processed by the browser, search engines, and social media crawlers.

Common Head Elements

The most common children of <head> are: <title> (required, sets the browser tab text and SEO title), <meta> (provides metadata such as charset, viewport, description), <link> (links external resources like CSS files), <script> (links or embeds JavaScript), and <style> (embeds internal CSS). The <base> element sets a base URL and is rarely needed.

  • <title> — Browser tab title, SEO title
  • <meta> — Metadata (charset, viewport, description…)
  • <link> — External CSS, icons, fonts
  • <script> — JavaScript
  • <style> — Embedded CSS
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">

  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Page title (shows in browser tab) -->
  <title>My Awesome Website | Home</title>

  <!-- SEO description -->
  <meta name="description" content="Welcome to My Awesome Website, where we cover web development tutorials.">

  <!-- External CSS -->
  <link rel="stylesheet" href="styles.css">

  <!-- Favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
Pro Tip

Keep your <title> between 50-60 characters — search engines truncate titles longer than about 60 characters in search results. Include the page topic first, then the site name: "Topic — Site Name".