html5语义化布局分割代码,HTML5语义化(示例代码)

什么是HTML语义化？

语义化(semantic)就是你看到某个标签就知道它是干什么的。语义化让“显示”与“语义”分离，HTML代码负责页面干什么，而显示效果则由CSS完成。让正确的标签做正确的事情。

比如：当我们看到下面的

标签时，就知道它的功能就是在页面中显示一个顶级标题。

this is a top level heading

为什么要语义化？

在HTML5出来之前，我们习惯用

表示页面章节，但是

没有任何语义，也就是说他要干的事情全凭开发者说了算。页面的导航栏是

,页面的边栏也是

,唯一的区别就是他们的id。这样不方便开发者阅读代码，也不利于浏览器和搜索引擎的解析。HTML5的核心理念就是“语义”与“显示”分离，那些没有“意义”的标签已经被放弃，如：font。总的来说，语义化有以下作用：

易于用户阅读：在没有CSS的情况下，页面也能呈现很好地内容结构、代码结构。

提高用户体验：例如title、alt用于解释名词或者解释图片信息。

有利于SEO:搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重。

方便其他设备解析：如盲人阅读器根据语义渲染网页。

有利于开发和维护：语义化更具可读性。代码更好维护，与CSS3关系更和谐。

理解几个标签

如下图所示，HTML引入、、、 、、

这些语义化标签之后，我们在构建页面布局时，完全可以不用

。

HTML5 Element

header 元素代表“网页”或“section”的页眉。

通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

header样例：

网站标题

网站副标题

HTML5 Element

footer与header对应，元素代表页脚，通常含有：作者，相关文档链接，版权信息等。

footer样例：

COPYRIGHT @ plusye

HTML5 Element

nav用在导航上,nav通常结合

• 使用做成导航栏。

nav样例：

• HTML 5
• CSS3
• JavaScript

HTML5 Element

1.aside在article内表示主要内容的附属信息;

2.在article之外则可做侧边栏，没有article与之对应，最好不用

3.如果是广告，其他日志链接或者其他分类导航也可以用

HTML5 Element

1.section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

2.section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级

HTML5 Element

1.article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。(特殊的section)