什么是HTML

HTML全称是HyperText Markup Language，翻译过来就是 超文本标记语言

。它定义了网页的内容和结构。

为什么要使用语义化标签

可读性、可维护性

html

有很多标签，每个标签都有它的语义，比如 h1

～ h6

表示不同重要程度的标题。虽然平时很多同学用无语义的标签 div

、 span

等也能实现相同的效果，但是可读性就差了很多。也许有同学觉得可读性没有变差啊，那是因为我们当中很多人平时就没有使用语义标签的习惯，全都是 div

。

由于 html

是标记语言，是声明式写法，不具有可编程性，逻辑表达能力不强。 html

标签就像其他可编程语言例如： Java

、 C

、 Javascript

等的变量，如果一位 程序员 随意给变量命名，代码的可读性会非常差，后期维护成本也会非常高。

SEO

由于绝大多数网站的域名难以记住，很多人上网都是通过门户网站上网。但是，搜索引擎出来以后，使用搜索引擎上网越来越成为一种趋势。搜索引擎可以根据你输入的关键字，直接搜出相关网站和内容，免去人工一个一个去查找。

可是搜索引擎是如何知道网站是我们要找的内容呢，搜索引擎派出 爬虫

会时时刻刻的去访问网络上的各种网站，当它获取到一个个网站的 html

文档，会根据文档头部内容里面的 meta

数据判断出网站类型以及内容，并保存到数据库。(恶意诱导爬虫另当别论)

seo

重要吗？当然非常的重要。 seo

能给网站带来流量，流量就像网站的血液一般，没有访问量，网站就等于不存在。 seo

现在已经成为了互联网的一个垂直行业。做得好的，年入百万不是梦。但是， seo

运营并仅仅包含这些。

可访问性

一个好的网站应该尽可能让更多的人无障碍浏览。例如盲人借助屏幕阅读器，也可以上网购物。如果网站的购物车按钮是用 div

写的，那么屏幕阅读器识别起来会非常的困难。我们为什么要让盲人也可以上网呢，这是一个非常有意思的问题。因为我们每天要花许多的时间用手机或其他设备浏览网页，万一以后眼瞎了，我们以后还可以冲浪啊。(不仅如此，这个世界上还有盲人游戏、盲人程序员)

常见 HTML 标签语义

关于 html

标签语义的讨论和文章，已经数不胜数，也有很多网站开发人员想竭尽全力去遵守，可是一旦到了开发的时候，就想不起该用什么标签了。于是，就开始挠头皮，时间久了，久秃了。

下面列举一些标签的用法：

article

: 翻译过来就是文章的意思，其内容应当是一篇独立完整的文章。可以是杂志、报纸、技术或学术文章、论文或报告、博客或其他社交媒体文章。 article

可以嵌套，但是其内容必须是相关的。每个 article

都应该有一个标题( h1

～ h6

)。

section

: 段落。比如一篇文章( article

)的片段。每个段落应该有一个标题( h1

～ h6

)，当 section

作为 arcticle

的子元素时，标题字号不要大于文章的标题(否则看起来很怪异)。也不建议对 section

使用样式或者作为脚本切入点(大致意思，就是不要用js操作它)，应该使用 div

来替代它干这些事。它和 p

标签有区别。我们平时写文章换行、起头空两个字，这个表示一个段落，可以用 p

表示。而 section

可以是一个或多个 p

段落。这几个段落表达的意思相近或者构成一个完整的意思。类似于中小学语文课，老师让学生分段一样。

nav

: 导航块。比如包含跳转到其他页面或者本页面的链接。 nav

的内容可以是列表也可以不是。例如：

• ...
• ...

...

不过，在网站的底部一般都有很多链接，例如地址、联系方式等。这个时候一般没必要用 nav

。

aside

: 与当前位置段落相关的独立内容。例如相关文字、段落、广告、导航

h1

～ h6

: 重要程度不一的标题。

header

、 footer

: body

、 article

、 aside

、 nav

、 section

都可以有一个头部或者脚部。 header

通常用来包裹顶部的搜索框、目录、logo等，也可以包裹标题 h1

～ h6

，但不是必须的。

figure

、 figure-caption

: 两个结合使用，可用于注释插图、图表、照片、代码列表等。例如：

interface PrimaryCore {

boolean verifyDataLine();

void sendData(in sequence data);

void initSelfDestruct();

}

div

: 没有任何语义。可以用来包裹一系列相关的子节点，以及将相关内容定位布局。

ol

、 ul

、 dl

: 前面两个使用更为平常，分别是有序列表和无序列表。 dl

有点像 二维

的无序列表。例如：

得分A

赵xx

钱xx

孙xx

李xx

得分B

周xx

吴xx

郑xx

王xx

blockquote

、 q

: 都是引用的意思。一篇文章里面引用了另一篇的内容。如果需要展示引用的地址或者相关信息，可以配合使用 cite

标签。不同的地方是， blockquote

将包含 cite

标签在底部； q

引用内容更短小一些，像短语或者词语，且 cite

会作为其兄弟节点出现在它前面。虽然 q

的表现与双引号一样。但是，却有不同的使用场景。例如：说过的话，可以用引号包裹强调，可能不适合 q

。

s

、 del

: 两者默认外观差不多，都有中贯线。但是， s

表示没那么重要了，而 del

意味着已经废除。

strong

、 em

: 两者都有加强的意思。 strong

着重强调相关内容，而 em

强调的是语气，像英语口语中的重音。

未完......