Skip to main content

HTML Head

The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <head> Element​

The <head> element, which is positioned between the <html> and <body> tags, is a container for metadata (info about data).

HTML metadata is information about an HTML document. Metadata is not shown.

The document title, character set, styles, scripts, and other meta information are often defined via metadata.

The HTML <title> Element​

The title of the document is defined by the <title> element. The title must be text-only and appears in the title bar of the browser or in the page's tab.

In HTML pages, the <title> element is essential!

A page title's content is critical for search engine optimization (SEO)! Search engine algorithms utilise the page title to determine the order in which pages are listed in search results.

The <title> element:

  • creates a title for the browser toolbar
  • When a page is added to favourites, it is given a title.
  • shows the page's title in search engine results
tip

Try to make the title as accurate and meaningful as possible!

Example

A simple HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>A Meaningful Page Title</title>
  </head>
  <body>
    The content of the document......
  </body>
</html>

The HTML <style> Element​

The <style> element is used to provide the style of a single HTML page:

Example
<style>
  body {
    background-color: powderblue;
  }
  h1 {
    color: red;
  }
  p {
    color: blue;
  }
</style>

The <link> element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

Example
<link rel="stylesheet" href="mystyle.css" />

The HTML <meta> Element​

Typically, the <meta> element is used to indicate the character set, page description, keywords, document author, and viewport settings.

The information is not visible on the page, but is utilised by browsers (for example, how to display content or refresh the page), search engines (keywords), and other online services.

Example

Define the character set used:

<meta charset="UTF-8" />

Define keywords for search engines:

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

Define a description of your web page:

<meta name="description" content="Free Web tutorials" />

Define the author of a page:

<meta name="author" content="John Doe" />

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30" />

Setting the viewport to make your website look good on all devices:

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

Example of <meta> tags:

Example
<meta charset="UTF-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="John Doe" />

Setting The Viewport​

The viewport is the viewable area of a web page to the user. It fluctuates depending on the device; on a mobile phone, it will be smaller than on a computer screen.

All of your web pages should have the following meta> element:

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

This instructs the browser on how to adjust the page's dimensions and scale.

The width=device-width component configures the page's width to match the device's screen width (which will vary depending on the device).

The initial-scale=1.0 element specifies the first zoom level when the browser first loads the page.

Here's an example of a web page without the viewport meta tag and one with the viewport meta tag:

The HTML <script> Element​

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

The following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

Example
<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
</script>

The HTML <base> Element

Example

Specify a default URL and a default target for all links on a page:

<head>
  <base href="https://codinghabits.online/" target="_blank" />
</head>

<body>
  <a href="/challenges/ChallengesPage">HTML base Tag</a>
</body>