语义化标签

基于文本的元素

h1..h6 & title

两个都表示标题。 title是用户显示网站标题，一般位于head里。h1..h6位于body内。页面或部分内容的主标题为h1，后面的按照内容层级来进行标题筛选。

<strong> & <b>

两个标签都会加粗内容。 strong是为了凸显强调文本而加粗， 而b标签bold则是为了加粗而加粗, 你也可以认为b标签是一种风格。seo更容易爬取到strong的内容。

em和i

两个标签都是泄题。 em(emphasize)是使文本变成斜体进而强调，i(italic)用于以另一种语音或音调传达文本，类似于被放在引号中一样。em语义更为强烈，seo支持较好。

布局元素

先来一图，直观点.

header

这个是显示在body页面内的一个结构元素，他与head不同，head不显示在页面上，head只是包含一些metadata，title，css link之类的。

nav

导航Navigation, 主要是包含链接部分，例如页面内的全局导航，主要的链接之类的，一些单独的链接，直接a标签就可以。

article

这个就很明显了，文章，独立的，不会产生混淆的。

section

section用于分解页面，以产生层次结构。多用于对内容的分组，大多数都会包含标题.

• article, section, div之间，该如何抉择

无论是和元素都有助于划分文档的结构。但是如果内容仅为样式目的而使用，并且不为文档大纲提供值，应该使用元素。

如果内容添加到文档大纲中并且可以单独重新分发或联合，则使用该元素。

如果内容添加到文档大纲并表示内容的主题组，请使用该元素。

aside

aside表示与其他内容相切的部分，比如一些插入，简要说明之类的。

footer

footer元素通常位于父元素的底部。footer元素中的内容应该是相对信息.

原文