Table of Contents
The <head> element is a vital part of an HTML document, containing metadata and links to external resources that are essential for the page’s functioning but not directly visible to users.
This section helps the browser understand the content and how to display it properly.
Basic Structure of the <head> Element
The <head> element is placed immediately after the opening <html> tag and before the <body> tag. Here's a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph of text.</p>
</body>
</html>Key Elements Inside <head>
1. <title>
The <title> element sets the title of the web page, which appears in the browser’s title bar or tab.
<title>My First Web Page</title>2. <meta>
The <meta> tags provide metadata about the HTML document. Common attributes include:
• charset: Specifies the character encoding for the document.
<meta charset="UTF-8">• name and content: Provide metadata such as descriptions, keywords, author information, and viewport settings.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page">
<meta name="keywords" content="HTML, CSS, JavaScript">>
<meta name="author" content="Your Name">3. <link>
The <link> element is used to link external resources like stylesheets.
<link rel="stylesheet" href="styles.css">Common attributes for the <link> tag:
• rel: Specifies the relationship between the current document and the linked resource. Common values include stylesheet for CSS files and icon for favicon.
• href: Specifies the URL of the linked resource.
4. <style>
The <style> element contains internal CSS to style the document.
<style>
body {
background-color: lightblue;
}
</style>5. <script>
The <script> element is used to include or reference JavaScript.
<script src="script.js"></script>Or to include inline JavaScript:
<script>
console.log('Hello, world!');
</script>6. <base>
The <base> element specifies the base URL for all relative URLs in the document.
<base href="https://www.example.com/">7. <link> for Favicons
To add a favicon to your website, use the <link> tag with the rel="icon" attribute.
<link rel="icon" href="favicon.ico" type="image/x-icon">Detailed Example
Here is a more comprehensive example of a <head> section:
<!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="This is a sample web page">
<meta name="keywords" content="HTML, example, sample">
<meta name="author" content="John Doe">
<title>Sample Web Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script>
console.log('Page is loaded');
</script>
<base href="https://www.example.com/">
</head>
<body>
<h1>Welcome to My Sample Web Page</h1>
<p>This is a paragraph on the sample web page.</p>
</body>
</html>• <meta charset="UTF-8">: Specifies that the character encoding is UTF-8.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive.
• <meta name="description" content="This is a sample web page">: Provides a brief description of the page.
• <meta name="keywords" content="HTML, example, sample">: Specifies keywords for search engines.
• <meta name="author" content="John Doe">: Indicates the author of the document.
• <title>Sample Web Page</title>: Sets the title of the page.
• <link rel="stylesheet" href="styles.css">: Links to an external CSS file.
• <link rel="icon" href="favicon.ico" type="image/x-icon">: Links to a favicon.
• <style>: Contains internal CSS styles.
• <script>: Includes inline JavaScript.
• <base href="https://www.example.com/">: Sets the base URL for the document.
Summary
The <head> element is essential for defining metadata and linking external resources in an HTML document. It plays a crucial role in how the browser processes and displays the web page, impacting everything from SEO to page load speed and user experience.
By correctly using the various elements within <head>, you ensure that your web page is well-optimized and functional.
To learn more about HTML, click here: HTML