1. html
  2. /tags
  3. /head

<head>

Definition

The HTML <head> element is used to provide information about a web page that is not directly displayed in the browser. It contains metadata, such as the page's title, author, keywords, and description, as well as links to external files such as stylesheets, scripts, and icons.

The <head> element is a container for these metadata elements, and it is placed at the beginning of an HTML document, before the <body> element.

Examples

Here's an example of what a basic <head> element might look like:

<head>
  <title>My Web Page</title>
  <meta name="description" content="This is a description of my web page.">
  <link rel="stylesheet" href="style.css">
</head>

In this example, we have included a <title> element to specify the title of the page, a <meta> element to provide a description of the page for search engines, and a <link> element to link to an external CSS stylesheet.

Attributes

This element includes the global attributes.

Best Practices

  • Use a unique and descriptive <title> tag that accurately reflects the content of the page. This helps search engines and users understand what the page is about and can improve click-through rates.
  • Include a <meta name="description"> tag that provides a concise summary of the page's content. This can also improve click-through rates and help search engines understand the relevance of the page to a user's search query.
  • Use <meta name="keywords"> to specify a list of relevant keywords that describe the content of the page. However, note that this tag is not as important for SEO as it used to be and some search engines do not use it at all.
  • Use the <link> tag to link to external files such as stylesheets and scripts. This helps keep the HTML code clean and organized and can improve the page's loading time.
  • Use the <meta name="viewport"> tag to specify how the page should be displayed on mobile devices. This can improve the user experience for mobile users and can also affect the page's search rankings.
  • Avoid using inline styles and scripts in the <head> element. Instead, link to external files using the <link> and <script> tags. This helps keep the HTML code clean and easy to maintain.
  • Use valid HTML markup and avoid using deprecated tags and attributes. This can help ensure that the page is displayed correctly in different browsers and can improve the page's accessibility and usability.

Accessibility Considerations

  • Ensure that the <title> tag accurately describes the content of the page. This is important for users who rely on screen readers, as the title is often the first thing they hear when they navigate to a page.
  • Provide a concise and meaningful description using the <meta name="description"> tag. This can help users understand the purpose and content of the page and can also improve the page's search engine optimization.
  • Use the <link> tag to link to external CSS stylesheets and JavaScript files. This can help ensure that the page is displayed correctly for users who rely on assistive technologies.
  • Consider using the <meta name="viewport"> tag to optimize the page's display on mobile devices. This can improve the accessibility and usability of the page for users who access it on smaller screens.
  • Use valid HTML markup and avoid using deprecated tags and attributes. This can help ensure that the page is displayed correctly in different browsers and can improve the page's accessibility and usability.
  • Consider including alternative text descriptions for icons or graphics included in the <head> element. This can be achieved using the alt attribute on the link or meta tag.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes