<head> - document header container
Basic Concept of the <head> Tag
The <head> tag is a container for the header of an HTML document, located inside the <html> tag and immediately following the opening <html> tag. It does not display directly in the webpage content but contains a series of metadata and resource references that define the document's properties and behavior. The content within the <head> tag is crucial for browsers, search engines, and other web services.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata and resource references go here -->
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Webpage content goes here -->
</body>
</html>
Child Elements of the <head> Tag
The <head> tag can contain multiple child elements, each with a specific purpose. Here are the common ones:
<title>: Defines the title of the webpage, displayed in the browser's title bar or tab.<meta>: Provides document metadata, such as character set, viewport settings, keywords, and descriptions.<link>: Used to link external resources, such as CSS files or favicons.<style>: Defines inline CSS styles.<script>: Used to embed or reference JavaScript code.<base>: Defines the base URL for all relative URLs on the page.
Purpose of the <title> Tag
The <title> tag is the only mandatory element within <head>. It appears in the browser tab and is used by search engines to display the webpage's title. The title should be concise and accurately describe the page's content.
<head>
<title>My Personal Blog - Sharing About Frontend Development</title>
</head>
Common Uses of the <meta> Tag
The <meta> tag defines document metadata. Common attributes include charset, name, and content.
Defining Character Set
<meta charset="UTF-8">
Specifies UTF-8 character encoding, supporting multilingual display.
Defining Viewport Settings
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ensures proper display on mobile devices and prevents scaling issues.
Defining Page Description and Keywords
<meta name="description" content="A blog about frontend development">
<meta name="keywords" content="HTML, CSS, JavaScript, Frontend Development">
These aid in SEO, though modern search engines rely less on keywords.
Uses of the <link> Tag
The <link> tag links external resources, most commonly CSS files and favicons.
Linking CSS Files
<link rel="stylesheet" href="styles.css">
rel="stylesheet" indicates a stylesheet, and href specifies its path.
Linking Favicons
<link rel="icon" href="favicon.ico" type="image/x-icon">
rel="icon" links an icon file, typically displayed in the browser tab.
Usage of the <style> Tag
The <style> tag embeds CSS styles directly in the HTML document. While external CSS files are recommended, inline styles are useful for small projects or rapid prototyping.
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
</style>
</head>
Usage of the <script> Tag
The <script> tag embeds or references JavaScript code. It can be placed in <head> or <body>, but placing it at the end of <body> is recommended for better page load performance.
Inline JavaScript
<head>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
</head>
Referencing External JavaScript Files
<head>
<script src="script.js" defer></script>
</head>
The defer attribute ensures the script executes after the document is parsed, avoiding render blocking.
Purpose of the <base> Tag
The <base> tag defines the base URL for all relative URLs on the page, simplifying paths for links and resources.
<head>
<base href="https://example.com/images/">
</head>
<body>
<img src="logo.png"> <!-- Actual path: https://example.com/images/logo.png -->
</body>
Other Elements in <head>
Besides the common elements, <head> can include tags like <noscript> and <template>.
<noscript> Tag
<noscript> displays fallback content when JavaScript is disabled.
<head>
<noscript>
<style>
.no-script-warning {
color: red;
font-weight: bold;
}
</style>
</noscript>
</head>
<body>
<noscript>
<p class="no-script-warning">Please enable JavaScript for the best experience.</p>
</noscript>
</body>
<template> Tag
<template> defines reusable HTML templates, often used with JavaScript.
<head>
<template id="user-card">
<div class="user-card">
<h2></h2>
<p></p>
</div>
</template>
</head>
Best Practices for the <head> Tag
- Always include the
<title>tag: Essential for SEO and user experience. - Use
<meta charset="UTF-8">: Ensures multilingual character support. - Use
<meta name="viewport">wisely: Optimizes mobile display. - Place CSS in
<head>: Prevents style flickering during rendering. - Place JavaScript at the end of
<body>or usedefer: Improves page load speed. - Avoid excessive
<meta>tags: Include only necessary metadata.
Example of a <head> Tag
Here’s a complete <head> example with common child elements:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A blog about frontend development">
<title>Frontend Development Blog - HTML & CSS Tutorials</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
</style>
<script src="script.js" defer></script>
</head>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：-HTML文档根元素
下一篇：<title>-文档标题
