HTML Head
The HTML <head> element is a container for storing metadata, document links, styles, and scripts that are not directly displayed in the page content area.
Simply put, the content in <head> is for browsers and search engines, while the content in <body> is for users.
The <head> element is placed after the <html> tag and before the <body> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata, styles, scripts, etc. go here -->
</head>
<body>
<!-- Visible page content goes here -->
</body>
</html>Common Elements in <head>
Here are the most commonly used tags inside the <head> element:
1. The <title> Element
This is the only required element in <head>. It defines the document's title, which is used in three key places:
- The title in the browser toolbar (or tab).
- The default name when users add the page to favorites (bookmarks).
- The page title displayed in search engine results pages (SERP).
<head>
<title>My Website - Home</title>
</head>An accurate, concise title is very important for both usability and search engine optimization (SEO).
2. The <meta> Element
The <meta> tag is used to provide metadata about the HTML document. It's an empty element. Common uses include:
Declaring the character set: This is one of the most important
<meta>tags and should always be the first child element of<head>to ensure the browser correctly parses all text characters.html<meta charset="UTF-8">Setting the viewport: This is crucial for creating responsive designs. It tells the browser how to control the page's dimensions and scaling.
html<meta name="viewport" content="width=device-width, initial-scale=1.0">Page description and keywords (SEO): While search engines now give very low weight to
keywords,descriptionis still very important. It's usually displayed as the snippet in search results.html<meta name="description" content="This is a website about learning HTML."> <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">Author information:
html<meta name="author" content="John Doe">
3. The <link> Element
The <link> element defines the relationship between the current document and external resources. Its most common use is to link external CSS stylesheets.
<head>
<link rel="stylesheet" href="styles/main.css">
</head>rel="stylesheet"indicates the linked resource is a stylesheet.hrefspecifies the path to the CSS file.
It can also be used to link the website's icon (favicon).
4. The <style> Element
If you don't want to use an external stylesheet, you can use the <style> element to define CSS styles inside the HTML document (usually called "internal styles").
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
}
</style>
</head>5. The <script> Element
The <script> tag is used to embed or reference executable JavaScript code. It can contain code directly or link to an external .js file via the src attribute.
<head>
<!-- Reference external script -->
<script src="scripts/main.js"></script>
<!-- Internal script -->
<script>
alert('Hello, World!');
</script>
</head>Best Practice: To improve page load performance, it's generally recommended to place <script> tags at the end of the <body> element rather than in <head>, unless the script needs to execute before the page renders.
6. The <base> Element
The <base> element can set a base URL for all relative links on the page (like <img>, <a>). A document can have at most one <base> element.
<head>
<base href="https://www.example.com/images/" target="_blank">
</head>
<body>
<!-- This image will load from https://www.example.com/images/logo.png -->
<img src="logo.png">
<!-- This link will open in a new tab -->
<a href="page.html">A page</a>
</body>