如何理解 HTML 语义化

简单举例来说就是：段落用 p，边栏用 aside，主要内容用 main 标签

其实就是用正确的标签做正确的事！

 语义化的好处是已读、有利于SEO等。

 

通过使用恰当语义的HTML标签，让页面具有良好的结构与含义，可以有效提高：

1. 可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
2. 可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
3. 国际化：全球只有13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
4. 互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护；

语义化标签介绍

 

在HTML5出来之前，我们习惯于用`div 来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

一个没有用div标签布局的页面

如上图，这个页面结构中摒弃了所有div元素，取而代之的是HTML5语义化标签（用哪些标签取决于你的设计目的）。

同样，W3C制定了这些语义化标签，不可能完全符合我们的设计目标。我们的目标是为了能够让开发者或是爬虫读懂各个模块的语义化内容，因此，div作为一个没有任何语义，仅仅是用来构建结构的元素，是最适合做容器的标签。

 

下面就让我们把HTML5语义化标签过一遍：

HTML5语义化标签

<header>

• 定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；
• 一个页面中<header>的个数没有限制，可以为每个内容块添加一个header；

<nav>

• 定义文章导航栏，链接等;
• nav一般和u、li配合做导航栏；

<main>

• 定义文章的主要内容
• main标签在一份文档中是唯一的，其后代元素常常包括`<article>`；

<article>

• 定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

<section>

• 与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

<aside>

• 侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

<footer>

• 页脚，通常包含作者、版权信息或者相关链接等；