HTML <head>
element represents a collection of metadata for the current document. This information helps the browser in understanding the document and displays it properly on the user device.
Lets, take below example and understand each and every element that is a child of <head>
element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="https://iteachfrontend.com/">
<title>I Teach Frontend</title>
<link rel="shortcut icon" href="/favicon.ico" />
<!-- external style sheets -->
<link rel="stylesheet" href="style.css" />
<!-- inline style sheets -->
<style>body{margin:0}</style>
<!-- scripts -->
<script>function example(){}</script>
</head>
...
</html>
meta
provides a generic list of metadata values such as search keywords, viewport properties, and the fileβs character encodingThe first line you declare inside the head i.e.
<meta charset="utf-8">
is the charset declaration. The charset attribute specifies the character encoding used by the document. A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified.base
specifies the document base URL for use with resolving relative hypertext links. Abase
element must have anhref
attribute, atarget
attribute, or both wherehref
attribute is a valid URL andtarget
attribute is valid browsing content. A valid browsing context is one of:_blank
,_self
,_parent
, or_top
. In the above example, we have set the base URL to https://iteachfrontend.com/title
element represents the document title or name. In this case, the title is I Teach Frontend. This information is displayed sometimes on the browser tab. So if you have multiple tabs open, and you want to switch to some particular tab you can do so by first reading the title in the browser tab. Pagetitle
is also helpful when the user bookmarks page or search previously visited page in browser history. The title is unique to a page so there must be not more than onetitle
element per document.link
element refers to an external resource that the document is connected to. A link could be external stylesheets, site icons, scripts, fonts and other documents of the website. Each link specifies the relationship using the attributerel
- the value denotes how the item being linked to is related to the current document. In above example, line:<link rel="stylesheet" href="style.css" />
- thestyle.css
is having relationship of stylesheet.script
element refers to an inline script or link to external scripts. If thescript
tag is havinghref
attribute the body content is ignored by the browser. The code defined inside the script tag could be executed on the current documentstyle
element refers to an inline style or link to external stylesheets. The ongoing trend is to have a combined minified style embedded withinhead
tag to avoid loading one extra external resource - this also helps in increasing the overall performance of the webpage.
There are a lot of ways how link
and meta
tags can be combined with other attributes to handle underlying element differently by browsers, however, that has been purposefully omitted to keep the content of post simple
Top comments (0)