HTML - The Head Element


The head element is a container for other meta elements.

The title, style, meta, link, script and base elements are all contained in the HTML head element.

It is used for html head element can contain, order, and syntax, head on an html/xhtml page, what is the head element in html, defines the head of a document, head section on an html page.

The HTML <head> Element

Thehtmlandbody tags are separated by theheadelement, which is a container for metadata (info about data).

HTML metadata is an information about an HTML document. Not shown to users.

Usually, metadata sets the title, character set, styles, scripts and other meta information for the content.


The HTML <title> Element

The title element specifies the document's title. The title must be text-only and appear in the title bar of the browser or in the tab of the page.

In HTML texts, the title element is needed!

For search engine optimization (SEO), the contents of a page title are critical! Search engine algorithms utilize the page title to determine the order in which pages are listed in search results.

The title element:

  • creates a title for the toolbar in the browser
  • When a page is added to favorites, it gets a title.
  • Shows a search engine results page title

Try to make the heading as precise and meaningful as possible!

Example

<html>

<head>
  <title>A Meaningful Page Title</title>
</head>

<body>
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>
</body>

</html>
It is also used for html title element example, line break, attribute, style, get, tooltip, and hide, html element title new line, html text, and react title.

The HTML <style> Element

To define the styling information for an HTML page, the style element is used:

Example

<head>
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
</head>
It is also used for html style element in body, inside div, element id, inline, parent, and bold, table style element, and canvas, custom elements.

The HTML <link> Element

The link element establishes a connection between the current document and a third-party resource.

The most common usage of the link element is to link to external style sheets:

Example

<head>
<link rel="stylesheet" href="mystyle.css">
</head>
It is used for html link element typescript, rel attribute, disabled attribute, in body, element id, link onload, link to element on page, and angular.

The HTML <meta> Element

Character set, page description, keywords, document author, and viewport settings are all often specified via the meta element.

The metadata is not visible on the page but is utilized by browsers, search engines, and other online services (how to show or reload content).

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 HTML Tutorial">

Define the author of a page:

<meta name="author" content="Suresh Babu">

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">
It is also used for html element metadata, meta property, and viewport, custom meta element, code meta, name meta, meta charset, and meta robots, attributes, and meta related elements.

Setting The Viewport

The viewport is the visible area of a website for the user. It depends on the device — on your mobile phone, it is smaller than on your 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 offers the browser instructions for controlling the size and scale of the page.

Thewidth=device-width section adjusts the page's width to match the device's screen size (which will vary depending on the device).

When the website is first loaded by the browser, the initial-scale=1.0 section specifies the initial zoom level.

It is used for html set viewport height, min width, size, and change width.

The HTML <script> Element

Using script you declare JavaScripts on the client-side.

"Hello JavaScript!" is written into an HTML element with the id="demo" attribute using the JavaScript below:

Example

<head>
  <title>Page Title</title>
  <script>
      function myFunction() {
          document.getElementById("demo").innerHTML = "Hello JavaScript!";
      }
  </script>
</head>
<body>

<h2>Your Web Page</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
It is used for html script element attributes, events, defer, syntax, and create element, script hide element, object script, add script, dom script, and script inside element.