The <head> tag in HTML is an essential element used to define the head section of an HTML document. It is placed inside the <html> tag, and used to store information that doesn’t appear directly on the webpage itself.
- It contains metadata that helps the browser and search engines to understand the content of the page.
- In HTML 4, the <head> element was mandatory but in HTML5, the <head> element can be omitted.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Title</title>
<meta charset="UTF-8">
<meta name="description" content="An example webpage.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Common Element Inside head tag
HTML <head> tag is a type of container which has the following tags called <title>, <meta>, <link>,<style>,<script> and <noscript>.
1. The <title> Tag
The <title> tag is one of the most important parts of your <head> tag. It tells search engines and users what your page is about.
Syntax:
<head>
<title>Title of the document</title>
</head>The <meta> tag provides metadata about the document, such as the character set, description, and keywords. It also includes information for search engines, social media platforms, and browsers.
- Character Set: This tells the browser to use the UTF-8 character encoding, which supports most characters used worldwide.
<meta charset="UTF-8">
- Meta Description: Search engines use meta description in search results. A well-crafted description can increase the likelihood of users clicking through to your page.
<meta name="description" content="This is a article for understanding the HTML head tag.">
- Viewport Meta Tag: This tag ensures the webpage is responsive, meaning it will display correctly on devices with different screen sizes, such as mobile phones and tablets.
<meta name="viewport" content="width=device-width, initial-scale=1">
3. The <link> Tag
The <link> tag is used to link external resources to the document, most commonly stylesheets or icons like favicons.
<link rel="stylesheet" href="styles.css">
4. The <style> Tag
The <style> tag allows you to write CSS directly within the HTML document, though external stylesheets are generally preferred for larger projects.
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>5. The <script> Tag
The <script> tag is used to include or reference JavaScript files that add interactivity and dynamic functionality to the webpage.
<script src="script.js" defer></script>
6. The <noscript> Tag
The <noscript> tag defines alternative content for users whose browsers do not support or have disabled JavaScript.
<noscript>
Your browser does not support JavaScript or it is disabled.
</noscript>HTML <head> Tag – FAQs
What is the role of the <title> tag inside the <head>?
The <title> tag defines the title of the web page, which appears in the browser’s title bar or tab. It is also used by search engines as the clickable headline in search results and plays a role in SEO.
Meta tags provide metadata about the HTML document, such as the character set, page description, keywords, author, and viewport settings for responsive design. They are important for SEO, accessibility, and ensuring proper rendering on different devices.
Can JavaScript be included in the <head> tag?
Yes, JavaScript can be included in the <head> tag using the <script> element. However, scripts in the <head> are usually for functions that need to be executed before the page loads, such as analytics or configuration scripts. To avoid blocking rendering, it’s common to place scripts at the end of the <body> tag or use the defer or async attributes.
Yes, you can include multiple <meta> tags in the <head> to provide various types of metadata, such as description, keywords, author, and other information relevant to search engines and browsers.
What happens if the <head> tag is missing in an HTML document?
While browsers can still render the page without a <head> tag, important metadata like the document title, character encoding, and styles may be missing, leading to poor SEO, accessibility issues, and incorrect display. The <head> tag is essential for a well-structured HTML document.