要解释HTML5的语义化标签,首先我们来看一下什么是Web语义化。
什么是Web语义化
Web语义化是指使用恰当的html标签,class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能够快速理解网页内容。
语义化的Web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而使得可以让开发人员读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用;另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器能够读懂内容。
简单来说,就是利于SEO,便于阅读的维护理解。
总结起来就是:
- 正确的标签做正确的事情
- 页面内容结构化
- 即使没有CSS样式的时候,也容易阅读,便于理解和维护
- 便于浏览器,搜索引擎解析。利于爬虫标记、利于SEO
HTML语义化标签
HTML为网页文档内容提供了上下文结构和含义。对于HTML体系而言,Web语义化就是指使用恰当的标签,使页面有良好的结构,让页面元素有含义,其中的标签应该都是语义化的定义了文档的结构。
1 | <html> |
HTML语义化标签包括body/article/nav/aside/section/header/footer/hgroup,还有h1-h6/address等
下面我们来简单看一下常用的HTML语义化标签
header元素
header代表“网页”或者“section”的页眉,通常包含h1-h6 元素或者 hgroup, 作为整个页面或者一个内容快的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者相关logo。如下:
1 | <header> |
注意事项:
- 可以是“网页”或者任意“section”的头部部分
- 没有个数限制
- 如果hgroup或者h1-h6自己就能工作得很好,那么就没必要用header。
hgroup元素
hgroup 元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题组合。如下:
1 | <hgroup> |
注意事项:
- 如果只需要一个h1-h6标签就不用hgroup
- 如果有连续多个h1-h6标签就用hgroup
- 如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签
footer元素
footer元素代表“网页”或任意“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。如下:
1 | <footer> |
注意事项:
- 可以是“网页”或者任意“section”的底部部分
- 没有个数限制,除了包裹的内容不一样,其他跟header类似
nav元素
nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。 代码示例:
1 | <nav> |
侧边栏上目录、面包屑导航、搜索样式、或者下一篇上一篇文章我们可能会想要用到nav,但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。
注意事项:
- 用于整个页面的主要导航部分,不适合就不要用nav元素了
article元素
article 代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。
除了它的内容,article会有一个标题(通常会在header里),一个footer页脚。代码示例:
1 | <article> |
下面这是一个最简单的例子,如果在article内部再嵌套article,那就代表内嵌的article是与它外部的内容有关联的,如博客文章下面的评论:
1 | <article> |
article 内部可以嵌套article,表示评论或者其他跟文章有关联的内容。article内部还可以嵌套section,如下:
1 | <article> |
文章内section是独立的部分,但是它们只能算是组成整体的一部分,从属关系,article是大主体,section是构成这个大主体的一个部分。
注意事项:
- 自身独立情况下:用article
- 是相关内容: 用section
- 没有语义的: 用div
section元素
section 元素代表文档中的“节”或“段”,“段”可以是指一片文章里按照主题的分段;“节”可以是指一个页面里的分组。section通常还带标题,虽然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级。代码示例:
1 | <section> |
注意事项:
- 一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。
- 表示文档中的节或者段。
- acticle、nav、aside可以理解为特殊的section,如果可以用article、nav、aside就不要用section,没有实际意义的就用div
aside元素
aside 元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料,标签,名词解释等。
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。代码示例:
1 | <article> |
注意事项:
- aside 在 article 内表示主要内容的附属信息。
- 在article之外侧可以做侧边栏,没有article与之对应,最好不用
- 如果是广告,其他日志链接或者其他分类导航也可以用。
HTML语义化小结
总之,HTML语义化是反对大篇幅使用无语义化的div+span+class,而鼓励使用HTML定义好的语义化标签。
当然,如果需要兼容低版本的IE浏览器,比如说IE8以及以下,那就需要考虑一些HTML5标签兼容性解决方案了。