标签：标签 section 元素 语义 HTML HTML5 article

本文讲解 HTML 语义化相关内容, 语义化这一块作为前端开发者几乎是必须要了解的一块内容; 主要分享的内容有:

1. 什么是 HTML 语义化;

2. HTML 语义化网页的好处;

3. 如何进行 HTML 语义化;

4. 语义化标签有哪些 。

废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

一. 什么是 HTML 语义化

1. “语义化”: 指的是机器在需要更少的人类干预的情况下, 能够研究和收集信息; 让网页能够被机器理解, 最终让我们受益 。

2. HTML 标签语义化: 是让大家直观的认识标签(markup)和 属性(attribute)的用途和作用 。
   1. 很明显 Hx 系列看起来很像标题, 因为拥有粗体和较大的字号 。
   2. <strong>,<em> 用来加强语气 。
   3. 根据内容的结构化 (内容语义化), 选择合适的标签(代码语义化)便于开发者阅读, 和写出更优雅的代码的同时, 让爬虫和浏览器很好地解析 。

二. HTML 语义化网页的好处

1. 最主要的就是对 '搜索引擎' 友好, 有了良好的 结构和语义 的网页内容, 自然容易被搜索引擎抓取 。

2. 有利于 'SEO': 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息 。
   1. 爬虫依赖于 标签 来确定, 上下文 和各个 关键字 的权重 。

3. 方便其他设备解析 (如屏幕阅读器, 盲人阅读器, 移动设备) 以语义化的方式来渲染网页 。

4. 便于团队开发和维护, 语义化更具可读性, 遵循 W3C 标准的团队都遵循这个标准, 可以减少差异化 。

5. 为了在没有 CSS 的情况下, 页面也能呈现出很好地内容结构; 代码结构:为了裸奔时好看 。

6. 用户体验: 例如 title, alt 用于解释名词或解释图片信息的标签, 尽量填写有含义的词语, label 标签的活用 。

三. 如何进行 HTML 语义化

1. 尽可能少的使用无语义的标签 div / span 。

2. 在语义不明显时, 既可以使用 div 或者 p 时, 尽量用 p, 因为 p 在默认情况下有上下间距, 对兼容特殊终端有利 。

3. 不要使用纯样式标签, 如: b / font / u 等, 改用 css 设置 。

4. 需要强调的文本, 可以包含在 strong 或者 em 标签中(浏览器预设样式, 能用 CSS 指定就不用他们), strong 默认样式是加粗 (不要用 b), em 是斜体(不用 i) 。

5. 使用表格时, 标题 要用 caption, 表头用 thead, 主体部分用 tbody 包围, 尾部用 tfoot 包围 。 表头 和一般 单元格 要区分开, 表头用 th, 单元格用 td 。

6. 表单域要用 fieldset 标签包起来, 并用 legend 标签说明表单的用途 。

7. 每个 input 标签对应的说明文本都需要使用 label 标签, 并且通过为 input 设置 id 属性, 在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来 。

四. 语义化标签的收集

1. header
   1. header 元素代表 "网页" 和 "section" 的页眉 。
   2. 如果 hgroup 或 h1-h6 自己就能工作的很好, 那就不要用 header。

2. footer
   1. footer 元素代表 "网页" 或 "section" 的页脚 。
   2. 通常含有该页面的一些基本信息, 例如: 文档 '创作者的姓名' / '文档的版权信息'/ '使用条款的链接' / '联系信息' 等等 。

3. hgroup
   1. hgroup 元素代表 "网页" 或 "section" 的标题 。
   2. 当元素有多个层级时, 该元素可以将 h1-h6 元素放在其内, 譬如文章的主标题和副标题的组合 。
   3. 如果只需要一个 h1-h6 标签就不用 hgroup 。
   4. 如果有连续多个 h1-h6 标签就用 hgroup 。
   5. 如果有连续多个标题和其他文章数据, h1-h6 标签就用 hgroup 包住, 和其他文章元数据一起放入 header 标签 。

4. nav
   1. nav 元素代表页面的 "导航链接区域" 。
   2. 用于定义页面的主要导航部分 。
   3. 事实上规范上说 nav 只能用在页面主要导航部分上 。
   4. 用在整个页面主要导航部分上, 不合适就不要用 nav 元素 。

5. aside
   1. aside 元素被包含在 article 元素中作为主要内容的 "附属信息" 部分 。
   2. 内容可以是与当前文章有关的 '相关资料' / '标签' / '名词解释等' 。
   3. aside 在 article 内表示主要内容的附属信息 。
   4. 在 article 之外则可做 '侧边栏', 没有 article 与之对应, 最好不用 。
   5. 如果是广告，其他日志链接或者其他分类导航也可以用 。

6. article
   1. article 元素最容易跟 section 和 div 容易混淆, 其实 article 代表一个 '文档', 页面或者网站中自成一体的内容, 其目的是为了让开发者独立开发或重用 。
   2. 譬如论坛的帖子, 博客上的文章, 一篇用户的评论, 一个互动的 widget 小工具 。
   3. 自身独立的情况下: 用 article 。
   4. 是相关内容: 用 section 。
   5. 没有语义的: 用 div 。

7. section
   1. 标签定义文档中的 '节' (section、区段)。比如 章节、页眉、页脚或文档中的其他部分 。
   2. section 不是一个专用来做容器的标签, 如果仅仅是用于设置样式或脚本处理, 专用的是 div 。
   3. section 里应该有 标题 (h1~6), 但文章中推荐用 article 来代替 。
   4. 一条简单的准则是, 只有元素内容会被列在文档大纲中时, 才适合用 section 元素 。
   5. section 的作用是对页面上的内容进行分块, 如各个有标题的版块, 功能区或对文章进行分段, 不要与有自己完整、独立内容的 article 混淆 。

8. address
   1. 代表 '区块容器', 必须是作为 '联系信息' 出现, 邮编地址、邮件地址等等,一般出现在 footer 。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端HTML” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章还一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

标签：标签,section,元素,语义,HTML,HTML5,article
来源： https://blog.csdn.net/wuzhiyue2/article/details/118223753

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。