Introduction
In this chapter, you will learn about the HTML <head> element, which is a container for metadata and links to external resources.
The <head> element is crucial for defining the document’s title, character set, linked stylesheets, scripts, and other meta-information that is essential for the proper functioning and display of your web pages.
What is the <head> Element?
The <head> element is an HTML tag used to contain metadata and links to resources such as stylesheets and scripts. It is placed between the <html> and <body> tags.
Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and links go here -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Common <head> Elements
<title>
The <title> element defines the title of the document, which appears in the browser’s title bar or tab. It is a required element in the head section.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>
<meta>
The <meta> element provides metadata about the HTML document, such as character set, viewport settings, author, and description.
Example: Character Set
<meta charset="UTF-8">
Example: Viewport Settings
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example: Description
<meta name="description" content="This is a description of my web page.">
<link>
The <link> element is used to link to external resources such as stylesheets. It is commonly used to link CSS files.
Example
<link rel="stylesheet" href="styles.css">
<script>
The <script> element is used to include JavaScript in the document. It can be placed in the head or body sections, but it is often placed in the head for scripts that need to be loaded before the page content.
Example
<script src="script.js"></script>
<style>
The <style> element is used to define internal CSS styles. It is placed within the head section.
Example
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
<base>
The <base> element specifies the base URL for all relative URLs in the document. It must be included inside the head element.
Example
<base href="https://www.example.com/">
<link> for Favicons
Favicons are small icons that appear in the browser tab. You can link a favicon using the <link> element.
Example
<link rel="icon" href="favicon.ico" type="image/x-icon">
Real-World Example: Complete <head> Section
Here is a complete example of a head section containing various elements that are commonly used in web pages.
Example
<!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.">
<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;
}
h1 {
color: green;
}
</style>
<script src="script.js"></script>
</head>
<body>
<h1>Welcome to My Sample Web Page</h1>
<p>This is an example of a complete head section.</p>
</body>
</html>
Explanation
<meta charset="UTF-8">: Sets the character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to ensure the page is responsive.<meta name="description" content="This is a sample web page.">: Provides a description of the web page.<title>Sample Web Page</title>: Sets the title of the web 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 file.<style>: Defines internal CSS styles.<script src="script.js"></script>: Links to an external JavaScript file.
Conclusion
The HTML <head> element is a crucial part of every web page, containing metadata, links to external resources, and other important information. By properly utilizing the <head> element, you can enhance the functionality, appearance, and SEO of your web pages. Understanding how to use the various elements within the head section is essential for effective web development.