HTML语义化

最新推荐文章于 2021-04-23 07:37:44 发布

长是人千离

最新推荐文章于 2021-04-23 07:37:44 发布

阅读量194

点赞数

分类专栏：前端文章标签： html html语义化

本文链接：https://blog.csdn.net/qq_30227429/article/details/96285519

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

html标签的分类
语义类标签的好处：
1. 增强可读性，页面结构清晰，便于团队的开发和维护
2. 有益于搜索引擎检索（SEO），支持读屏软件，根据文章自动生成目录等。
对于语义标签，用对比不用好，不用比用错好。
语义标签的4种使用场景：
1. 自然语言能力的补充（注解）
2. HTML有些标签是必须的，如果没有，文字会产生歧义。例如某种场景下表示强调的em
3. 文章标题摘要，例如：h1-h6,hgroup
4. 适合机器阅读的整体结构

一个典型的body结构类似：

<body>
   <header>
       <nav>
           ……
       </nav>
   </header>
   <aside>
       <nav>
           ……
       </nav>
   </aside>
   <section>……</section>
   <section>……</section>
   <section>……</section>
   <footer>
       <address>……</address>
   </footer>
</body>

在上述结构里的标签说明：
1. header通常出现在前部，表示导航或介绍性内容。
2. footer 通常出现在尾部，包含一些作者信息、相关链接、版权信息等。通常它和header都是放在article或者body的直接子元素。
3. aside表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。侧边栏是aside，aside不一定是侧边栏。
4. aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。
5. footer中的address表示作者信息。