Head Section Overview in HTML (`<head>`)

The <head> element in HTML is a container for metadata (data about the document).

It is placed between the <html> and <body> tags and does not display content directly on the web page.

? Think of the <head> section as the “control center” of a webpage.

Basic Syntax of `<head>`

<head>
  <title>My Website</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>

Common Elements Inside `<head>`

<title> – Page Title
<meta> – Metadata for SEO & Settings
<link> – Linking External Resources
<style> – Internal CSS
<script> – JavaScript (Optional in <head>)
<base> – Base URL for Relative Links

Why is the `<head>` Section Important?

Provides SEO-friendly metadata
Ensures proper rendering on all devices
Helps browsers load external stylesheets, fonts, and icons
Improves performance with preload, preconnect, and caching instructions

Complete Example <head> Section :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Complete guide to HTML head section with examples.">
  <meta name="keywords" content="HTML head, HTML SEO, HTML metadata, HTML tutorial">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>HTML Head Section - Explained with Examples</title>

  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">

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

  <script src="app.js" defer></script>
</head>
<body>
  <h1>Welcome to HTML Tutorial</h1>
</body>
</html>

Head Section Overview in HTML (<head>)

Basic Syntax of <head>

Common Elements Inside <head>

Why is the <head> Section Important?

Head Section Overview in HTML (`<head>`)

Basic Syntax of `<head>`

Common Elements Inside `<head>`

Why is the `<head>` Section Important?