HTML Tag and Its Purpose

When you look at an HTML document, most of the visible content lives inside the <body> tag. But before the <body>, there’s another crucial section—the <head> tag.

What is the <head> Tag?

The <head> tag is a container for metadata (data about the webpage) that is not displayed directly on the page but is essential for browsers and search engines. It is placed between the <html> opening tag and the <body> tag.

Basic Structure of an HTML Document

				
					<!DOCTYPE html>
<html>
<head>
    <!-- Metadata goes here -->
    <title>Page Title</title>
</head>
<body>
    <!-- Visible content goes here -->
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/codersship.com\/wp-admin\/admin-ajax.php","nonce":"bbdc08811c","url":"https:\/\/codersship.com\/html\/html-tag-and-its-purpose","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg","width_threshold":1600,"height_threshold":700,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://codersship.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>

Purpose of the <head> Tag

The <head> section includes important information that helps with:
✔ Defining the page title (shown in browser tabs)
✔ Linking CSS & JavaScript files
✔ Setting character encoding (supports multiple languages)
✔ Controlling viewport behavior (for mobile responsiveness)
✔ Providing SEO metadata (for search engines)

Key Elements Inside the <head> Tag

1. <title> Tag

  • Defines the title of the webpage (appears in browser tabs & search results).

  • Example:

				
					<title>My Awesome Website</title>

2. <meta> Tags

Provide metadata such as:

  • Character encoding (supports special characters):

				
					<meta charset="UTF-8">
  • Viewport settings (for mobile-friendly design):
				
					<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • SEO descriptions & keywords:

				
					<meta name="description" content="Learn about HTML head tags">
<meta name="keywords" content="HTML, head tag, web development">

3. <link> Tag

  • Connects external resources like CSS files and favicons.

  • Example (linking a stylesheet):

				
					<link rel="stylesheet" href="styles.css">
  • Example (adding a favicon):
				
					<link rel="icon" href="favicon.ico">

4. <style> Tag

  • Embeds CSS directly in the HTML (instead of an external file).

  • Example:

				
					<style>
  body { font-family: Arial; }
</style>

5. <script> Tag

  • Embeds or links JavaScript files.

  • Can be placed in <head> or before the closing </body> (best for performance).

  • Example:

				
					<script src="script.js"></script>

Common Mistakes with the <head> Tag

❌ Missing charset declaration → Can cause encoding issues.
❌ No viewport meta tag → Breaks mobile responsiveness.
❌ Incorrect <title> usage → Hurts SEO and user experience.
❌ Loading heavy scripts in <head> → Slows down page rendering.

Best Practices for Using <head>

✔ Always include <title> (helps with SEO & usability).
✔ Declare charset="UTF-8" first (prevents rendering issues).
✔ Use <meta name="viewport"> (for mobile-friendly design).
✔ Load critical CSS in <head> (faster page rendering).
✔ Place non-critical JavaScript before </body> (better performance).

Why Is the <head> Tag Important?

✅ Affects SEO (search engines read metadata).
✅ Controls page rendering (encoding, viewport, styles).
✅ Links external resources (CSS, JS, fonts, icons).
✅ Improves user experience (proper titles, mobile optimization).

Final Thoughts

The <head> tag may not be visible to users, but it plays a critical role in how browsers and search engines interpret your webpage. By properly setting up metadata, styles, and scripts, you ensure better performance, SEO, and usability.

Next Steps:

  • Experiment with different <meta> tags.

  • Learn how search engines use <head> metadata.

  • Optimize your <head> for faster loading.

Scroll to Top