HTML5头部head标签常规用法和区别

来源：喔唷网编辑：喔唷教程时间：2025-04-03 浏览：

一个规范的HTML文档头部(Head)应包含以下基本标签，这些标签对SEO、浏览器兼容性和用户体验都很重要,从html的诞生至今也更新了很多写法目前HTML5的应用更加广泛，让我们来看看head标签

网页头部(Head)的正规HTML标签

一个规范的HTML文档头部(Head)应包含以下基本标签，这些标签对SEO、浏览器兼容性和用户体验都很重要：

必需的基础标签

基础标签	说明
<meta>	元信息标签 (Meta Tags)
<link>	链接类标签 (Link Tags)
<script></script>	脚本类标签 (Script Tags)
<title></title>	网页头部名称标签（Title）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xxx</title>
    <meta name="description" content="xxx">
    <meta name="keywords" content="xxx、xxx" />
</head>

这是一个常用的网页头部包含标签的设置，我们可以看到这是一个以往常用的html4的基本写法，<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 使用的http-equiv=""来模拟HTTP响应头的内容，相当于服务器发送的Content-Type头部，content="text/html; charset=utf-8" 声明了文档的类型是HTML，还有指定了字符的编码为UTF-8。当然这样的写法是以往旧式（html4/xhtml）的写法，现在的HTML5的替代写法是：

<meta charset="UTF-8">

下面我们来看看具体的HTML旧版和新版HTML5都有哪些不一样的地方。HTML5 对 <head> 区域做了多项简化和改进，以下是主要差异点：

1、文档类型声明（doctype）

html/xhtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
或者
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的新式写法

<!DOCTYPE html>

2、字符编码声明

html4/xhtml

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

html5的写法

<meta charset="UTF-8">

3、脚本和链接标签的简化

html4/xhtml 需要指定类型：

<script type="text/javascript" src="file.js"></script>
<link rel="stylesheet" type="text/css" href="file.css">

HTML5可以省略类型：

<script src="file.js"></script>
<link rel="stylesheet" href="file.css">

4、HTML5新增了语义化标签用于<head>中使用的标签

<!-- 定义页面与外部资源的关系 -->
<link rel="dns-prefetch" href="//example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="font.woff2" as="font">

<!-- PWA应用清单 -->
<link rel="manifest" href="/manifest.json">

5、视口元标签（viewport）这是 HTML5 专为移动设备新增的标签(在HTML4时代不存在)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

6、兼容性标签的变化

HTML4/XHTML 写法
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
HTML5推荐简化写法
<meta http-equiv="X-UA-Compatible" content="IE=edge">

7、新增结构化数据的支持，HTML5新增了JSON-LD脚本支持

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite"
}
</script>

8、HTML5废弃的标签和属性，HTML5不在推荐使用。

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
各种浏览器特定标签如 <meta name="Generator" content="Microsoft FrontPage">

下面我们分别使用HTML4和HTML5的典型head头来进行比较，让我们更直观的看到他们的区别。

HTML4/XHTML的经典head：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Keywords" content="HTML, CSS, JavaScript">
  <meta name="Description" content="Free Web tutorials">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>HTML4页面</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="script.js"></script>
</head>

html5典型head：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Free Web tutorials">
  <title>HTML5页面</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <script src="script.js"></script>
  <link rel="manifest" href="/manifest.json">
</head>

通过上面的学习能够直接的了解到旧式HTML4的技术和HTML5 的 <head> 区域主要变化：

语法更简洁（去掉了冗余属性）
新增移动端适配标签
引入资源预加载机制
支持现代Web应用特性（PWA等）
移除了一些过时的浏览器特定标签
新增结构化数据支持

这些改进使HTML5的头部更简洁、更适应现代Web开发需求。