在开发 Web 应用时，项目往往从简单开始，但随着需求的增长，文档结构会变得复杂起来。
标签虽然灵活，但滥用会导致代码杂乱、难以维护。原因在于 `
` 是纯粹的容器，没有任何语义意义。
幸好，HTML 提供了语义化标签这一优雅的解决方案。
根据 W3Schools 的定义：语义化元素是带有明确意义的 HTML 元素。它们不仅能让浏览器理解，还能清晰地传达意图给开发者和用户。
为什么要使用语义化标签？
提升可访问性：语义化标签帮助辅助技术（如屏幕阅读器）更好地导航内容。
增强 SEO：搜索引擎能更准确地理解内容结构，提高页面排名。
易维护性和可读性：清晰的代码结构更易阅读和协作。
减少代码冗余：更少的额外类名或属性，代码更简洁。
总之，除非别无选择，尽量少用 <div>。
下面是 7 个可以替代 <div> 的语义化标签及其应用场景。
1. <section>：组织相关内容
<section> 用于将相关内容分组，就像书中的章节，每个部分围绕特定主题。
示例：
<section><h2>我们的服务</h2><p>我们提供网站开发、设计和营销等多种服务，助您取得成功。</p>
</section>2. <article>：独立的内容单元
<article> 适合表示独立的内容单元，例如文章、博客或新闻条目。
示例：
<article><h3>早晨锻炼的好处</h3><p>晨练可以提升能量，改善心情，是开启一天的绝佳方式。</p>
</article>3. <nav>：导航链接
<nav> 用于定义导航区域，就像网站的目录或地图，指引用户浏览站点。
示例：
<nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#services">服务</a></li><li><a href="#contact">联系我们</a></li></ul>
</nav>4. <header>：头部内容
<header> 用于页面或部分内容的头部区域，通常包括标题和导航。
示例：
<header><h1>我的个人博客</h1><p>分享世界各地的故事与见解。</p>
</header>5. <footer>：底部内容
<footer> 用于表示页面或部分内容的底部，通常包括版权声明、联系信息等。
示例：
<footer><p>© 2024 我的个人博客。保留所有权利。</p><a href="#privacy-policy">隐私政策</a>
</footer>6. <main>：主要内容区域
<main> 用于包含网页的主要内容，不包括头部、底部或侧边栏。
示例：
<main><h2>欢迎访问我们的网站</h2><p>我们为您提供量身定制的解决方案。</p>
</main>7. <aside>：补充内容
<aside> 用于表示与主内容间接相关的信息，例如侧边栏或附加说明。
示例：
<aside><h4>相关文章</h4><ul><li><a href="#article1">改善睡眠的 10 个小技巧</a></li><li><a href="#article2">经济实惠的健康饮食指南</a></li></ul>
</aside>可视化：语义化标签的页面结构
使用语义化标签构建页面时，页面结构会更加清晰。例如：
<header>...</header>
<nav>...</nav>
<main><section>...</section><article>...</article><aside>...</aside>
</main>
<footer>...</footer>这样不仅方便开发人员理解页面布局，还能让搜索引擎和辅助设备更好地解析内容。
结论
滥用 <div> 会导致代码冗杂且不易维护。通过使用 <section>、<article>、<nav>、<header>、<footer>、<main> 和 <aside> 等语义化标签，你可以创建更清晰、更具可读性和更高效的网页结构。
记住：除非没有合适的语义化标签，否则尽量少用 <div>！
最后：
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读
