HTML head tag
The <head>
tag in HTML is used to contain meta-information about the HTML document. This meta-information is not displayed directly on the webpage but provides essential data and links to external resources needed by the browser and other web services to properly render and manage the page.
Syntax:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="A description of the page">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Key Elements Within the <head>
Tag:
<meta>
Tags:<meta charset="UTF-8">
: Specifies the character encoding for the HTML document. UTF-8 is a common encoding that supports a wide range of characters.<meta name="description" content="...">
: Provides a brief description of the page's content. This description is often used by search engines in search results.<meta name="keywords" content="...">
: Lists keywords relevant to the page. While less important for SEO today, it was historically used to influence search engine rankings.<meta name="author" content="...">
: Identifies the author of the document.
<title>
:- Defines the title of the HTML document, which appears in the browser's title bar or tab. It is crucial for SEO and user navigation.
<title>Page Title</title>
<link>
:- Used to link external resources, such as stylesheets and icons, to the HTML document.
<link rel="stylesheet" href="styles.css">
: Links to an external CSS stylesheet to style the page.<link rel="icon" href="favicon.ico">
: Links to a favicon, which is an icon displayed in the browser tab.
<link rel="stylesheet" href="styles.css">
<script>
:- Used to include JavaScript files or scripts within the HTML document.
<script src="script.js"></script>
: Links to an external JavaScript file.- Inline scripts can also be included between
<script>
tags.
<script src="script.js"></script>
<style>
:- Contains internal CSS styles that apply to the HTML document. While it's common to use external stylesheets, you can also include CSS rules directly within the
<head>
.
<style> body { font-family: Arial, sans-serif; } </style>
- Contains internal CSS styles that apply to the HTML document. While it's common to use external stylesheets, you can also include CSS rules directly within the
Example Usage:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="A comprehensive guide to web development">
<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
<meta name="author" content="John Doe">
<title>Web Development Guide</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Welcome to the Web Development Guide</h1>
<p>This is a guide to learning web development.</p>
</body>
</html>
In this example:
- The
<meta>
tags provide important metadata about the document. - The
<title>
tag sets the page title. - The
<link>
tag links to an external CSS stylesheet. - The
<script>
tag links to an external JavaScript file withdefer
to ensure it loads after the HTML content.
Accessibility and SEO:
- Accessibility: While the
<head>
content does not directly impact accessibility, using proper<meta>
tags can help ensure that the page is correctly interpreted by screen readers and other assistive technologies. - SEO: The
<title>
and<meta>
tags, especially the description, play a crucial role in SEO. They provide search engines with essential information about the page, influencing how the page appears in search results and potentially affecting its ranking.