HTML Head
The <head> element in HTML is a container for metadata and links to external resources that are essential for the document but are not directly visible to users on the webpage. It is placed inside the <html> element and comes before the <body> element. Here’s a breakdown of what you typically include in the <head> section and examples of each:
Elements of the HTML Head Section
-
Title
- Sets the title of the document that appears in the browser’s title bar or tab.
<title>My Awesome Webpage</title> -
Meta Tags
- Provide metadata about the HTML document, like character encoding, author, and viewport settings.
<meta charset="UTF-8"> <meta name="description" content="A brief description of the webpage"> <meta name="author" content="Your Name"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> -
Link to Stylesheets
- Links to external CSS files for styling the webpage.
<link rel="stylesheet" href="styles.css"> -
Scripts
- Links to external JavaScript files or includes internal JavaScript code.
<script src="script.js" defer></script>Internal Script Example
<script> console.log('Hello, World!'); </script> -
Favicon
- Specifies an icon to be shown in the browser tab.
<link rel="icon" href="favicon.ico" type="image/x-icon"> -
Additional Metadata
- Custom data and links for specific functionality or services.
<meta property="og:title" content="My Awesome Webpage"> <meta property="og:description" content="A brief description of the webpage">
Example of a Complete <head> Section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A brief description of the webpage">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Webpage</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="script.js" defer></script>
</head>
<body>
<!-- Content of the webpage goes here -->
</body>
</html>
The <head> section helps set up the document's environment and provides the browser with essential information to render the webpage correctly.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.