The HTML <head> element is used as a container for metadata (data about data). It is used between the <html> tag and the <body> tag.
The top section of an HTML document, known as the head, does not appear on the page when it loads in a browser. Its purpose is to hold metadata that provides information about the HTML document itself.
The amount of metadata present in an HTML head section can vary significantly based on the specific needs of a project. Despite this variability, the head section plays a critical role in the development of a website within an HTML document.
Metadata encompasses various details such as the document's title, character encoding, styles, links, scripts, and other relevant information.
Following is a list of tags used in metadata:
- <title>
- <style>
- <meta>
- <link>
- <script>
- <base>
HTML <title> Element
The HTML <title> element is used to define the title of the document. It is used in all HTML/XHTML documents. The <title> element must be placed between the <head> element, and a document can only have one title element.
What does the <title> element do?
- It defines a title in the browser tab.
- It provides a title for the page when it is added to favorites.
- It displays a title for the page in search engine results.
Note: Keep titles concise (about 50-60 characters) so they display well in search results.
Example
<!DOCTYPE html>
<html>
<head>
<title>This Page Title</title>
</head>
<body>
<p>The body's content is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites, and in search engine results.</p>
</body>
</html>
HTML <style> Element
The HTML <style> tag is essential for formatting the appearance of an HTML document. By using the <style> tag, we can specify CSS styles that will affect only the specific HTML page. To ensure consistent styling across multiple pages, it is recommended to create a separate CSS file for applying CSS rules universally.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Page Title</title>
<style>
body {background-color: pink;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML <link> Element
The HTML <link> tag plays a crucial role in connecting an external style sheet to a webpage. Within the <link> tag, you will find essential attributes such as "rel" and "href". The "rel" attribute specifies the type of relationship, indicating it is a style sheet, while the "href" attribute provides the specific path to the external file.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Web-page with external CSS</h2>
<p>This is looking a cool page</p>
</body>
</html>
HTML <meta> Element
The HTML <meta> element is crucial for defining various metadata details on a webpage, such as character set, page description, keywords, and authors.
Metadata plays a crucial role in enhancing the visibility and ranking of your webpage among browsers, search engines, and various web services.
Let's see how to use metadata:
To define a character set:
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
The charset attribute defines the character encoding used on a webpage. In this instance, we have configured it to "UTF-8," enabling support for displaying content in various languages.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p>
<p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>
</body>
</html>
Output:
To define a description of your webpage:
<meta name="description" content="Free Web tutorials">
Providing a meta description is beneficial for enabling search engines to effectively perform relevant searches.
To define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
The value of a keyword is utilized for search engine optimization purposes, although it might be disregarded by web browsers as a result of spamming activities.
To define author of the webpage:
<meta name="author" content="Akon">
The author value indicates the individual responsible for creating the content on a page, and it is valuable for content management systems to automatically retrieve author details.
To refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
The Meta refresh feature is utilized to direct the browser to refresh the page automatically at a specified time interval. In the provided instance, the page will refresh itself after 30 seconds.
<meta http-equiv="refresh" content="10; url=https://logic-practice.com/html-head">
When a URL is accompanied by a content value, it will automatically redirect to the specified page once the predetermined time limit expires.
Note: Prefer HTTP 301/302 redirects instead of meta refresh for SEO and usability.
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; url=https://logic-practice.com/html-head">
</head>
<body>
<h2>Meta element Example</h2>
<p style="color: green;">Kindly wait for 5 seconds, and after 5 seconds it will automatically redirect to the URL specified in the meta tag</p>
</body>
</html>
Example
An illustration is provided below to demonstrate the utilization of all Meta elements within the HTML head section.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="Akon">
</head>
<body>
<p>All the metadata information is set.</p>
</body>
</html>
Use the <meta> tag to set the Viewport
This technique was introduced in HTML5 to manage the viewport using the <meta> tag.
The viewport refers to the visible area of a webpage that is displayed to the user. It varies in size depending on the device being used, being smaller on mobile devices compared to desktop screens.
Syntax for <meta> viewport element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The <meta> viewport element is responsible for determining the management of the dimensions and scaling of a webpage.
The width=device-width attribute is employed to establish the page's width to match the screen-width of the device, which may differ based on the specific device in use.
The initial-scale=1.0 attribute is utilized to establish the starting zoom level upon the browser's first rendering of the page.
Example
Illustration of a web page lacking the viewport <meta> meta tag:
<!DOCTYPE html>
<html>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="image" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</p>
</body>
</html>
Example
Illustration of a webpage utilizing the viewport <meta> meta tag:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="image" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</p>
</body>
</html>
Note: To see the difference clearly, open this page on a smartphone or tablet.
HTML <base> Element
The HTML <base> tag is utilized to define the default URL and default target for all relative URLs within a webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://images.example.com/htmlpages/images/" target="_blank">
</head>
<body>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<p>We have specified a base URL; the browser will look for the image "html5.png"
at "https://images.example.com/htmlpages/images/html5.png"</p>
<p><a href=" https://logic-practice.com">C# Tutorial</a></p>
<p>The link above will open in a new window because the base target is set to "_blank".</p>
</body>
</html>
HTML <style> Element
The HTML <style> element is used to style the HTML page. The <style> element can have CSS properties for that HTML page only. If we want to apply CSS to multiple pages, then we should use a separate CSS file.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Page Title</title>
<style>
body {background-color: pink;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML <link> Element
The HTML <link> element is used to link an external style sheet to your webpage. The <link> element contains two main attributes, which are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Web-page with external CSS</h2>
<p>This is looking a cool page</p>
</body>
</html>
HTML <meta> Element
The HTML <meta> element is used to specify the character set, page description, keywords, authors, and other metadata on the webpage.
Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.
Let's see how to use metadata:
To define a character set:
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
The charset attribute specifies the character encoding. In this example, we have set it to "UTF-8," which means it can display any language.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p>
<p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>
</body>
</html>
Output:
To define a description of your webpage:
<meta name="description" content="Free Web tutorials">
If you give a meta description, then it will be useful for the relevant search to perform by search engines.
To define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
The keyword value is also used to provide keywords for a search engine, but it may be ignored by the browser due to spammers.
To define author of the webpage:
<meta name="author" content="Akon">
The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by some content management systems.
To refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Meta refresh is used to provide instructions to the browser to automatically refresh the page after a given time interval. As in the above example, it will automatically refresh after 30 seconds.
<meta http-equiv="refresh" content="10; url=https://logic-practice.com/html-head">
If you add a URL with a content value, then it will redirect to that page after the time limit has passed.
Note: Prefer HTTP 301/302 redirects instead of meta refresh for SEO and usability.
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; url=https://logic-practice.com/html-head">
</head>
<body>
<h2>Meta element Example</h2>
<p style="color: green;">Kindly wait for 5 seconds, and after 5 seconds it will automatically redirect to the URL specified in the meta tag</p>
</body>
</html>
Example
The following is an example to show how to use all Meta elements within the HTML head
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="Akon">
</head>
<body>
<p>All the metadata information is set.</p>
</body>
</html>
Use the <meta> tag to set the Viewport
This method is introduced in HTML5 to take control over the viewport by using the <meta> tag.
Viewport is the user's visible area of a webpage . It changes from device to device and appears smaller on mobile phones than on computer screens.
Syntax for <meta> viewport element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here, the <meta> viewport element specifies how to control the page's dimensions and scaling.
The width=device-width is used to set the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 is used to set the initial zoom level when the page is first loaded by the browser.
Example
Example of a web page without the viewport <meta> tag:
<!DOCTYPE html>
<html>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="image" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</p>
</body>
</html>
Example
Example of a web page with the viewport <meta> tag:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="image" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</p>
</body>
</html>
Note: To see the difference clearly, open this page on a smartphone or tablet.
HTML <base> Element
The HTML <base> element is used to specify the base URL and base target for all relative URLs in a page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://images.example.com/htmlpages/images/" target="_blank">
</head>
<body>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<p>We have specified a base URL; the browser will look for the image "html5.png"
at "https://images.example.com/htmlpages/images/html5.png"</p>
<p><a href=" https://logic-practice.com">C# Tutorial</a></p>
<p>The link above will open in a new window because the base target is set to "_blank".</p>
</body>
</html>
HTML <script> element
The HTML <script> element is utilized for incorporating client-side JavaScript within the webpage itself or for linking an external JavaScript file to the existing page.
Example
<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
document.getElementById("p").style.color="green";
}
</script>
</head>
<body>
<h2>Script within Head element</h2>
<p id="p">This will change the color</p>
<button type="button" onclick="fun()">Click me</button>
</body>
</html>
To include an external JavaScript file, we can achieve this by:
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
Excluding <html>, <head> and <body> elements
HTML5 enables us to omit the <html>, the <body>, and the <head> tags.
Example:
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Note: It is not recommended to omit the <head> and <head> tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).
However, you can omit the <head> tag.
Conclusion
The head section of an HTML file may not be visible on the webpage, but it plays a crucial role in determining the functionality and appearance of the site to users. It manages the page title, sets the character encoding, connects to external stylesheets and scripts, and offers metadata that aids search engines and social media platforms in comprehending your content. A properly organized head contributes to a faster website performance, enhanced accessibility, and improved responsiveness on various devices.
While some older practices, like the <meta keywords> tag or meta refresh redirects, are no longer recommended, modern tags such as <meta charset> and <meta viewport> are must-haves. Paying attention to the head ensures your site not only looks good but also performs well behind the scenes.