HTML head tag

By: Rajesh P.S.

The <head> tag is an HTML element that is used to define the head section of an HTML document. It is placed before the <body> tag and contains metadata, title, and other non-visible information about the webpage. The content within the <head> tag is not displayed directly on the webpage but is crucial for providing instructions and information to the browser and search engines.

Purpose of the HTML <head> tag

The HTML <head> tag is an essential part of an HTML document. It is used to define the metadata, title, and other non-visible information about the webpage. Following is a detailed explanation of the purpose of the <head> tag:

Metadata

The <head> tag contains metadata elements that provide information about the HTML document. These metadata elements include:

<title>: Specifies the title of the webpage, which appears in the browser's title bar or tab.
<meta>: Allows the inclusion of various types of metadata, such as character encoding (<meta charset="UTF-8">), viewport settings for responsive design (<meta name="viewport" content="width=device-width, initial-scale=1.0">), keywords, descriptions, author information, and more.
<link>: Is used to establish links to external resources like stylesheets, icon files (favicon), or other related documents.

Document Configuration

The <head> tag also allows you to configure certain aspects of the HTML document, such as:

<base>: Specifies the base URL for all relative URLs within the document.
<style>: Defines inline CSS styles specific to the document.
<script>: Specifies JavaScript code or links to external JavaScript files.

Search Engine Optimization (SEO)

Properly utilizing the <head> tag and its elements can significantly impact SEO. Elements like the <title> tag and <meta> tags allow search engines to understand and index the content of the webpage accurately. Including relevant keywords and descriptions in these elements can improve search engine visibility and user click-through rates.

Document Structure

The <head> tag helps structure the HTML document by separating the non-visible information from the visible content within the <body> tag. This promotes better organization and maintainability of the code.

Browser Functionality

The <head> tag contains instructions and references that influence browser behavior and rendering. It includes information about the character encoding, viewport settings, linked stylesheets, scripts, and more, enabling the browser to interpret and display the webpage correctly.

Following are a few examples of how the HTML <head> tag can be used with different elements:

Setting the Title and Character Encoding

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Website</title> </head> <body>  </body> </html>

Linking an External Stylesheet

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body>  </body> </html>

Adding a Favicon

<!DOCTYPE html> <html> <head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body>  </body> </html>

Including JavaScript Code

<!DOCTYPE html> <html> <head> <script src="script.js"></script> </head> <body>  </body> </html>

Specifying Viewport Settings for Responsive Design

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>  </body> </html>

Full Source HTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="This is a sample webpage description."> <meta name="keywords" content="HTML, meta tags, example"> <meta property="og:title" content="Sample Webpage"> <meta property="og:image" content="https://example.com/image.jpg"> <meta name="robots" content="index, follow"> </head> <body>  </body> </html>

In the above example:

The <meta charset="UTF-8"> tag specifies the character encoding of the webpage as UTF-8.
The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag configures the viewport to adapt to the device width and sets the initial scale.
The <meta name="description" content="This is a sample webpage description."> tag provides a brief description of the webpage for search engines.
The <meta name="keywords" content="HTML, meta tags, example"> tag specifies relevant keywords associated with the webpage's content.
The <meta property="og:title" content="Sample Webpage"> tag sets the title displayed when the webpage is shared on social media platforms.
The <meta property="og:image" content="https://example.com/image.jpg"> tag specifies the image associated with the webpage when shared on social media.
The <meta name="robots" content="index, follow"> tag allows search engine robots to index the page and follow its links.

These <meta> tags provide important metadata, SEO optimization, viewport configuration, and social media sharing information for the webpage. Remember to customize the values and content based on your specific webpage requirements.

Include CSS stylesheets within the <head> tag

You can include CSS stylesheets within the <head> tag of an HTML document. The <head> section is commonly used to define the stylesheets that will be applied to the HTML content within the <body> section.

Inline Styles

You can include CSS styles directly within the <head> section using the <style> tag. Here's an example:

