The <head> section acts as the control room of your web page. It holds background information that browsers and search engines use to understand what your page is about. Everything you put inside <head> affects how the page looks, behaves, and ranks.
Here’s how a basic structure looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML Head with examples and explanation.">
<meta name="keywords" content="HTML head, meta tags, title tag, SEO tutorial">
<meta name="author" content="WebTutorials">
<title>HTML Head Tutorial</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<script src="main.js"></script>
</head>
<body>
<h1>Welcome to HTML Head Tutorial</h1>
</body>
</html>Elements You Can Include in the Head Section
The <head> tag contains multiple smaller elements that each serve a specific purpose. Let’s explore them one by one.
1. <title>
The <title> tag defines the name of the web page that appears on the browser tab and in search engine results.
Example:
<title>HTML Head Tag Explained</title>This helps users and search engines quickly understand what your page is about.
Tip: Keep it under 60 characters for best SEO results.
2. <meta>
The <meta> tag provides important data about the webpage such as keywords, author, viewport settings, and description.
Example:
<meta name="description" content="Detailed explanation of the HTML Head section for beginners.">
<meta name="keywords" content="HTML head, meta tags, HTML tutorial, SEO, beginners guide">
<meta name="viewport" content="width=device-width, initial-scale=1.0">3. <link>
This tag connects your webpage to other files like CSS, fonts, or icons.
Example:
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">The <link> tag ensures that your page has styles, branding, and identity through CSS and favicons.
4. <script>
If your webpage needs dynamic functionality, you can use the <script> tag inside the head.
Example:
<script src="script.js"></script>This loads the JavaScript file before the body content is displayed.
5. <style>
When you want to apply quick styles without linking an external stylesheet, you can write CSS directly inside <style>.
Example:
<style>
body { font-family: Arial; background-color: #f5f5f5; }
</style>Example of a Complete Head Section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn everything about HTML head tag, meta tags, and SEO optimization.">
<meta name="keywords" content="HTML head tag, meta tags, title tag, head element, HTML tutorial for beginners">
<meta name="author" content="HTML Online Compiler">
<title>HTML Head Complete Tutorial</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="script.js"></script>
</head>