语义化标签

基于文本的元素

h1..h6 & title

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

<strong> & <b>

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

emi

两个标签都是泄题。 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元素中的内容应该是相对信息.

原文

Last updated