H5页面布局及最常用结构化标签详解（1）

你是不是像我一样对老IE深恶痛疾，你是否对H5和CSS3新标签或者新属性望而却步？

但是我想告诉你的是在保证低版本功能无误，样式差的不是太远的情况下，大胆使用新标签、新属性吧，毕竟技术总会去淘汰不适应历史发展的东西！

首先说下，为什么要使用H5结构化标签：

1.页面结构更加清晰，更加语义化。

2.良好的SEO。

3.可读性好，后期维护更加容易。

4.提供特殊终端阅读，为社会特殊群体提供阅读体验（譬如盲人）。

下面做了一个简单的H5页面的布局图：

让我们先看下html代码：

废话少说，让我们开始依据上面的例子，看看这些新结构化标签：

①section

内容区块，应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分、分区，简介、文章条目和联系信息等。

<section>section1</section>

以下几种情况不建议使用：

■ section不是一般意义的容器元素，对于设置页面样式或者js操作容器，不推荐使用，建议使用div。

■ 强调独立区块时，最好使用article。

■ 在文章内页，最好用article。 

■ 对于没有标题的内容，不推荐使用。 

②article

article表示页面中的一块与上下文不相关的内容，独立的、完整的区块；article是大主体，section是构成这个大主体的一部分；可以互相嵌套。

<article>article1</article>

VS section

■ 强调独立区域块，最好的区分方法就是假设该区块拿掉，是否对页面其他区域有影响。

■ 在article配合aside使用时，不建议使用section。

③aside

可以包含与当前页面或主要内容相关的引用、侧边栏、广告等使用；在article之外，则可做侧边栏，没有article与之对应，最好不用。

<aside id="aside">i am aside</aside>

④header

通常放置在整个页面或者页面内的一个内容区块的标题。

<header id="header">i am header</header>

⑤footer

可以作为文档的尾部，也可以做某一部分的尾部。

<footer id="footer">footer</footer>

⑥nav

主要用于导航条、业内导航、翻页等，可以在头部尾部，页面中间。

⑦main

表示页面的主要显示内容，页面有且只有一个，不应该被任何其他结构标签包含，不能是以下元素的后代: section/nav/footer/header/aside/article等。

<main>main</main>

虽然这个标签很好，但是重点强调：IE不支持！IE不支持！IE不支持！

H5结构化布局的标签基本讲述完毕，其他H5常用标签，请继续关注我的下一篇文！