HTML Head Elements

Last Updated: 01 Nov 2025

The <head> tag in HTML contains information about the webpage, not the visible content. This includes metadata, title, favicon, CSS links, JavaScript files, and more.

🧩 Syntax:

<html>
  <head>
    <!-- Head content here -->
  </head>
  <body>
    <!-- Visible content here -->
  </body>
</html>

🗣 Hinglish Tip: <head> part = “Webpage ka brain” 🧠 — user ko dikhta nahi, par browser & Search Engine dono use karte hain.

Common Head Elements

  • <title> → Sets the title of the webpage
  • <meta> → Provides metadata about the webpage
  • <link> → Links to external resources like CSS or JavaScript files
  • <style> → Embeds inline CSS styles
  • <script> → Embeds JavaScript code
  • <base> → Sets the base URL for relative links

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Page Title -->
    <title>My Webpage - Head Elements Demo</title>

    <!-- Character Encoding -->
    <meta charset="UTF-8" />

    <!--  SEO Meta Tags -->
    <meta
      name="description"
      content="A full demo of HTML head elements including meta, CSS, favicon, and JS."
    />
    <meta name="keywords" content="HTML, head, meta, CSS, JS, favicon" />
    <meta name="author" content="Bit Dev" />

    <!-- Viewport (for mobile responsiveness) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--  Theme Color (for mobile browser UI) -->
    <meta name="theme-color" content="#1e90ff" />

    <!-- Social Media (Open Graph Meta) -->
    <meta property="og:title" content="HTML Head Elements Tutorial" />
    <meta
      property="og:description"
      content="Learn how to use head tags in HTML."
    />
    <meta property="og:image" content="https://example.com/preview.png" />
    <meta property="og:url" content="https://example.com/html-head" />

    <!--  Favicon (small icon in browser tab) -->
    <link rel="icon" type="image/png" href="favicon.png" />

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

    <!-- External Font (Google Fonts Example) -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />

    <!--Base URL -->
    <base href="https://example.com/" />

    <!-- 1 Internal CSS -->
    <style>
      /* Internal CSS */
    </style>

    <!-- External JavaScript -->
    <script src="app.js" defer></script>

    <!--  Internal Script -->
    <script>
      // Internal JavaScript
    </script>
  </head>

  <body>
    <h1>Welcome to My Webpage</h1>
    <p>
      All head elements are used above — from meta tags to favicon and scripts!
    </p>
  </body>
</html>

|| राम नाम सत्य है ||

← PreviousNext →