HTML代码的规范书写是前端开发的基础要求，其中语义化标签的使用是核心部分，合理的语义化能让代码更易理解，也更符合浏览器的解析规则。
HTML代码规范的基础要求
规范的HTML代码首先要保证文档结构完整，必须包含<!DOCTYPE html>声明、<html>、<head>、<body>等基础标签，同时标签名和属性名统一使用小写，属性值用双引号包裹。例如正确的基础结构是：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
另外要避免标签的随意嵌套，比如<p>标签内部不能放置块级元素，<a>标签内部不能嵌套其他可点击的交互元素。
什么是语义化标签
语义化标签指的是标签本身的含义和其所包裹的内容的含义相匹配，开发者看到标签就能知道这部分内容的作用，浏览器和搜索引擎也能通过标签理解内容的层级和属性。比如<header>标签表示页面或区域的头部，<nav>表示导航区域，不需要额外的class说明就能明确其作用。
与之相对的是非语义化标签，比如<div>和<span>，这两个标签本身没有明确的含义，仅用于划分区域或包裹行内内容，需要配合class或id才能明确用途。
常用语义化标签及使用规则
页面结构类语义化标签
- <header>：用于定义页面或某个区域的头部，通常包含logo、导航、搜索框等内容，一个页面可以有多个<header>，分别对应不同区块的头部。
- <nav>：专门用于包裹导航链接的集合，通常放在<header>内部，也可以独立存在作为侧边导航。
- <main>：表示页面的主要内容区域，一个页面只能有一个<main>标签，且不能直接作为<header>、<footer>、<nav>的子元素。
- <footer>
- <section>：表示页面中的一个独立区块，通常包含一组相关的内容，需要有自己的标题，比如文章的不同章节、产品的不同分类区域。
- <article>：表示独立的可分发内容，比如一篇博客文章、一条用户评论、一个论坛帖子，内容本身具有完整性，即使脱离页面其他部分也能独立存在。
- <aside>：表示和页面主要内容相关但非核心的附加内容，比如侧边栏、广告、相关推荐等。
内容语义化标签
- <h1>到<h6>：标题标签，按照重要性递减，<h1>是页面最高级标题，一个页面通常只有一个<h1>，标题层级不能跳跃，比如不能从<h1>直接到<h3>。
- <p>：段落标签，用于包裹一段完整的文本内容，不能用来包裹块级元素。
- <ul>、<ol>、<li>：列表标签，<ul>是无序列表，<ol>是有序列表，二者只能直接包含<li>子元素，列表项的内容放在<li>内部。
- <figure>和<figcaption>：<figure>用于包裹独立的媒体内容，比如图片、图表、代码块，<figcaption>是可选的标题，用于说明<figure>内的内容。
- <time>：用于标记时间或日期，通过datetime属性提供机器可读的时间格式，比如<time datetime="2024-05-20">5月20日</time>。
语义化标签的使用注意事项
首先不要过度使用语义化标签，比如一个简单的小区块不需要强制用<section>包裹，如果只是做样式划分，用<div>更合适。其次要注意标签的嵌套规则，比如<article>内部可以包含<section>，<section>内部也可以包含多个<article>，根据实际内容关系选择即可。
另外，对于不支持HTML5语义化标签的旧版本浏览器，可以通过简单的JavaScript代码让标签正常渲染，示例代码如下：
// 让旧浏览器识别HTML5语义化标签
(function() {
var tags = ['header','nav','main','footer','section','article','aside','figure','figcaption','time'];
for(var i = 0; i < tags.length; i++) {
document.createElement(tags[i]);
}
})();
最后，检查语义化是否合理可以通过去掉所有CSS样式，看页面内容是否依然能清晰呈现结构和层级，如果内容顺序和逻辑依然通顺，说明语义化做得比较到位。
规范书写的完整示例
下面是一个符合规范且正确使用语义化标签的页面示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML语义化示例</title>
</head>
<body>
<header>
<h1>我的技术博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/html">HTML教程</a></li>
<li><a href="/css">CSS教程</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>HTML语义化标签使用指南</h2>
<time datetime="2024-05-20">发布于2024年5月20日</time>
<section>
<h3>什么是语义化</h3>
<p>语义化标签指的是标签含义和内容匹配的开发方式...</p>
</section>
<section>
<h3>常用标签介绍</h3>
<p>下面介绍几类常用的语义化标签...</p>
</section>
</article>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href="/html-spec">HTML规范详解</a></li>
<li><a href="/css-flex">Flex布局教程</a></li>
</ul>
</aside>
</main>
<footer>
<p>版权所有 © 我的技术博客</p>
</footer>
</body>
</html>