What Is HTML – The Head Element

The HTML – The Head Element <head> component is a compartment for the accompanying components: <title><style><meta><link><script>, and <base>.

The HTML <head> Element

The <head>component is a compartment for metadata (information about information) and is put between the<html> tag and the <body> tag.

HTML metadata is information about the HTML archive. Metadata isn’t shown.

Metadata commonly characterize the archive title, character set, styles, scripts, and other meta data.

The HTML <title> Element

The <title>component characterizes the title of the archive. The title should be text-just, and it is displayed in the program’s title bar or in the page’s tab.

The <title> element is required in HTML documents!

The component is needed in HTML archives! The substance of a page title is vital for website improvement (SEO)! The page title is utilized via web search tool calculations to choose the request when posting pages in list items.

The <title> component:

  • characterizes a title in the program toolbar
  • gives a title to the page when it is added to top picks
  • shows a title for the page in web index results

Thus, attempt to make the title as exact and significant as could really be expected!

A straightforward HTML report:

Example

<!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> component is utilized to characterize style data for a solitary HTML page:

Example

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

The HTML <link> Element

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”>

Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML <meta> Element

The <meta>component is ordinarily used to determine the person set, page depiction, watchwords, creator of the archive, and viewport settings.

The metadata won’t be shown on the page, however are utilized by programs (how to show content or reload page), via web indexes (watchwords), and other web administrations.

Examples

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 client’s apparent space of a page. It differs with the gadget – it will be more modest on a cell phone than on a PC screen.

You ought to remember the accompanying <meta>component for all your pages: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

This gives the program guidelines on the best way to control the page’s measurements and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the gadget (which will shift contingent upon the gadget).

The underlying scale=1.0 part sets the underlying zoom level when the page is first stacked by the program.

Here is an illustration of a website page without the viewport meta tag, and a similar page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.