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>