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>
metaprovides 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.basespecifies the document base URL for use with resolving relative hypertext links. Abaseelement must have anhrefattribute, atargetattribute, or both wherehrefattribute is a valid URL andtargetattribute 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/titleelement 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. Pagetitleis 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 onetitleelement per document.linkelement 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.cssis having relationship of stylesheet.scriptelement refers to an inline script or link to external scripts. If thescripttag is havinghrefattribute the body content is ignored by the browser. The code defined inside the script tag could be executed on the current documentstyleelement refers to an inline style or link to external stylesheets. The ongoing trend is to have a combined minified style embedded withinheadtag 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)