Head Section in HTML
An HTML page is divided into two main parts (an HTML page is also known as an HTML document)
- Head Section
- Boby Section
Both sections are rendered between main <html> and </html> tags, for more understanding see the below example:
<html>
<head></head>
<body></body>
</html>
Between <body> and </body> tags we put all other tags, images, text, etc. which we want to show on our web page, In simple words whatever we put between <body> and </body> is going to appear in our web page but in case of <head> tag is totally different, so let's know why we use the head tag in the HTML page
The Head section is used to control the complete HTML page ( mainly the body section) for how the page will behave and appear. Let's take a real-world example take the example of your body, suppose your whole body is like an HTML page in which there is a mind which is invisible, and second is the rest of the body. Your mind gives instructions to your body and your body does the task accordingly, for example, moving your hand, speaking, walking, etc. People can see your body and how it looks like but they can't see your mind. The HTML page works the same <head> </head> tag is used to control the complete HTML page.
All code that we want to write in the head section we write between <head> and </head> tags.
1. Page Title
In the head section, we use <title> </title> tag to provide a tile to our webpage. In the web browser title text appears above the URL. The <title> tag is optional but it is good practice to use <title> tag it helps search engines rank your web page in the search results.
<head>
<title>Home Page</title>
</head>
2. Meta Tags
Meta tags are basically used for SEO purposes in which we tell search engines whether we want to rank our page or not, if we want to rank the page then on which keywords and description, don't worry these this is new for you, these are the parts of SEO, you will learn it after learning HTML
<head>
<meta name=" keywords" content=" home page, home," />
</head>
3. CSS/ JavaScript Codes
In the head section, we can write the required CSS and Javascript code, it is good practice to write CSS and Javascript code in the head section rather than inline CSS because it is reusable and easy to maintain.
<head>
<style>
body { padding:0; margin:0; background-color: brown; }
p { font-size:15px; }
</style>
</head>
4. External CSS/ Javascript / JQuery Files Link
The Head section allows us to like our external CSS, Javascript, and JQuery files on our HTML page, we put all such links between <head> and </head>
<head>
<link href="../style/site_style.css" rel="stylesheet" />
</head>