The <head> Tag: Defining Document Metadata

The <head> tag in HTML is a special container used to define document-level properties. It appears before the <body> tag, immediately after the opening <html> tag:

Code Block Loading...

What Goes Inside <head>

The <head> element does not contain visible content and typically does not use attributes. Instead, it holds other tags that help the browser understand and render the page correctly. These include:

  • <title> — Sets the title shown in the browser tab
  • <meta> — Provides metadata like character encoding, viewport settings, and SEO descriptions
  • <link> — Links external resources like stylesheets or icons
  • <style> — Embeds internal CSS styles
  • <script> — Adds or links JavaScript files
  • <noscript> — Provides fallback content if JavaScript is disabled
  • <base> — Sets the base URL for relative links

Purpose of the <head> Section

Everything inside <head> is meant to guide the browser (and search engines) in how to process and display the page. It’s essential for:

  • Page titles and SEO
  • Linking styles and scripts
  • Setting up responsive design
  • Defining character encoding and other metadata

The <title> Tag: Naming Your Web Page

The <title> tag defines the title of the web page, which appears in the browser tab and is used as the clickable headline in search engine results.

It plays a crucial role in Search Engine Optimization (SEO), helping both users and search engines understand what the page is about.

Example:

Code Block Loading...

A clear, descriptive title improves visibility in search rankings and encourages users to click through to your site.

The <script> Tag: Adding JavaScript to Your Page

The <script> tag is used to embed or load JavaScript into an HTML document. You can include scripts in two main ways:

Inline JavaScript

You can write JavaScript directly between opening and closing <script> tags:

Code Block Loading...

External JavaScript

You can also load an external JavaScript file using the src attribute:

Code Block Loading...

The type attribute (e.g., type="text/javascript") is optional in modern HTML, as text/javascript is the default.

Performance Considerations

Traditionally, developers placed <script> tags at the bottom of the page, just before the closing </body> tag. Why?

Because by default, scripts block the browser from rendering the page until they’re fully loaded and parsed. Placing them at the bottom ensures the page content loads first, improving perceived performance.

However, this approach is now considered outdated.

Modern Best Practice: Use defer

Instead of placing scripts at the bottom, you can include them in the <head> and use the defer attribute:

Code Block Loading...

This tells the browser to download the script in parallel while parsing the HTML, and execute it only after the document has been fully parsed—resulting in faster and smoother page loads.

What About async?

The async attribute also loads scripts asynchronously, but it executes them as soon as they’re ready, which can interrupt HTML parsing. This can lead to unpredictable behavior, especially if your script depends on DOM elements being available.

For most cases, defer is the safer and more predictable choice.

The <noscript> Tag: Handling Disabled JavaScript

The <noscript> tag is used to provide fallback content or behavior when JavaScript is disabled in the user's browser. This can happen either because:

  • The user has manually disabled JavaScript in their browser settings, or
  • The browser doesn’t support JavaScript at all (rare, but possible)

Two Ways to Use <noscript>

The behavior of <noscript> depends on where it’s placed in the HTML document:

1. Inside the <head>

When used in the <head>, the <noscript> tag can only contain other tags, such as:

  • <link> — to load alternate stylesheets
  • <style> — to override styles if scripts are disabled
  • <meta> — to adjust metadata for non-scripted environments

You cannot include visible content here—only resources or metadata.

Example: Revealing a Hidden Alert

Code Block Loading...

In this example, the .no-script-alert element is hidden by default but becomes visible if JavaScript is disabled.

2. Inside the <body>

When placed in the <body>, <noscript> can contain visible content, such as:

  • Paragraphs
  • Images
  • Links
  • Any other HTML elements

This content will only be rendered if JavaScript is not available.

Example:

Code Block Loading...

Best Practices

  • Use <noscript> to improve accessibility and provide graceful fallbacks.
  • Prefer CSS-based solutions for styling changes.
  • Avoid overusing <noscript>—modern browsers almost always support JavaScript.

The <link> Tag: Connecting External Resources

The <link> tag is used to define relationships between the current HTML document and external resources. It’s most commonly used to link external CSS stylesheets, but it supports a variety of use cases.

This tag is self-closing and does not require a closing tag.

Basic Usage

To include an external CSS file:

Code Block Loading...

Using the media Attribute

The media attribute allows you to load stylesheets conditionally based on the device or output type:

Code Block Loading...

This helps tailor styles for different contexts like screen vs. print.

Linking Other Resource Types

The <link> tag isn’t limited to stylesheets. It can also reference other resources:

  • RSS Feeds:

Code Block Loading...

  • Favicons and Touch Icons:

Code Block Loading...

These help define how your site appears in browser tabs, bookmarks, and mobile home screens.

rel="prev" and rel="next"

In the past, <link> was also used to indicate pagination relationships for multi-page content:

Code Block Loading...

This was primarily used by search engines like Google. However, as of 2019, Google no longer relies on these tags to understand page structure.

The <style> Tag: Embedding CSS in HTML

The <style> tag allows you to write CSS rules directly within your HTML document, instead of linking to an external stylesheet.

Basic Usage

You place the <style> tag inside the <head> section of your HTML:

Code Block Loading...

This is useful for small styling tweaks or when you want to keep everything in a single file.

Using the media Attribute

Just like the <link> tag, <style> supports the media attribute, which lets you apply styles conditionally based on the device or output type:

Code Block Loading...

This is especially helpful for customizing layouts for printing, screen readers, or responsive design.

The <base> Tag: Setting a Base URL

The <base> tag defines a base URL for all relative links and resources within an HTML document. It ensures that any relative paths are resolved against this specified URL.

Example Usage

Code Block Loading...

With this setup, any relative URLs (like /images/logo.png or about.html) will be interpreted as:

https://google.com/images/logo.png
https://google.com/about.html

Notes

  • The <base> tag must appear only once in the document.
  • It should be placed inside the <head> section.
  • It does not have a closing tag—it’s self-closing.

The <meta> Tag: Behind-the-Scenes Power for SEO and Behavior

The <meta> tag is used to provide metadata about an HTML document. While it doesn’t produce visible content, it plays a crucial role in how browsers and search engines interpret your page—especially for SEO, accessibility, and rendering behavior.

Basic Syntax

Meta tags are self-closing and appear in the <head> section:

Code Block Loading...

Common Meta Tags and Their Uses

description

Defines a short summary of the page. Search engines like Google may use this in search results if it better represents the page than the visible content.

Code Block Loading...

charset

Specifies the character encoding for the document. The most common and recommended value is UTF-8:

Code Block Loading...

robots

Instructs search engine crawlers how to handle the page:

Code Block Loading...

By default, search engines assume index, follow.

You can also use other directives like:

  • nosnippet — Prevents showing a text snippet in search results
  • noarchive — Prevents cached versions
  • noimageindex — Prevents image indexing

Targeting Specific Bots

To apply rules to Google only:

Code Block Loading...

Or to disable Google Translate in search results:

Code Block Loading...

viewport

Essential for responsive design, this tag tells the browser to scale the page based on the device’s screen size:

Code Block Loading...

http-equiv="refresh"

Used to automatically redirect the page after a delay:

Code Block Loading...

Set the delay to 0 for an immediate redirect.

Final Notes

  • Meta tags are vital for SEO, accessibility, and browser behavior.
  • This isn’t an exhaustive list—many specialized meta tags exist for social sharing, app behavior, and more.
  • With the document head now covered, you're ready to dive into the document body and start building visible content.