HTML Tutorial: HTML Head
Learn how to use the HTML <head> section to add metadata, title, CSS, and JS with examples and colorful outputs
The HTML <head> section contains metadata and links that help define your webpage. It includes title, styles, scripts, meta tags, and more.
1️⃣ Basic Head Structure
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World!
</body>
</html>
OUTPUT:
Hello World!
Page title appears in the browser tab: My First Page
✔️ <title> sets browser tab name ✔️ Head does not display content directly on page
2️⃣ Adding Metadata
INPUT:
<head>
<title>My Page</title>
<meta charset="UTF-8">
<meta name="description" content="My first HTML tutorial page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
OUTPUT:
Hello World! (content appears in body)
Meta tags define charset, description, and viewport for responsive design and SEO
✔️ <meta charset> → sets character encoding ✔️ <meta name="description"> → SEO description ✔️ <meta name="viewport"> → responsive design
3️⃣ Linking CSS and JS
INPUT:
<head>
<title>Styled Page</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
OUTPUT:
✅ Page styled using external CSS and interactive using external JS
✔️ <link rel="stylesheet"> → links CSS ✔️ <script src> → links JS ✔️ Keeps HTML clean and organized
4️⃣ Favicon Example
INPUT:
<head>
<title>My Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
OUTPUT:
✅ Browser tab shows custom favicon (icon)
✔️ <link rel="icon"> → sets small icon in browser tab ✔️ Improves branding and recognition
5️⃣ Best Practices for <head>
- Always include <title> for SEO and user clarity
- Use <meta charset="UTF-8"> for consistent text encoding
- Include viewport meta for responsive design
- Link CSS and JS externally when possible
- Include favicon for branding
🚀 What’s Next?
👉 HTML Layout
Next lesson will cover:
- Organizing HTML content using divs and sections
- Creating structured layouts
- Using header, footer, and main elements
The HTML <head> section defines metadata, links, and scripts, which are essential for SEO, styling, interactivity, and proper webpage structure.