前端开发知识汇总系列四（HTML结构化、语义化）

1. 1. 结构化

为什么我们需要结构化?

因为没有元素给内容结构，所以浏览器不知道什么是标题，什么是段落。此外：

• 用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题（我们通常在一个网页上会花费很少的时间 spend a very short time on a web page)。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。
• 对您的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，您的网页在SEO（搜索引擎优化）方面效果不佳。
• 严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器（screen reader）。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。
• 使用CSS样式化内容，或者使用JavaScript做一些有趣的事情，你需要包含相关内容的元素，所以CSS / JavaScript可以有效地定位它。
• 因此，我们需要给我们的内容结构标记。
  1. 语义化

为什么我们需要语义？

在我们身边的任何地方都要依赖语义学 — 我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。举个例子, 我们知道红色交通灯表示“停止”，绿色交通灯表示”通行“。 如果运用了错误的语义，事情会迅速地变得非常棘手 (难道有某个国家使用红色代表通行？我不希望如此)

同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。<h1> 元素也是一个语义元素，它给出了包裹在您的页面上用来表示顶级标题的角色（或意义）的文本

一般来说，浏览器会给它一个更大的字形来让它看上去像个标题， 虽然你可以使用CSS让它变成任何你想要的样式。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器。

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。

通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝

此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。

常见标签语义：

标签	语义
<p>	段落
<h1> <h2> <h3> ...	标题
<ul>	无序列表
<ol>	有序列表
<blockquote>	大段引用
<cite>	一般引用
<b>	为样式加粗而加粗
<strong>	为强调内容而加粗
<i>	为样式倾斜而倾斜
<em>	为强调内容而倾斜
code	代码标识
abbr	缩写

 

示例

将你构建的页面当作一本书，将标签的语义对应的其功能和含义；

• 书的名称：<h1>
• 书的每个章节标题: <h2>
• 章节内的文章标题: <h3>
• 小标题/副标题: <h4> <h5> <h6>
• 章节的段落: <p>