• Set Goal
  • Spaces
  • Get Certified
Sign Up
Login

HTML Head

Html Head, Html Metadata, Html Title Element, Html Style Element, Html Link Element, Html Meta Element, Viewport, Character Encoding, Page Description, Keywords, Author, Refresh, Search Engine Optimization (Seo),

A container for the following components in HTML is the <head> element: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML < head > Element

Positioned between the <html> and <body> tags, the <head> element serves as a container for metadata, or information about data.

Data about the HTML document is called HTML metadata. There is no display of metadata.

Character sets, styles, scripts, document titles, and other meta information are often defined via metadata.

The HTML < title > Element

The document’s title is defined by the <title> element. The title appears in the tab on the website or in the title bar of the browser and has to be text only.

HTML publications must contain the <title> element!

A page title’s content has a big impact on search engine optimization (SEO)! Search engine algorithms use the page title to determine which pages to display in search results.

The <title> element:

  • describes a toolbar title in the browser.
  • gives the page a title when it is added to favorites.
  • gives the page’s title in search engine results.

Thus, make an effort to be as precise and meaningful as you can with the title!

A basic HTML document

Example

				
					<!DOCTYPE html>
<html>
<head>
  <title>There Is a Good Page Title</title>
</head>
<body>
The content of the document......
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

The HTML < style > Element

For a single HTML page, style information is defined using the <style> element:

Example

				
					<style>
  body {background-color: pink;}
  h1 {color: green;}
  p {color: red;}
</style>

The HTML < link > Element

The connection between the current document and an external resource is specified by the <link> element.

When linking to external style sheets, the <link> tag is most frequently used:

Example

The HTML < meta > Element

Typically, the character set, page description, keywords, document author, and viewport parameters are specified using the <meta> element.

The metadata is utilized by search engines (keywords), browsers (how to display content or reload pages), and other web services; it is not visible on the page.

Example

Define the character set used:

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Example of <meta> tags:

Example

Setting The Viewport

A web page’s visible region to the user is called the viewport. It depends on the device; for example, it will be smaller on a computer screen than it is on a mobile phone.

Every web page you create should have the following <meta> element:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets 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 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

The HTML