The role of the head tag
Basic Concepts of the head Tag
The head tag is an indispensable part of an HTML document, located inside the html tag and before the body tag. It does not display directly in the webpage content but contains the document's metadata, which is crucial for browsers, search engines, and other web services. Elements within the head tag provide background information, resource references, and behavior control for the webpage.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
Defining Document Character Encoding
The meta charset declaration is one of the most critical elements in the head. It specifies the character encoding used by the document. UTF-8 is the most commonly used encoding, supporting the display of characters from most languages. If not set correctly, it may cause garbled text on the page.
<head>
<meta charset="UTF-8">
</head>
An incorrect encoding declaration example may cause Chinese characters to display abnormally:
<meta charset="ISO-8859-1">
<!-- Chinese content may appear as garbled text -->
Controlling Viewport Behavior
For mobile device adaptation, the viewport meta tag is crucial. It controls how the webpage is laid out in mobile browsers, with typical configurations including setting the width equal to the device width and initial zoom scale.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More complex viewport control can disable zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Defining the Webpage Title
The title tag defines the title displayed in the browser tab and is also the main title shown in search engine results. Each page should have a unique and descriptive title.
<title>Product Details - My E-commerce Site</title>
Titles are crucial for SEO. Poor practices include:
<title>Home</title> <!-- Too generic -->
<title>Untitled Document</title> <!-- Default value, should be avoided -->
Linking External Resources
The link tag is used to link external resources, most commonly CSS stylesheets. It can appear anywhere in the head, but it is usually recommended to place it at the top for the browser to load it as early as possible.
<link rel="stylesheet" href="styles/main.css">
Modern websites often link multiple CSS files:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/theme.css">
Defining the Website Icon
The favicon is a small icon displayed in the browser tab and bookmarks. Although modern browsers automatically look for a favicon.ico file in the root directory, explicit declaration is more reliable.
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
A scheme supporting multiple icon sizes:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
Preloading Critical Resources
The preload directive tells the browser to prioritize loading important resources, such as critical CSS or font files, which can significantly improve page load performance.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="critical.css" as="style">
Example of preloading image resources:
<link rel="preload" href="hero-image.jpg" as="image">
Defining Document Compatibility Mode
The X-UA-Compatible meta tag controls the document mode in IE browsers, ensuring modern browsers use the latest rendering engine.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
For cases requiring compatibility with older versions of IE:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Adding Script Files
Although script tags can be placed at the bottom of the body, some scripts that need to execute before page rendering must be placed in the head. The defer or async attributes can control script loading behavior.
<script src="analytics.js" defer></script>
<script src="modernizr.js"></script>
Modular script loading:
<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>
Social Media Metadata
The Open Graph protocol and Twitter Card metadata control how content appears when shared on social media.
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page Description">
<meta property="og:image" content="https://example.com/image.jpg">
Complete social media metadata example:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
Controlling Search Engine Behavior
The robots meta tag guides search engines on how to index page content. noindex prevents indexing, and nofollow prevents tracking links.
<meta name="robots" content="index, follow">
<meta name="googlebot" content="noindex, nofollow">
More refined search engine control:
<meta name="robots" content="noimageindex">
<meta name="google" content="nositelinkssearchbox">
Defining CSS Styles
Although styles are typically placed in external files, small websites or critical CSS can be written directly in the style tag within the head.
<style>
body {
margin: 0;
font-family: sans-serif;
}
.critical {
display: block !important;
}
</style>
Inline media query example:
<style>
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
</style>
Setting the Base URL
The base tag defines the base address for all relative URLs on the page, affecting the path resolution of all links, scripts, and images.
<base href="https://example.com/assets/">
Resource loading example after using the base tag:
<img src="images/logo.png"> <!-- Actually loads https://example.com/assets/images/logo.png -->
Browser Feature Policy
The Feature-Policy header (now renamed to Permissions-Policy) controls which browser features can be used on the page.
<meta http-equiv="Feature-Policy" content="geolocation 'none'; microphone 'none'">
Modern permissions policy declaration:
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=()">
Website Verification and Ownership
Various website verification tools require adding specific meta tags to prove website ownership.
<meta name="google-site-verification" content="verification_token">
<meta name="msvalidate.01" content="B2F3C0675A8F">
Baidu webmaster verification example:
<meta name="baidu-site-verification" content="code-abcdefg">
Content Security Policy
The CSP meta tag helps prevent XSS attacks by restricting the sources of loadable resources.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
Strict CSP policy example:
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
Webpage Theme Color
The theme-color meta tag specifies the theme color for the browser address bar and mobile device status bar, enhancing brand consistency.
<meta name="theme-color" content="#4285f4">
Theme color supporting media queries:
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
Application Configuration Information
The web app manifest link and Apple-specific meta tags provide configuration information for PWA apps.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Complete PWA configuration example:
<link rel="manifest" href="/app.webmanifest">
<meta name="apple-mobile-web-app-title" content="App Name">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Webpage Author and Description Information
Basic descriptive meta tags provide information about the webpage content. Although their impact on SEO has diminished, they still hold value.
<meta name="description" content="This is a detailed guide on the usage of HTML head tags">
<meta name="author" content="Author Name">
<meta name="keywords" content="HTML,head,meta,tag">
More detailed creation information:
<meta name="generator" content="Visual Studio Code">
<meta name="reply-to" content="contact@example.com">
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：框架的优缺点分析
下一篇：title标签的重要性
