HTML <head> Tag

Let’s talk about HTML Tag head examples in this post. It should be a worthwhile learning experience.

The <head> tag is an important element in HTML that is used to provide information about the document that is not visible on the web page itself. It is located between the opening <html> tag and the opening <body> tag of an HTML document.

A basic HTML document with a <title> tag as a part of the head section:


<!DOCTYPE html> <html lang="en"> <head><title>Your HTML Page Title belongs here</title> </head> <body> <h1>Most Significant heading h1</h1> <p>Here, write a paragraph about the heading</p> </body> </html>

The following are further examples of Tag Head.

<base> tag (defines the URL and target for any links on a page) appears within <head>:


<!DOCTYPE html> <html> <head> <base href="" target="_blank"> </head> <body><img src="" width="24" height="39" alt="Stickman"> <a href="tags/tag-base">HTML base Tag</a></body> </html>

<style> tag (for including style details to a page) is placed inside <head>:


<!DOCTYPE html> <html> <head> <style> h1 {color: green;} p {color: yellow;} </style> </head> <body> <h1>Most significant heading</h1> <p>Details about heading the the paragraph</p> </body> </html>

<link> tag (for linking to an external style sheet) appears inside <head>:


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Heading formatted with the linked stylesheet</h1> <p>paragraph formatted with the linked stylesheet</p> </body> </html>

An HTML document’s <meta> tag specifies its metadata. In other words, metadata is data (information) about data. Here is an example of meta within the <head> tag:


<!DOCTYPE html> <html> <head> <title>Mr Examples</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcome to Mr Examples</h1> <p>This is the content of Mr Examples.</p> </body> </html>

HTML <head> Tag Working

Here are some of the things that can be included within the <head> tag:

  • The title of the web page is typically included within the <title> tag. This text appears in the browser’s title bar and is also used by search engines to describe the page in search results.
  • Meta tags can be included within the <head> section to provide information about the web page to search engines and other software. Common meta tags include description, keywords, author, and viewport.
  • The <head> section can include references to external CSS and JavaScript files. This is typically done using the <link> and <script> tags, respectively.
  • A favicon is a small icon that appears in the browser’s address bar and on browser tabs. It can be included within the <head> section using the <link> tag and the rel=”icon” attribute.
  • Other elements that can be included within the <head> section include the <base> tag, which specifies the base URL for all relative URLs on the page, and the <style> tag, which is used to embed CSS styles directly within the HTML document.

Tag Head Usage

The <head> element includes metadata (data about data) and lies between the <html> tag and the <body> tag.

The document’s metadata is information about it. There is no display of metadata.

Titles, character sets, styles, scripts, and other meta information are generally specified by metadata.

Elements that can be placed inside the <head> element include:

Browser Compatibility




The Tag head <head> is compatible with the Global Attributes in HTML.

Predefined CSS

When it comes to Tag head, a lot of browsers provide the <head> element with the default values as follows:

head {
display: none;

HTML <head> Tag Benefits

The HTML <head> tag provides several benefits for web developers and website visitors. Here are some of the key benefits:

  • The <head> tag allows you to include meta tags that provide information about the web page to search engines. This can help to improve the search engine rankings of your website and increase traffic to your site.
  • By including a <title> tag in the <head> section, you can provide users with a clear and descriptive title for the web page. This can help to improve the user experience and make it easier for users to find the information they are looking for.
  • The <head> tag allows you to include information that is specific to certain browsers, such as a favicon or viewport meta tag. This can help to ensure that your website displays properly on different devices and browsers.
  • The <head> tag can be used to include accessibility-related metadata, such as language and accessibility settings. This can help to ensure that your website is accessible to all users, including those with disabilities.
  • By including external CSS and JavaScript files in the <head> section, you can help to improve the page loading speed of your website. This is because the browser can begin downloading these files while it is parsing the rest of the HTML document.
Leave your reaction below in order to appreciate our efforts or to suggest us some improvements for the betterment of this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *