The HTML <head> element contains <title>, <style>, <meta>, <link>, <script>, and <base> elements.It provides extra information( metadata) to the HTML document that is useful for displaying web pages into browser.
It provides different instructions to the browser about the character sets, style sheets, scripts so that browser understands the metadata and then displays web pages in the proper way.
Note: Please keep in mind that HTML <head> elements provide metadata to the HTML document that is the most useful during displaying the web page into the browser.
The element specifies the relation between the external cascade style sheet and the current HTML page. Then, every HTML element renders according to external CSS.
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">Note: The HTML link element references an external style sheet.
The style element embedded in the HTML document. It specifies the CSS cascade rule. The style element describes that how HTML elements render in a browser.
<style type="text/css"> </style> <style type="text/css">
h4 {
color: orange;
font-size: 25px;
text-align: left;
font-weight: 500;
}
</style>Note:Generally, the embedded style sheet is placed inside the <head> element of the page.
The script element is used to assign internal javascript code as well as external javascript files through the src attribute script element.
<script type="text/Javascript"> </script> <script type="text/javascript">
document.write("<h2>Hello World!</h2>")
</script>Note:Generally,HTML <script> element is used to place javascript internally and externally.
The meta element provides additional information to the HTML document.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Specifying Metadata</title>
<!--Define the character set :-->
<meta charset="utf-8" />
<!--Define the character set used:-->
<meta name="author" content="John Smith" />
<!--Define keywords for search engines:-->
<meta name="keywords" content="HTML, CSS, JavaScript" />
<!--Define a description of your web page:-->
<meta name="description" content="HTML Web tutorials" />
<!--Define the author of a page:-->
<meta name="author" content="John Doe" />
<!--Refresh document every 30 seconds:-->
<meta http-equiv="refresh" content="30" />
<!--Assigning the viewport to make your website look good on all devices:-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Specifying Metadata</title>
</head>
Note:HTML <meta> tags provide different information to the browser so that loaded page looks very elegant.
The title element specifies the title of the HTML document.it is shown in the browser's title bar & search engine search result.
<head>
<title>Actual Page Title</title>
</head> <head>
<title>Actual Page Title</title>
</head> <meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag provides viewport information to the browser and then the browser adjusts the website according to the written media query for this specific device. Please note that without this meta tag, responsive features can not achieve precisely.