What is Head in HTML?
The "head" in HTML is a section of the document that holds important information and links to resources necessary for the webpage. It is located at the top of the HTML document, before the body section. Content within the head section is not directly displayed on the webpage but helps the browser understand and display the page correctly.
Why Use Head?
The head section is crucial for various reasons, including:
- SEO (Search Engine Optimization): Metadata such as descriptions and keywords within the head helps search engines understand the content and purpose of your webpage, potentially improving its ranking.
- Page Title: The title element in the head section defines the text displayed on the browser tab, giving users an idea of the page’s content.
- Loading Styles and Scripts: The head section allows you to link CSS files for styling and JavaScript files for functionality, ensuring the page loads with the correct styles and features.
- Mobile Responsiveness: The viewport meta tag in the head helps the webpage adapt to different screen sizes, providing a better user experience on mobile devices.
Examples of the <head> Section in HTML
The <head> section of an HTML document contains important information and links to resources that the browser uses to properly display the webpage. Below are examples of commonly used elements within the <head> section.
Basic Structure of <head>
Basic Code Examples
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
Output
2. <meta> Element
The <meta> tag provides metadata about the HTML document, including character encoding and viewport settings:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An example webpage for learning HTML">
<meta name="keywords" content="HTML, example, tutorial">
</html>
This is just for understanding, there is no output.
3. <link> Element
Links an external CSS file for styling the webpage:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Head Page</title>
<link rel="stylesheet" href="styles.css">
</head>
</html>
This is just for understanding, there is no output.
4. <script> Element
Links an external JavaScript file for adding functionality to the webpage:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Head Page</title>
<script src="script.js"></script>
</head>
</html>
This is just for understanding, there is no output.
5. <style> Element
Contains CSS styles that apply to the document:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Head Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: red;
}
</style>
<body>
<h1>You Can See</h1>
<p>The entire background color became red.</p>
</body>
</head>
</html>
Output
Conclusion
The <head> section is a powerful part of an HTML document, containing essential elements like <meta>, <title>, <link>, and <script> that help optimize, style, and add functionality to the webpage.