The `<head>` element is a metadata container.
Basic Concepts of the <head> Tag
The <head> is a container element in an HTML document, located within the <html> tag but outside the <body> tag. It does not display directly on the webpage but contains the document's metadata, references to external resources, and other non-visual content. A typical <head> structure looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Page content -->
</body>
</html>
Child Elements of the <head> Tag
Required Element: <title>
Every HTML document must include a <title> element within the <head>, defining the browser tab or window title:
<head>
<title>My Personal Blog - Technical Articles</title>
</head>
Character Encoding Declaration: <meta charset>
Specifies the document's character encoding and must be placed at the very beginning of the <head>:
<head>
<meta charset="UTF-8">
<!-- Other elements -->
</head>
Viewport Settings: <meta name="viewport">
A key meta tag for mobile adaptation:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
Stylesheet Links: <link>
Links to external CSS files or defines website icons:
<link rel="stylesheet" href="main.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
Script Loading: <script>
Although usually placed at the end of the <body>, some scripts need to be loaded early:
<script src="analytics.js" defer></script>
Advanced Metadata Configuration
SEO Optimization Meta Tags
<meta name="description" content="This is a detailed guide on the usage of HTML head tags">
<meta name="keywords" content="HTML, head tag, metadata">
<meta name="author" content="John Doe">
Open Graph Protocol
Metadata displayed when sharing on social media:
<meta property="og:title" content="HTML Head Tag Explained">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-head">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
Mobile-Specific Configurations
<!-- Disable automatic phone number detection -->
<meta name="format-detection" content="telephone=no">
<!-- Disable automatic email address detection -->
<meta name="format-detection" content="email=no">
<!-- iOS Safari full-screen mode -->
<meta name="apple-mobile-web-app-capable" content="yes">
Resource Preloading Techniques
DNS Prefetching
<link rel="dns-prefetch" href="//cdn.example.com">
Preloading Critical Resources
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">
Preconnecting to Important Domains
<link rel="preconnect" href="https://api.example.com">
Browser Compatibility Handling
X-UA-Compatible
Rendering mode declaration for IE browsers:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Legacy IE Compatibility Mode
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<![endif]-->
Security-Related Meta Tags
CSP Policy
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
Preventing Clickjacking
<meta http-equiv="X-Frame-Options" content="DENY">
Disabling Auto-Translation
<meta name="google" content="notranslate">
Performance Optimization Practices
Inlining Critical CSS
<style>
/* Critical path CSS content */
body { font-family: sans-serif; }
.hero { background: #f5f5f5; }
</style>
Asynchronously Loading Non-Critical CSS
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
Resource Hints
<link rel="prerender" href="next-page.html">
Internationalization Support
Language Declaration
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Language" content="zh-cn">
</head>
Multilingual Alternative Pages
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="ja" href="https://example.com/ja">
Practical Application Examples
E-commerce Website Head Configuration Example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronics Store - Latest Smartphone Deals</title>
<meta name="description" content="Limited-time offer! Latest smartphones discounted up to 30% off, free shipping">
<meta name="keywords" content="smartphones, e-commerce, deals, Apple, Huawei">
<meta property="og:title" content="Electronics Store - Smartphone Deals">
<meta property="og:image" content="https://example.com/og-image.jpg">
<link rel="preconnect" href="https://cdn.example.net">
<link rel="preload" href="main.css" as="style">
<link rel="stylesheet" href="main.css">
<link rel="icon" href="/favicon.ico">
<script src="tracking.js" defer></script>
</head>
Single-Page Application (SPA) Configuration
<head>
<meta charset="UTF-8">
<title>React App Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#317EFB">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/logo192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="style">
</head>
Debugging and Validation Tools
Viewing Head Content
In browser developer tools, the Elements panel displays the complete head structure.
W3C Validator
Use https://validator.w3.org/ to check if head elements comply with standards.
Social Media Debuggers
Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
Common Problem Solutions
Solving FOUC Issues
<head>
<style>
.no-fouc { display: none; }
</style>
<script>
document.documentElement.className = 'no-fouc';
window.addEventListener('DOMContentLoaded', function() {
document.documentElement.className = '';
});
</script>
</head>
<body class="no-fouc">
<!-- Content -->
</body>
Multi-Theme Switching Solution
<head>
<link id="theme" rel="stylesheet" href="light-theme.css">
<script>
function setTheme(themeName) {
document.getElementById('theme').href = themeName + '-theme.css';
}
</script>
</head>
Modern Web Extension Features
Web App Manifest
<link rel="manifest" href="/site.webmanifest">
Theme Color Settings
<meta name="theme-color" content="#ffffff">
Progressive Web App Configuration
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/icons/icon-152x152.png">
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：<title>-文档标题
下一篇：<wbr>-可选换行点