<!DOCTYPE html> <html> <head> <style> p { color: blue; font-size: 18px; } </style> </head> <body> <p>This paragraph has blue text and a font size of 18 pixels.</p> </body> </html>

In the above example, the CSS styles for the <p> element are defined inline within the <style> tags in the <head> section. The styles specified (color: blue and font-size: 18px) will be applied to all <p> elements in the <body> section.

External Stylesheet

You can also link an external CSS stylesheet within the <head> section using the <link> tag.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>This paragraph will be styled based on the CSS rules defined in the external stylesheet.</p> </body> </html>

In this example, the <link> tag is used to reference an external CSS file named "styles.css". This file should contain the CSS rules that define the styles for various HTML elements. By linking the stylesheet in the <head> section, the styles defined in the external file will be applied to the HTML content in the <body> section.

Using either of these methods, you can define CSS styles directly in the <head> section or link an external stylesheet to apply consistent styles to your HTML content. The advantage of using external stylesheets is that they can be shared and reused across multiple HTML pages, promoting better code organization and easier maintenance.

Include JavaScript code within the <head> tag

You can include JavaScript code within the <head> tag of an HTML document. Placing JavaScript code in the <head> section allows you to define and execute scripts before the content in the <body> section is loaded.

Inline JavaScript

You can include JavaScript code directly within the <head> section using the <script> tag.

<!DOCTYPE html> <html> <head> <script> // Inline JavaScript code function myFunction() { alert('Hello, World!'); } </script> </head> <body> <button onclick="myFunction()">Click Me</button> </body> </html>

In this example, the JavaScript function myFunction() is defined inline within the <script> tags in the <head> section. The function is then invoked when the button in the <body> section is clicked, triggering an alert dialog with the message "Hello, World!".

External JavaScript File

You can also link an external JavaScript file within the <head> section using the <script> tag and the src attribute.

<!DOCTYPE html> <html> <head> <script src="script.js"></script> </head> <body> <button onclick="myFunction()">Click Me</button> </body> </html>

In this example, the <script> tag with the src attribute is used to reference an external JavaScript file named "script.js". The JavaScript code within that file can contain various functions, event handlers, or other script logic. By linking the external JavaScript file in the section, you can include and execute the code in your HTML document.

Can I have multiple <head> tags in an HTML document?

No, you cannot have multiple <head> tags in an HTML document. The <head> tag is a structural element that is used to define the head section of an HTML document. It should appear only once within the document structure.

Having multiple <head> tags in an HTML document is not valid HTML syntax and will likely result in rendering and parsing errors. The browser expects a single <head> section to contain metadata, document configuration, and other non-visible information about the webpage.

If you need to include multiple elements within the <head> section, such as <meta>, <title>, or <link> tags, you should place them inside the single <head> tag. The elements within the section can be organized in any order as per your requirements.

Is it necessary to include a <head> section in every HTML document?

Yes, it is necessary to include a <head> section in every HTML document. The <head> section is an essential part of the HTML document structure and contains important metadata, document configuration, and other non-visible information about the webpage.

While the <head> section may not always contain visible content, it serves crucial purposes such as specifying the character encoding, defining the document title, linking external stylesheets or scripts, providing metadata for search engines, and more.

How is the <head> tag different from the <body> tag?

The <head> and <body> tags are two fundamental elements of an HTML document that serve distinct purposes and contain different types of content.

<head> Tag:

Purpose: The <head> tag represents the head section of an HTML document. It contains metadata, document configuration, and other non-visible information about the webpage.
Content: The <head> section typically includes elements such as <title>, <meta>, <link>, <style>, and <script>. These elements define the document title, character encoding, linked stylesheets and scripts, and other relevant information for the browser and search engines.
Visible Content: The content within the <head> section is not directly visible on the webpage when rendered in a browser. It provides instructions and information for the browser and other web agents.

<body> Tag:

