(, )

By SamK

Category(s)

The HTML <head> element serves as a container for several essential elements, including <title>, <style>, <meta>, <link>, <script>, and <base>.

Placed between the <html> tag and the <body> tag, this section of the document (webpage) is not displayed to the user.

The HTML <title> Element

The <title> element in HTML specifies the document's title, which must be text-only and is displayed in the browser's title bar or tab. It's a required element in HTML documents.

The content of the page title is crucial for search engine optimization (SEO) because search engine algorithms use it to determine the page's ranking in search results.

Learn more about HTML Title Element.

The HTML <style> Element

The <style> element is utilized to define style information for an individual HTML page.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {background-color: oldlace;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>
<body>
  <h1>Heading 1</h1>
  <p>This is page text</p>
</body>
</html>

HTML Style Element Demo

Learn more about HTML CSS and Styles.

The HTML <link> Element

The <link> element specifies the relationship between the current document and an external resource. It is commonly used to link to external style sheets.

<link rel="stylesheet" href="style.css">

The HTML <meta> Element

The <meta> element is commonly employed to define the character set, page description, keywords, author of the document, and viewport settings. This metadata isn't displayed on the page but is utilized by browsers for displaying content or reloading pages, by search engines for keywords, and by other web services.

Examples

To define the character set, use:

<meta charset="UTF-8">

To define keywords for search engines, use:

<meta name="keywords" content="HTML, CSS, JavaScript">

To define a description of the web page, use:

<meta name="description" content="Free Webmaster tutorials">

To define the author of a page, use:

<meta name="author" content="Sami Khan">

To refresh document every 60 seconds, use:

<meta http-equiv="refresh" content="60">

To make the website adopt to the viewport, so that it looks good on all devices, use:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Combined example of <meta> tags:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Webmaster tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Sami Khan">
</head>
<body>
  <p>This is page text</p>
</body>
</html>

Specifying The Viewport

The viewport refers to the user's visible area of a web page, which varies depending on the device. For example, it will be smaller on a mobile phone than on a computer screen.

To ensure proper rendering and scaling on different devices, it's recommended to include the following <meta> element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This provides the browser with instructions on how to manage the page's dimensions and scaling.

The width=device-width section establishes the page's width to match the screen width of the device (which can vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

The HTML <script> Element

The <script> element is utilized to define client-side JavaScripts.

The following JavaScript code writes "This is JavaScript" into an HTML element with the id "myid".

<!DOCTYPE html>
<html>
<head>
  <script>
    document.getElementById("myid").innerHTML = "This is JavaScript";
  </script>
</head>
<body>
  <div id="myid"></div>
</body>
</html>

The HTML <base> Element

The <base> element specifies the base URL and/or target for all relative URLs in a page.

The <base> tag must have either an href attribute, a target attribute, or both.

Additionally, there can only be one <base> element in a document (webpage).

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.wwebmastermaze.com/" target="_blank">
</head>
<body>
  <a href="/tutorials">HTML Tutorials</a>
</body>
</html>

In the above example, the "HTML Tutorials" link will open https://www.wwebmastermaze.com/tutorials in a new window.

Please check below options for the links to our previous or next tutorial.

HTML Head Element