The <head>
element in HTML is a container for metadata and other non-visible elements that provide information about the HTML document. It is placed within the <html>
element but before the <body>
element. The content inside the <head>
element does not appear directly on the webpage but instead provides important information about the document itself or includes external resources that are necessary for the page to function correctly. Here are some commonly used elements within the <head>
element:
<title>
: The<title>
element defines the title of the HTML document, which is displayed as the page title in the browser’s title bar or tab.
<head>
<title>My Webpage</title>
</head>
<meta>
: The<meta>
element is used to provide various metadata about the document, such as character encoding, viewport settings, author information, description, keywords, and more.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is my webpage">
<meta name="keywords" content="HTML, CSS, JavaScript">
</head>
<link>
: The<link>
element is used to link external resources to the HTML document, such as CSS stylesheets, favicons, or external JavaScript files.
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="preload" href="script.js" as="script">
</head>
<script>
: The<script>
element is used to embed or reference JavaScript code within the HTML document. It can be placed within the<head>
or<body>
section depending on the requirements.
<head>
<script src="script.js"></script>
</head>
- Other elements: There are other elements that can be used within the
<head>
section, such as<style>
for embedding CSS styles directly in the HTML document or<base>
for specifying a base URL for relative URLs within the page.
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<base href="https://www.example.com/">
</head>
The <head>
element plays a crucial role in defining the metadata and including external resources that enhance the functionality, appearance, and accessibility of the HTML document. It provides important information for search engines, browsers, and other tools that process the webpage.