Purpose: The <body> tag represents the body section of an HTML document. It contains the visible content of the webpage, including text, images, links, forms, and other HTML elements.
Content: The <body> section contains all the elements and content that should be displayed on the webpage, such as headings (<h1>, <h2>, etc.), paragraphs (<p>), images (<img>), navigation (<nav>), lists (<ul>, <ol>), and more.
Visible Content: The content within the <body> section is what users see and interact with when they visit the webpage. It represents the actual webpage content that is rendered and displayed in the browser.

Is the <head> section visible to website visitors?

No, the <head> section is not visible to website visitors. The content within the section of an HTML document is not rendered or displayed on the webpage when viewed in a browser. It contains metadata, document configuration, and other non-visible information that provides instructions and information to browsers and search engines.

The purpose of the <head> section is to include elements like <title>, <meta>, <link>, <style>, and <script> tags, which define the document's title, character encoding, linked stylesheets and scripts, and other relevant information. These elements are crucial for proper rendering, search engine optimization, and providing instructions and data to browsers.

The visible content of the webpage, such as text, images, links, forms, and other HTML elements, resides within the <body> section. This is the part of the HTML document that users see and interact with when they visit a webpage. The <body> section is where the actual webpage content is placed and rendered in the browser.

Purpose of the <base> tag within the <head> section

The <base> tag is used within the <head> section of an HTML document to specify the base URL for all relative URLs within the document. It serves as a reference point for resolving relative URLs, such as those used in links, images, stylesheets, and scripts.

Following is the basic syntax of the <base> tag:

The href attribute of the <base> tag specifies the base URL that will be used as the starting point for resolving relative URLs. This attribute should contain the absolute or relative URL that represents the base location of the resources.

By setting the <base> tag, you can establish a default base URL for all relative URLs within the document. This can be useful when working with multiple directories or when you want to specify a different base URL than the current page URL.

Following is an example that demonstrates the usage of the <base> tag:

<!DOCTYPE html> <html> <head> <base href="https://example.com/"> </head> <body> <a href="about.html">About</a> <img src="images/image.jpg" alt="Image"> <script src="js/script.js"></script> </body> </html>

In this example, the <base> tag is used to set the base URL as "https://example.com/". All relative URLs within the document will be resolved relative to this base URL. So, the link, image source, and script source will be resolved as "https://example.com/about.html", "https://example.com/images/image.jpg", and "https://example.com/js/script.js" respectively.

Specify the language of my HTML document in the <head> tag

To specify the language of your HTML document, you can use the lang attribute within the opening <html> tag, which is usually placed in the <head> section. The lang attribute allows you to indicate the language code that corresponds to the language used in your document.

Following is an example of how to specify the language using the lang attribute:

<!DOCTYPE html> <html lang="en"> <head>  </head> <body>  </body> </html>

In this example, the lang attribute is set to "en" to indicate that the document is in English. The language code follows the ISO 639-1 standard, which uses two-letter language codes.

If you have a multilingual website and want to specify the language for a specific section within the document, you can also apply the lang attribute to individual elements.

<p lang="fr">Ceci est un paragraphe en français.</p> <p lang="es">Este es un párrafo en español.</p>

In this case, the lang attribute is applied to the <p> elements to specify the language of each paragraph.

Specifying the language using the lang attribute is important for accessibility and SEO purposes. It helps screen readers and language parsers understand the language of your content, enabling better language-specific handling and providing a better experience for users who rely on assistive technologies.

Set the viewport for responsive design in the <head> section

To set the viewport for responsive design in the <head> section of an HTML document, you can use the <meta> tag with the viewport attribute. The viewport meta tag allows you to control how the webpage is displayed and scaled on different devices with varying screen sizes.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0">  </head> <body>  </body> </html>

In this example, the <meta> tag is used with the name attribute set to "viewport" and the content attribute set to "width=device-width, initial-scale=1.0". This configuration sets the viewport width to match the device width and ensures that the initial zoom level is set to 1.0.

The width=device-width part sets the width of the viewport to be equal to the device width, which allows the webpage to adapt and fit the screen size of different devices. This is crucial for responsive design as it enables the content to adjust and render properly on various screen sizes.

