The <head> section in an HTML document contains metadata, which provides information about the webpage.
It does not display content directly on the page but helps with SEO, page styling, and browser behavior.
What This Tutorial Covers:
- What is the <head> section
- Essential <head> elements
- Metadata and SEO optimization
- Linking external CSS and JavaScript files
- Favicon setup
- Best practices for the <head> section
1. What is the <head> Section?
The <head> section is placed before the <body> and contains information that helps browsers, search engines, and social media platforms understand the webpage.
Basic Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
Explanation:
- <title> sets the page title shown in browser tabs.
- <meta> tags define character encoding and responsiveness.
- The <head> section does not display content on the webpage.
2. Essential <head> Elements
2.1 <title>: Defines the Page Title
The <title> appears in browser tabs and search results.
<title>My Awesome Website</title>
- Search engines use it for ranking.
- Should be concise and descriptive (max 60 characters).
2.2 <meta>: Metadata for Search Engines and Browsers
Metadata provides information about the page.
Basic Meta Tags:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="John Doe"> <meta name="description" content="A website that provides tutorials on web development."> <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
Explanation:
| Meta Tag | Purpose |
|---|---|
| charset=”UTF-8″ | Defines character encoding (supports all languages). |
| viewport | Makes the website responsive for mobile devices. |
| author | Specifies the webpage’s author. |
| description | Describes the page for SEO and search engine results. |
| keywords | Helps search engines understand content (not widely used now). |
2.3 <link>: Linking External Resources
Linking CSS Stylesheets:
<link rel="stylesheet" href="styles.css">
- Loads an external CSS file for styling.
Adding a Favicon:
<link rel="icon" type="image/png" href="favicon.png">
- Sets a small icon in browser tabs.
2.4 <script>: Linking JavaScript Files
External JavaScript:
<script src="script.js" defer></script>
- Loads an external JavaScript file.
- defer ensures the script loads after the page content.
Inline JavaScript:
<script>
console.log("Hello from the head section!");
</script>
2.5 <meta> for Social Media (Open Graph & Twitter)
When sharing a webpage on Facebook, Twitter, or LinkedIn, social media previews use Open Graph and Twitter meta tags.
Open Graph (Facebook, LinkedIn):
<meta property="og:title" content="My Awesome Website"> <meta property="og:description" content="A website that provides tutorials on web development."> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com"> <meta property="og:type" content="website">
Twitter Card (Twitter):
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Awesome Website"> <meta name="twitter:description" content="A website that provides tutorials on web development."> <meta name="twitter:image" content="https://example.com/image.jpg">
2.6 <meta> for SEO and Indexing Control
These meta tags control search engine indexing.
Allow Indexing:
<meta name="robots" content="index, follow">
- Allows search engines to index and follow links.
Block Indexing:
<meta name="robots" content="noindex, nofollow">
- Prevents the page from appearing in search results.
3. Advanced <head> Elements
3.1 <base>: Set a Base URL for Relative Links
<base href="https://example.com/">
- Converts all relative URLs into absolute URLs.
Example:
<img src="images/photo.jpg">
- Becomes https://example.com/images/photo.jpg.
3.2 <meta> for Mobile Compatibility
<meta name="theme-color" content="#ff5733">
- Changes the mobile browser’s address bar color.
3.3 <meta> for Apple Devices
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon.png"> <meta name="apple-mobile-web-app-capable" content="yes">
- Defines a custom app icon for iOS home screens.
4. Best Practices for the <head> Section
Keep It Organized
- Place important meta tags first (charset, viewport).
- Group related SEO and social media tags.
Optimize for Speed
- Load stylesheets first (<link rel=”stylesheet”>).
- Load JavaScript last (<script defer>).
Ensure Mobile-Friendliness
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Ensures the page scales correctly on mobile.
Use a Descriptive Title and Meta Description
<title>Learn HTML and CSS - Beginner Guide</title> <meta name="description" content="A complete guide to learning HTML and CSS from scratch.">
- Helps with SEO and click-through rates.
