The HTML <head> tag is the first section of every web page out there. It’s used to connect the pages to their respective CSS and HTML files, and to inform the browsers and search engines of extra details they need to know about the webpage.
Let's explore the powers of the HTML tags in this tutorial.
1. Characteristics
* A per-page section and unique for each page
The <head> element is used only once per HTML document or a web page. The Tag can be omited if there is nothing inside it. The opening tag can be omitted if the first thing inside it is an HTML element. The closing tage can also be omitted if the <head> tag is not followed by an HTML comment such as <!-- this is a comment -->.
* Not displayed in the main content area
The content within the <head> tag is not displayed to the end-user. Only the title content, if set, is visible in the browser's title bar. The rest is completely silent. This is one of the reasons why most learners this section of the web documents for granted.
* Not formated
Since the content in the head tag is not visible to end-user, there is no visual formatting applied to them, Even, the title area doesn't not apply any formatting to any tag written within itself. If you write a tag in there, the output will show the raw tag.
* Used only by the browsers and bots(eg. Search Engines)
The <head> element section is mostly consumed by search engines and bot that scan it and read data about the pages. In the recent years, with the event of Facebook open graph and Twitter card, we can set details that users can see when sharing the page.
2. Parts
Now let's look at the various parts we generally see within the <head> element:
2.1 - The Title
- Title of the HTML document
The title part represents the title of the whole HTML document, not the body content title. See the title content as the summary of all the document. And every title must have one and only one title tag.
<title>The HTML <head> Tag</title>- Used as the name of the Bookmarked page
The title you set on your HTML document is picked up automatically when users want to bookmark it as a default bookmark name.
- Used in search result pages When you page is index by a search engine, its title is used on the Search Results Page (SRP) to label your site. It's one of the reasons why you must always have good titles.
2.2 - Meta Tag
The <meta /> tag is a versatile tag used in the document head section to specify additional information about the document for the browsers, search engines, and crowlers. Its function is determined by the attribute set to it. The tag takes two main attributes(name & content) that allows it to transmit an information name(type) and details(content).
Aside the global attributes, it has four main attributes that are generally used:
name — Metadata name
The name attribute specifies the name of the metadata being defined. It is used in <meta> tags to provide information about the document, such as descriptions, keywords, and author information.
<meta name="description" content="This is a sample webpage about HTML meta tags.">
<meta name="keywords" content="HTML, meta tags, web development">
<meta name="author" content="Ahmed Salifu Amidu">- Description: Provides a brief description of the webpage, often used by search engines.
- Keywords: A list of keywords relevant to the content, though modern SEO practices do not rely heavily on this.
- Author: Specifies the name of the author of the document.
- application-name: When the document represents a web application
- generator: When the page represents a generator
- theme-color: defining a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.
- http-equiv — Pragma directive(used to instruct the browser on how to do something)
The
http-equivattribute acts as a directive to the browser(named "pragma directive"), simulating HTTP response headers. It instructs the browser on how to handle the content.
Example 1: This meta tag tells the browser to refresh the page every 30 seconds.
<meta http-equiv="refresh" content="30">Example 2: This instructs Internet Explorer to use the latest rendering engine, ensuring better compatibility with modern web standards.
<meta http-equiv="X-UA-Compatible" content="IE=edge">content — Value of the element depending on the name
The content attribute holds the value associated with the name or http-equiv. Its value varies based on what the metadata is intended to convey.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">charset — Character encoding declaration
The charset attribute specifies the character encoding for the document. It indicates how characters are represented in bytes.
<meta charset="UTF-8">media — Applicable media
The media attribute specifies the media type for which the meta tag is intended. It can be used to apply specific styles or scripts depending on the device or screen size. The xample below indicates that the viewport settings are applicable for screen media types, ensuring responsiveness on devices like smartphones and tablets.
<meta name="viewport" content="width=device-width, initial-scale=1.0" media="screen">3. Linking to resource
The <link> tag in HTML is used to link the document to external resources, most commonly stylesheets (CSS), but it can also link to other types of resources like icons or alternate stylesheets. It’s a self-closing tag and is typically placed within the <head> section of an HTML document.
Key Attributes of the <link> Tag
-
href: Specifies the URL of the linked resource. This is a required attribute.
- Example:
<link href="styles.css" rel="stylesheet">
- Example:
-
rel: Defines the relationship between the current document and the linked resource. This is also a required attribute when linking stylesheets or other resources.
- Common values include:
stylesheet: Indicates that the linked file is a CSS stylesheet.icon: Specifies a favicon for the document.alternate: Represents an alternate version of the document (e.g., for print).
- Example:
<link rel="stylesheet" href="styles.css">
- Common values include:
-
type: Specifies the MIME type of the linked resource. While it's optional for CSS (most browsers assume
text/css), it can be useful for other types of files.- Example:
<link rel="stylesheet" type="text/css" href="styles.css">
- Example:
-
media: Specifies the media type for which the linked resource is optimized (e.g., screen, print).
- Example:
<link rel="stylesheet" href="styles.css" media="screen">
- Example:
-
sizes: Used primarily with icons, this attribute specifies the size of the icons being linked.
- Example:
<link rel="icon" href="favicon.ico" sizes="16x16">
- Example:
Common Uses of the <link> Tag
1. Linking CSS Stylesheets
The most common use of the <link> tag is to link external CSS stylesheets:
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>2. Linking Favicon
You can use the <link> tag to link a favicon for the website:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>3. Alternate Stylesheets
You can provide alternate stylesheets for different contexts:
<head>
<link rel="stylesheet" href="styles.css" title="Main Styles">
<link rel="alternate stylesheet" href="print.css" title="Print Styles" media="print">
</head>
Complete example of link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<!-- Linking to CSS stylesheet -->
<link rel="stylesheet" href="styles.css" type="text/css">
<!-- Linking favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Alternate stylesheet for print -->
<link rel="alternate stylesheet" href="print.css" title="Print Styles" media="print">
<!-- Linking a font from an external source -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Welcome to My Web Page!</h1>
</body>
</html>
Last updated 2024-10-13 UTC