Javatpoint Logo
Javatpoint Logo

HTML Head

The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.

HTML metadata is not displayed. It only specifies data about the HTML document.

Metadata defines the document title, character set, styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

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

HTML <title> Element

The HTML <title> element is used to define the title of the document. It is used in all HTML/XHTML documents.

What does <title> element do?

  1. It defines a title in the browser tab.
  2. It provides a title for the page when it is added to favorites.
  3. It displays a title for the page in search engine results.

Example:

Test it Now

HTML <style> Element

The HTML <style> element is used to style the HTML page.

Example:

Test it Now

HTML <link> Element

The HTML <link> element is used to link an external style sheet to your webpage.

Example:

Test it Now

external.css

HTML <meta> Element

The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.

Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.

Let's see how to use metadata:

To define a character set:

To define a description of your webpage:

To define keywords for search engines:

To define author of the webpage:

To refresh document every 30 seconds:

Example:

Test it Now

Use <meta> tag to set the Viewport

This method is introduced in HTML5 to take control over the viewport by using <meta> tag.

Viewport is the user's visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer screens.

Syntax for <meta> viewport element:

Here, the <meta> viewport element specifies how to control the page's dimensions and scaling.

The width=device-width is used to set the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 is used to set the initial zoom level when the page is first loaded by the browser.

Example of a web page without the viewport <meta> tag:

Test it Now

Example of a web page with the viewport <meta> tag:

Test it Now

Note: To see the difference clearly, open this page on smartphone or tablet.

HTML <base> Element

The HTML <base> element is used to specify the base URL and base target for all relative URLs in a page.

Example:

Test it Now

Excluding <html>, <head> and <body> elements

HTML 5 facilitates us to omit the <html>, the <body>, and the <head> tag.

Example:

Test it Now

Note: It is not recommended to omit the <html> and <body> tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).

However, you can omit the <head> tag.


Next TopicHTML Layout




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials