HTML5 语义化-详细分析

本文讲解 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” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

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

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

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