main_leaderboard, all: [728,90][970,90][320,50][468,60]


HTML – The Head Element

HTML heads are the topic of the article. Below elements are contained in the HTML <head> element:

<title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <head> Element

The <head> element, located between the <html> and <body> tags, is a container for metadata.

Metadata is information about HTML documents. This page does not display metadata.

A document’s metadata are determined by its title, character set, styles, scripts, and other elements.

The HTML <title> Element

The <title> element represents the document’s title. It appears in the browser’s title bar or on the tab of the page, and it must be text-only.

HTML documents must contain a title element!

Search engine optimization (SEO) relies heavily on the contents of a page title! Search engine algorithms use page titles to determine the order in which pages appear in search results.

The <title> Tag:

  • Creates a toolbar title for the browser
  • Sets a title to a favourited page
  • Shows the page’s title in search engine results

This is why it’s crucial to provide your HTML head with a title that’s as descriptive and informative as feasible.

Here is a simple HTML document:


<!DOCTYPE html> <html> <head><title>A Meaningful Page Title</title> </head> <body>The content of the document can be written here </body> </html>

The HTML <style> Element

The <style> tag is utilized to specify styling in the below example:


<!DOCTYPE html> <html> <head><style>body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style></head><body><h1>This is a Heading</h1> <p>This is a Paragraph</p> </body> </html>

The <link> tag indicates the link between an external html resource and the current document.

Typically, a <link> element links to an external style sheet:


<!DOCTYPE html> <html><head><link rel="stylesheet" href="mystyle.css"> </head><body><h1>Mr Examples</h1> <p> Welcome to Mr Examples </p></body></html>

Tip: Visit our CSS Tutorial to learn all about CSS.

The HTML <meta> Element

Meta <meta> tags are generally use in HTML heads to specify character sets, page descriptions, keywords, authors, and viewport settings.

Metadata doesn’t appear on the page , but it’s utilized by web browsers to show content or reload the page, search engines (keywords), and other web services.

Character encoding

Character encoding is determined by the charset attribute. With “UTF-8” set, any language can be displayed in this example:

<meta charset=”UTF-8″>


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>This is German language<span style="color: redorange"> Hallo, willkommen bei Herrn Beispiele</span></p> <p>This is Russian language <span style="color: rebeccapurple">привет добро пожаловать к мистеру примерам privet dobro pozhalovat' k misteru primeram</span></p> </body> </html>

Defining keywords for search engines:

<meta name=”keywords” content=”HTML Heads, CSS Styling, JS”>

Create a description for your web page:

<meta name=”description” content=”Mr Examples Web tutorials”>

Identify the author of a page by:

<meta name=”author” content=”Colin Smith”>

25 second refresh of the document:

<meta http-equiv=”refresh” content=”25″>


<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="10; url=https://mrexamples.com/html/"> </head> <body> <h2>Example Meta element</h2> <p style="color: blue;">Kindly wait for 10 seconds and after 10 seconds it will redirected automatically to URL described in meta tag</p> </body> </html>

Make your website mobile-friendly by setting the viewport as follows:

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

The following are examples of <meta> tags:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Mr Examples Web tutorials"> <meta name="keywords" content="HTML Heads, CSS Styling, JS"> <meta name="author" content="Colin Smith"> </head> <body> </body> </html>

Here is another example of complete meta information:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Mr Examples Web tutorials"> <meta name="keywords" content="HTML Heads, CSS Styling, JS"> <meta name="author" content="Colin Smith"> <style> p{ color:red; } </style> </head> <body> <p>welcome to Mr Examples</p> </body> </html>

Setting The Viewport

Viewports are areas of web pages that are seeable to readers. The viewport size changes depending on the device – for example, it will be more minor on a mobile phone than on a computer screen.

Ensure that all your web pages contain the following <meta> tags:

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

Browsers use this to control the dimensions and scaling of pages.

The width=device-width property sets the width of the page to match the screen-width of the device (which is variable).

When the browser loads the page for the first time, the initial-scale=1.0 part sets the initial zoom level.

A web page without the viewport meta tag and the same web page with the viewport meta tag is shown below:

You can see the difference using a phone or tablet by clicking on the two links below.

Without the
viewport meta tag

With the
viewport meta tag

The <script> Element

The <script> element is used to specify JavaScript.

Here is what JavaScript looks like when it documents “Learn JavaScript!” into an HTML element with id=”js examples”:


<!DOCTYPE html> <html> <body><script> function myFunction() {document.getElementById("js examples").innerHTML = "Learn JavaScript!"; } </script></body> </html>

Note : Visit upcoming JavaScript classes to learn more.

Here is another example of Script in the head element:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Mr Examples Web tutorials"> <meta name="keywords" content="HTML Heads, CSS Styling, JS"> <meta name="author" content="Colin Smith"> </head> <body> <p id="js_style">Html elemnent styles can be changed with javascript</p> <script> function myFunction() { document.getElementById("js_style").style.fontSize = "15px"; document.getElementById("js_style").style.color = "brown"; document.getElementById("js_style").style.backgroundColor = "lightgreen"; document.getElementById("js_style").style.textDecoration = "underline"; } </script> <button type="button" onclick="myFunction()">Click Here</button> </body> </html>

The HTML <base> Element

An <base> tag define the base URL and/or target of all relative URLs.

At least one href attribute or both target attributes must appear in the <base> tag.

Documents can only contain one <base> tag!

For all links on a page, set a default URL and target:


<!DOCTYPE html> <html><head> <base href="https://mrexamples.com/" target="_blank"> </head><body> <img src="https://mrexamples.com/wp-content/uploads/html_images/images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body></html>

HTML head Elements

<style>A document’s style information.
<title>Describes the title of a document.
<link>Relationship between a document and an external resource.
<head>Provides information about the document.
<script>Creates a script that runs on the client.
<meta>Determining HTML document metadata.
<base>Sets the default address or target for all links on a page.

Here is a complete list of all HTML tags.

Benefits of HTML Head Element

The HTML <head> element holds significant importance in web development as it provides metadata and other essential information about the web page to the web browser. Here are some benefits of using the <head> element in web development:

Improved Search Engine Optimization (SEO)
The <head> element enables web developers to include metadata, such as keywords and descriptions, which search engines use to rank and display web pages in search results, resulting in better search engine optimization (SEO).

Better Web Page Loading Times
Web developers can enhance web page loading times by defining and loading external resources like CSS and JavaScript files through the <head> element.

Improved Accessibility
The <head> element enables web developers to specify the language of the web page and other accessibility features, which can improve the experience for users with disabilities.

Better Website Branding
The <head> element can be utilized to define the website’s favicon, the small icon that appears next to the page title in the browser’s tab. This can help to improve the website’s branding and recognition.

Enhanced User Experience
Web developers can use the <head> element to include other elements like meta tags that provide additional information about the web page, resulting in an enhanced user experience.

If this article fulfilled your learning desires in any way, do share this article with your friends by clicking on the links below.
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 *