HTML语义化是指通过具有明确含义的标签来构建页面结构，让浏览器、搜索引擎以及辅助工具能够快速识别页面不同区域的功能。内容区域作为页面的核心部分，使用正确的语义化标签可以避免无意义的div嵌套，提升代码的可维护性和页面的可读性。
核心语义化标签介绍
main标签
<main>标签用于定义页面的主要内容区域，一个页面中只能出现一次该标签，内容应当是页面独有的，不包含重复出现在多个页面的侧边栏、导航栏、页脚等模块。
<body>
<header>页面头部</header>
<main>
<!-- 页面核心内容放这里 -->
<h1>文章标题</h1>
<p>文章正文内容</p>
</main>
<footer>页面底部</footer>
</body>
article标签
<article>标签表示页面中独立的可分发内容，比如一篇博客文章、一条用户评论、一个论坛帖子等，这些内容即使脱离页面上下文，也能独立存在并被理解。
<main>
<article>
<h2>HTML语义化入门</h2>
<p>本文介绍HTML语义化的基本概念...</p>
<footer>发布时间：2023年10月</footer>
</article>
</main>
section标签
<section>标签用于对页面内容进行分组，通常包含一组具有相似主题的内容，每个section一般会有自己的标题。它和article的区别在于，section的内容通常不能独立存在，是更大内容的一部分。
<article>
<h2>前端开发学习路线</h2>
<section>
<h3>HTML基础</h3>
<p>学习HTML标签、属性、语义化等内容</p>
</section>
<section>
<h3>CSS基础</h3>
<p>学习CSS选择器、布局、动画等内容</p>
</section>
</article>
标签使用规则与常见误区
<main>标签不能直接放在<header>、<footer>、<article>、<section>、<aside>等标签内部，必须是页面的直接子模块。- 不要为了添加样式而使用语义化标签，比如想给某块内容加边框就随便套一个
<section>，样式应该通过CSS实现，语义化标签只负责结构含义。 - 如果一块内容没有明确的主题，不需要分组，也没有独立的分发价值，那么使用
<div>标签即可，不需要强行套用语义化标签。
完整示例
下面是一个符合语义化的内容区域完整代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化内容区域示例</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li>首页</li>
<li>分类</li>
<li>关于</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>HTML内容区域语义化教程</h2>
<p>本文详细讲解HTML主要内容区域的语义化标签使用方法...</p>
<section>
<h3>main标签的使用</h3>
<p>main标签的定义和注意事项...</p>
</section>
<section>
<h3>article标签的使用</h3>
<p>article标签的适用场景...</p>
</section>
</article>
<aside>
<h3>相关推荐</h3>
<ul>
<li>CSS布局技巧</li>
<li>JavaScript基础</li>
</ul>
</aside>
</main>
<footer>
<p>版权所有 © 我的博客</p>
</footer>
</body>
</html>