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.
<!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>2. The <meta> Tag
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.
Common types of meta tags:
- 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="https://www.geeksforgeeks.org/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="https://www.geeksforgeeks.org/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>