CodeNexium.com
Head · codenexium.com

Head Element in HTML

The <head> element is a container for metadata - data about the HTML document that is not displayed on the page. It sits between the <html> opening tag and the <body> element. Despite being invisible, the <head> is crucial for SEO, styling, behaviour, and browser compatibility.

What goes inside the head element?

The <head> can contain these elements:

  • <title> - page title (required)
  • <meta> - metadata like character encoding, description, viewport settings
  • <link> - external resources like CSS files, favicons
  • <style> - internal CSS rules
  • <script> - JavaScript (can also go in <body>)
  • <noscript> - content for browsers with JavaScript disabled
  • <base> - base URL for relative links

Example of a complete <head>:

’

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A beginner-friendly guide to HTML">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <base href="https://example.com/">
</head>
<body>
  <!-- visible content -->
</body>
</html>

title Element

The <title> element sets the page title shown in the browser tab. It is required for valid HTML and is used by:

  • Browser tabs and bookmarks
  • Search engine result pages (SERPs)
  • Social media previews
<title>My Blog - Learn HTML | Example.com</title>

SEO tip: Keep titles under 60 characters and put important keywords first.

meta Element

The <meta> element provides structured metadata about the page. It is a void element (self-closing). Common uses:

<!-- Character encoding - must be in first 1024 bytes -->
<meta charset="UTF-8">

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

<!-- Page description for search results (120-160 chars) -->
<meta name="description" content="Learn HTML from scratch with examples.">

<!-- Keywords (largely ignored by modern search engines) -->
<meta name="keywords" content="HTML, web development, tutorial">

<!-- Author -->
<meta name="author" content="Abhishek Sharma">

<!-- Refresh/redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com">

<!-- Open Graph tags for social sharing -->
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="A complete HTML tutorial">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
Attribute Values Purpose
charset UTF-8, ISO-8859-1 Character encoding
name description, viewport, author, keywords Metadata type
content varies Value of the metadata
http-equiv refresh, content-type, X-UA-Compatible HTTP header simulation
property og:title, og:image, etc. Open Graph / social media

The <link> element connects the HTML document to external resources. It is also a void element.

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

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

<!-- Alternative stylesheet -->
<link rel="alternate stylesheet" href="dark.css" title="Dark theme">

<!-- Preload a resource for performance -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- Prefetch a page the user might visit next -->
<link rel="prefetch" href="next-page.html">
Attribute Common Values Purpose
rel stylesheet, icon, preload, prefetch, canonical, alternate Relationship type
href URL Path to the resource
type text/css, image/x-icon MIME type
media screen, print, (max-width: 768px) Media query condition

style Element

The <style> element contains internal (embedded) CSS:

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  h1 {
    color: navy;
  }
</style>

Internal styles affect only the current page. Use type="text/css" (optional, still valid).

script Element

The <script> element embeds or links to JavaScript:

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

<!-- Inline script -->
<script>
  alert('Hello, World!');
</script>

<!-- Deferred execution (after HTML parses) -->
<script src="app.js" defer></script>

<!-- Async execution (load and execute as soon as ready) -->
<script src="analytics.js" async></script>

Important: Scripts block HTML parsing by default. The defer and async attributes prevent this.

noscript Element

The <noscript> element shows content when JavaScript is disabled or unsupported in the browser:

<noscript>
  <p>JavaScript is required for this site to function properly.</p>
  <p>Please enable JavaScript in your browser settings.</p>
</noscript>

base Element

The <base> element sets a base URL for all relative URLs in the document. There should be only one <base> per page:

<base href="https://example.com/">
<base target="_blank">  <!-- Open all links in new tab -->

With <base href="https://example.com/folder/">, a relative link like <a href="page.html"> points to https://example.com/folder/page.html.

Detailed Table with Tag, attributes and attribute values

Tag Attribute Values Description
<title> - Text Page title shown in browser tab
<meta> charset UTF-8, ISO-8859-1 Character encoding
<meta> name description, viewport, author, keywords, robots Metadata type
<meta> content varies Value paired with name or property
<meta> property og:title, og:description, og:image, twitter:card Open Graph / social
<meta> http-equiv refresh, content-type, X-UA-Compatible Simulates HTTP header
<link> rel stylesheet, icon, preload, prefetch, canonical, alternate, manifest Relationship to page
<link> href URL Resource location
<link> type text/css, image/png MIME type
<link> media screen, print, all Media query
<link> crossorigin anonymous, use-credentials CORS setting
<link> as font, style, script, image Resource type for preload
<link> sizes 16x16, 32x32, any Icon dimensions
<style> - CSS rules Embedded CSS
<style> type text/css (default) Style language
<style> media screen, print, all Media condition
<script> src URL External script location
<script> defer (boolean) Executes after HTML parsed
<script> async (boolean) Loads and executes asynchronously
<script> type text/javascript, module Script language / module
<script> integrity hash Subresource integrity (SRI)
<noscript> - HTML Content shown when JS disabled
<base> href URL Base URL for relative links
<base> target _self, _blank, _parent, _top Default link target
Courses