1. What is HTML <head> Element or Tag?
Firstly, the HTML <head> element is the initial and essential HTML5 tag in a web document. While writing markup, the first tag that goes within the <html> element is the <head>. Further, the content in the head is not visible to the users on the screen. Also, the HTML5 head element plays an essential role in any document and always comes before the <body> tag. Moreover, the HTML <head> element contains links to external stylesheets, scripts, and other meta-information. The following are the tags that go into the HTML head section.
- <title> Element
- <style> Element
- <link> Element
- <script> Element
- <base> Element
- <meta> Element
1.1. HTML <style> Element
When we want to include on-page styling for a web-page, we use the <style> tag in the HTML <head> element to design the webpage. Following is an example of how on-page styles are added.
Example
<head>
<style>
.body{
background-color: #fff;
font-size: 14px;
line-height: 1.8;
padding: 20px;
margin-top: 20px;
}
.h1{
font-size: 36px;
color: #3a3c59;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
For detailed understanding about HTML style tag, visit the HTML styles tutorial.
1.2. HTML <link> Element
- When we use an off-page style for a webpage or we want to include a favicon, we use the HTML <link> element to incorporate that external stylesheet on the webpage.
- This tag is a singleton element therefore it does not have an ending tag.
- Further, we utilize the <link> singleton tag in the HTML <head> section to access the external stylesheets.
- Moreover, the HTML <link> tag comprises only attributes due to the fact that it is an empty element.
The below instance explains the method of how we can add external styles to a web page.
Example
<!Doctype html> <html> <head> <linkrel="stylesheet" href="styles.css"> <link rel="icon" href="/src/favicon.ico" type="image/x-icon"> <link rel="preload" href="/lib/fonts/fontawesome.woff2?" as="font" type="font/woff2" crossorigin> </head> <body> <!-- The body content goes here--> </body> </html>
You can learn more about HTML <link> tag, different types of attributes, and their usage in this tutorial.
1.3. HTML <script> Element
- The HTML <script> tag assists us in two ways while writing the markup.
- Firstly, when we want to include on-page javascript code, we make use of this <script> HTML element.
- Further, we also utilize this <script> tag when we want to link to some external javascript code or library.
- Moreover, we can include this HTML <script> element in the head section or in the body section.
The subsequent example will popup the "hello User" message on the loading of the page.
To learn more about HTML <script> tag and its detailed usage, you can visit the <script> element tutorial.
1.4. HTML <base> Element
- The HTML <base> element specifies a base URL and base target for all the URLs on current webpage.
- Therefore, you will not have to specify the complete URL path each time.
- Just set a parent URL in the HTML5 <head> element by using the <base> tag.
- Further, the <base> element is a void element and does not have an ending tag.
- By adding a base URL in the head section, we can add images or links by specifying names only with reference to that parent path.
See the usage of HTML <base> element in the following example.
Example
<!Doctype html> <html> <head> <base href="https://tutsinsider.com/images/" target="_blank"> </head> <body> <img src="coast.jpg.webp" alt="Beach - HTML Head Tutorial" /> <img src="plane.jpg.webp" alt="Aeroplane - HTML5 Head Tutorial" /> <img src="ship.jpg.webp" alt="Ship HTML5 Head Tutorial" /> </body> </html>
To discern the usage of HTML <base> tag completely, visit the <base> element tutorial.
2. What is HTML MetaData or Meta-Information?
The HTML <head> element also contains the metadata of a web page. The metadata uses different HTML5 elements to enclose the specific data types within the <head>element.
- Importantly, the HTML metadata or meta-information of a web page does not display on the screen.
- Instead, search engines, like Google, Bing, etc read the metadata and display it in search results.
- Also, this metadata is useful to search engines for indexing a large amount of data in a convenient way.
- Further, the metadata of an HTML5 document is related to that specific web page only.
Moreover, metadata typically includes the below HTML tags to insert the meta-information for a document.
- HTML <title> tag
- HTML <meta> tag
2.1. Metadata: HTML <title> Element
The HTML5 <title> tag contains the title of the document and we must write this within the <head> element. This title has below uses for a web page.
- This title is displayed in the browser's tab in the title bar.
- The page title in the HTML head displays in search results.
- When we bookmark a page, the page is bookmarked in the bookmarks bar with this title
The markup and usage of the HTML <title>element are as follows:
Example
<!Doctype html> <html> <head> <title>HTML Head</title> </head> <body> <!-- The body content goes here--> </body> </html>
Visit the comprehensive tutorial of <title> tag to comprehend the concept deeply.
2.2. Metadata: HTML <meta> Element
The HTML <meta> tag specifies the metadata of different types and we include it in HTML5 <head>element. The HTML <meta> element declares the following types of information about a page.
- It tells the browser which character set or charset is used for the current page.
- This element also defines the description of the page that depicts the topic of the document.
- It defines keywords for search engines but currently, this practice is deprecated.
- The <meta>tag also defines the author of the page.
- It can refresh the page within a specified interval of time.
- This tag also declares a property viewport and tells the browser about the visible area or space for a user.
You can understand all the above definitions with this comprehensive example:
Example
<head> <meta charset="UTF-8"> <meta name="description" content="Code Wisely"> <meta name="keywords" content="HTML, CSS, JavaScript, Bootstrap, WordPress, PHP"> <meta name="author" content="Author-Name"> <meta http-equiv="refresh" content="180"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
For comprehensive details, visit the <meta> element tutorial and understand it entirely.
Note:
A developer must add a viewport attribute contained in the meta to every page of a website. This will tell the browser to control the dimensions of the content on different screens.
- width = device-width sets the width of the content to the width of the screen and will vary according to the device
- initial-scale = 1.0, it is the initial zoom scale when a page is loaded on the screen
3. Removing <html>, <head> and <body>
The HTML5 language validates the code of a web page even if write HTML markup without the use of <html>, <head> and <body> tags. HTML will validate this markup and no errors will occur in the document. However, for XHTML validation, we must include these elements. Consider following example. It has markup with regurlar tags, try it in TutsInsider CodeLab to experience the removed <html>, <head> and <body> tags.
Example
<!Doctype html> <html> <head> <title>HTML5 Head</title> </head> <body> <!-- The body content goes here--> </body> </html>
Consider This:
At Tuts Insider.com, we do not have the practice to omit <html>, <head> and <body> tags. And we also do not recommend this, because it may produce errors in older browsers and can cause errors for XHTML and XML applications.