Bhavitha Cherukuri: HTML — The Head Element

HTML — The Head Element

The HTML <head> element is a container for the following elements: <title>, <style>, <metal>, <link>, <script>, and <base>.

The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element

The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

A simple HTML document:

Example

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="This is my website">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut voluptas voluptatum ea tempora nisi iusto, facilis laudantium odit aspernatur sunt doloribus delectus aliquid dolorum sequi vel assumenda neque officiis explicabo.</p>

</body>
</html>

The HTML <style> Element

The <style> element is used to define style information for a single HTML page:

Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: hsl(62, 93%, 46%);}
    h1 {color: hsl(259, 92%, 39%);}
    p {color: hsl(323, 90%, 42%);}
  </style>
</head>  
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
<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>