The initial-scale=1.0 part sets the initial zoom level to 1.0, which means the webpage is displayed at 100% zoom by default. This prevents any automatic zooming or scaling of the webpage on different devices.

By including this viewport meta tag in the <head> section of your HTML document, you ensure that your webpage is responsive and can adapt to different screen sizes, providing an optimal viewing experience across devices.

Additionally, you can further customize the viewport meta tag by adding other properties like maximum-scale, minimum-scale, user-scalable, and more, depending on your specific design requirements.

Include custom <meta> tags in the <head> section for specific purposes

You can include custom <meta> tags in the <head> section of your HTML document for specific purposes. The tag is a versatile element that allows you to provide additional metadata and information about the webpage to browsers, search engines, and other web agents.

Following is an example of including custom <meta> tags in the <head> section:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="This is a custom description"> <meta name="keywords" content="HTML, CSS, JavaScript">   </head> <body>  </body> </html>

In this example, added two custom <meta> tags. The first <meta> tag uses the name attribute set to "description" to provide a custom description for the webpage. The content within the content attribute can be customized according to the specific description you want to provide.

The second <meta> tag uses the name attribute set to "keywords" to specify a list of keywords relevant to the webpage's content. These keywords can help search engines understand the main topics or themes covered in the webpage.

You can include other custom <meta> tags as needed for your specific requirements. Some commonly used custom <meta> tags include:

Custom <meta> tags can be used to provide additional information, control behavior, or enhance the functionality of your webpage. It's important to refer to the relevant specifications and guidelines when using custom tags to ensure compatibility and proper usage.

SEO considerations when using the <head> tag

There are several SEO considerations when using the <head> tag in your HTML document. The content and elements within the <head> section provide important information to search engines about your webpage, influencing its visibility, indexing, and ranking in search engine results. Here are some key SEO considerations related to the <head> tag:

<title> Tag: The <title> tag is one of the most crucial elements for SEO. It specifies the title of your webpage, which appears as the clickable headline in search engine results. Make sure to create unique, descriptive, and keyword-rich titles that accurately represent your content.
Meta Description: The <meta name="description"> tag allows you to provide a brief summary or description of your webpage. Although not a direct ranking factor, a well-crafted meta description can influence click-through rates from search engine results. Make it compelling, relevant, and within the recommended length (around 155-160 characters).
Meta Keywords: The <meta name="keywords"> tag was previously used to specify keywords relevant to the webpage's content. However, search engines now place less importance on this tag, and it is often ignored or given minimal weight. Instead, focus on creating high-quality, relevant content that naturally incorporates keywords.
<meta name="robots">: The <meta name="robots"> tag allows you to control search engine indexing and crawling behavior for your webpage. By specifying directives like "index," "noindex," "follow," "nofollow," you can guide search engine bots on how to treat your webpage's content.
Heading Tags: Proper usage of heading tags (<h1>, <h2>, etc.) is important for both user experience and SEO. Organize your content with clear and hierarchical headings, using relevant keywords where appropriate. The <h1> tag should generally be reserved for the main heading of the page.
Canonical URL: To prevent duplicate content issues, you can use the <link rel="canonical"> tag to specify the canonical URL for a webpage. This indicates the preferred version of a webpage when multiple versions with similar content exist.
Other SEO-related Elements: The <head> section can include additional elements like <meta name="viewport"> for responsive design, <meta name="author"> to specify the author of the webpage, Open Graph protocol tags for social sharing, and more. These elements may indirectly impact SEO by improving user experience, social sharing, and visibility in social media platforms.

Conclusion:

The HTML <head> tag serves the purpose of defining metadata, document configuration, SEO optimization, document structure, and browser functionality. It provides essential information and instructions to browsers, search engines, and developers to ensure proper rendering, accessibility, and understanding of the webpage's content.

Next > HTML Symbols

Related Topics

More Related Topics.....