<head>

The HTML <head> element holds metadata about the document, including the title, links to stylesheets, and scripts, which are essential for document processing and presentation but are not visible on the webpage.

`<head>` Tag

The <head> element contains metadata related to the document, such as the title, styles, and scripts. An HTML document must have only one <head> section.

`<head>` Demo

An example of an HTML document containing a <title> tag inside the head section:

This is a heading

This is a paragraph.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Definition and Usage

The <head> element acts as a container for metadata and is positioned between the <html> and <body> tags.

Metadata provides essential information about the HTML document, including the title, character encoding, styles, and scripts, without being displayed on the webpage.

The <style> tag, which is used to add internal CSS styles to a webpage, is placed within the <head> section of an HTML document.

A heading

A paragraph.

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {color:red;}
    p {color:blue;}
  </style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Default CSS Settings

Browsers typically render the <head> element using the following default settings:

style.css

head {
  display: none;
}

Key Elements in `<head>`

<title>: Defines the browser tab title and enhances SEO.
<meta>: Specifies metadata such as character set, viewport settings, and SEO attributes.
<link>: Establishes connections to external resources like stylesheets and icons.
<style>: Embeds internal CSS styles.
<script>: Includes or links JavaScript files.
<base>: Specifies a base URL for relative links.
<noscript>: Displays alternative content when JavaScript is disabled.

Conclusion

The <head> tag in HTML is essential for including metadata that defines the structure and functionality of a webpage, such as the title, styles, and scripts. It does not display content on the webpage but plays a vital role in SEO, styling, and linking external resources. Elements like <title>, <meta>, <style>, and <script> within the <head> help organize and manage the document.

<html>

The HTML (<html>) element acts as the root of an HTML document, containing all other elements and marking the start and end of the document structure.

<body>

The HTML <body> element encompasses the primary content of an HTML document, including text, images, and media, which is displayed in the browser for users.