Head
What is the <head> Tag ?
The <head> tag in HTML contains meta-information about the web page. It is one of the most important parts of an HTML document, as it includes tags that are crucial for SEO, styling and external resources.
All the sensitive and essential information like the title of the page, character encoding, linked CSS/JS files, metadata, and base URL is placed within the <head> section.
Basic Structure of the <head> Element
Key Elements Inside the <head> Tag
1. <title>: Sets the Page Title
The <title> tag defines the title of your webpage, which appears in the browser tab and in search engine results. It helps users identify the content and is essential for SEO.
Example:
Output:
2. <style>: Embeds CSS Styles
The <style> tag allows you to include CSS directly within your HTML file. It is used to apply style like colors, fonts and layout adjustments.
Example:
Output:
3. <meta>: Provides Metadata
The <meta> tag defines metadata such as page description, keywords, author info, and character encoding. It improves SEO and browser compatibility.
Example:
4. <link>: Connects External Resources
The <link> tag is used to link external resources such as CSS stylesheets or favicons.
Example:
5. <script>: Adds JavaScript
The <script> tag is used to embed JavaScript code into the page. This allows you to add interactivity and dynamic behavior to your site.
Example:
6. <base>: Sets a Base URL
The <base> tag specifies the base URL for all relative URLs on a page. This is helpful when working with resources like images, stylesheets or links that use relative paths.
Example:
The <head> tag in HTML contains meta-information about the web page. It is one of the most important parts of an HTML document, as it includes tags that are crucial for SEO, styling and external resources.
All the sensitive and essential information like the title of the page, character encoding, linked CSS/JS files, metadata, and base URL is placed within the <head> section.
Basic Structure of the <head> Element
<!DOCTYPE html> <html> <head> <title>Head</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <p>This is a paragraph</p> </body> </html>
Key Elements Inside the <head> Tag
1. <title>: Sets the Page Title
The <title> tag defines the title of your webpage, which appears in the browser tab and in search engine results. It helps users identify the content and is essential for SEO.
Example:
<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <p>Title Example</p> </body> <html>
Output:
2. <style>: Embeds CSS Styles
The <style> tag allows you to include CSS directly within your HTML file. It is used to apply style like colors, fonts and layout adjustments.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Style</title>
<style>
h4{
background-color: aliceblue;
}
p{
font-size: 12px;
color: blue;
}
</style>
</head>
<body>
<h4>Style Example</h4>
<p>This is how we use style</p>
</body>
</html>Output:
3. <meta>: Provides Metadata
The <meta> tag defines metadata such as page description, keywords, author info, and character encoding. It improves SEO and browser compatibility.
- Viewport settings for responsive design: This tag is crucial for ensuring your webpage displays well on mobile devices, adjusting the page's width and scaling accordingly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Character set declaration: This specifies the character encoding for the document, ensuring that text displays correctly across different browsers and devices.
<meta charset="UTF-8">
- Page Description: This description often appears in search engine results, providing a brief summary of the page's content.
<meta name="description" content="A comprehensive guide to understanding HTML basics and best practices.">
- Author Information: The <meta> tag, typically place in the <head> section, is a silent yet powerful tool for enhancing how your webpage is interpreted, displayed and discovered.
<meta name="author" content="John Doe">
Example:
<!DOCTYPE html> <html> <head> <title>Meta</title> <meta name="description" content="A guide to HTML tags"/> <meta name="keywords" content="HTML, web development"/> </head> <body> <h4>Meta Example</h4> <p>This is how we provide metadata</p> </body> </html>
NOTE: This meta data not display directly on the page but it is essential for browsers, search engines and other services.
4. <link>: Connects External Resources
The <link> tag is used to link external resources such as CSS stylesheets or favicons.
Example:
<!DOCTYPE html> <html> <head> <title>Link</title> <link rel="stylesheet" type="text/css" href="style.css"/> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> </head> <body> <h4>Link Example</h4> <p>This is how we link CSS files and other external resources</p> </body> </html>
5. <script>: Adds JavaScript
The <script> tag is used to embed JavaScript code into the page. This allows you to add interactivity and dynamic behavior to your site.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Script</title>
<Script>
function greetuser(){
alert("Hello, welcome to our website!");
}
</script>
</head>
<body>
<h4>Script Example</h4>
<This is how we add JavaScript to HTML></p>
</body>
</html>6. <base>: Sets a Base URL
The <base> tag specifies the base URL for all relative URLs on a page. This is helpful when working with resources like images, stylesheets or links that use relative paths.
- href: Specifies the base URL.
- target: Sets the default target for all hyperlinks (Ex- opening links in a new tab with target="_blank")
Example:
<!DOCTYPE html> <html> <head> <title>Base</title> <base href="https://quipoin.com"> <head> <body> <h4>Base Example</h4> <p>This is how we use Base</p> </body> </html>
Key Point
- The <head> tag contains crucial information not directly displayed on the webpage.
- Tags like <title>, <style>, <meta>, <link>, <script> and <base> all reside inside the <head>.
- Proper use of the <head> tag improves SEO, page loading, responsiveness and user experience.
- Always place the <head> section before the <body>.