HTML5区域(Sectioning)的重要性

不管你以前在web页面布局中如何称呼它们 - “区域”还是“块”，我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头，页面主题，页尾等等区域来实现所谓的页面布局。

如果我去除了CSS，你看到页面布局变成了响应式风格，这其实就是HTML4 document如何在浏览器中实际被生成的样式。这里我们看到边栏区域其实是document中的另外一段信息。

为什么会这样呢？

主要的原因在于

是一个流动内容的元素。不管边框或者背景是什么样式，它和主题document并不分离，相反，作为其中的一个部分生 成。当我们移除CSS可以看到，边栏的“Resource”标题并非是一个独立的组件，而是document的一个部分。作为页面的阅读者来说，这一点大 家应该看到。

为了更好的说明，我们看看如下代码片段：

<div class="parent">
<h2>Heading</h2>
<p>Some content...</p>
	<div class="child">
		<h2>Another heading</h2>
		<p>Some other content...</p>
	</div>
</div> 

这里我们我们稍微的修改了一下内容，添加了两个p到来展示父子关系。 p.child标签属于p.parent。我们可以使用CSS来使得两个元素的关系看起来是这个样子。但是，要知道p在标准中的描述是“没什 么特殊含义”。非但不意味着任何语义上的含义，对于web页面的计算架构来说也没有任何意义。而且p对于我们来说也不可见。因此我们应该把他们都删 除，而使用如下4个元素来展示页面父子关系，如下：

<h2>Heading</h2>
<p>Some content...</p>
<h2>Another heading</h2>
<p>Some other content...</p> 

多选题：

A. 1 B. 2 C. 3 D. 4

你的答案是什么？ 正确的应该是 （B）。

也许你会不太理解，因为在HTML5的标准中拥有有如下具体的定义：

4.4 Sections

4.4.1 body

4.4.2 nav

4.4.3 article

4.4.4 aside

4.4.5 h1, h2, h3, h4, h5 and h6

4.4.6 hgroup

4.4.7 header

4.4.8 footer

4.4.9 address

但是如果你看看 4.4.8 footer的时候，你会看到如下内容：

       “the footer element is not sectioning content; it doesn’t introduce a new section.” 

这里HTML5的定义上有一些前后矛盾之处，不过大家也不用过于纠缠。

Section是一个新类型的p吗？

这可能是一个典型的错误理解。

Div其实在功能上并没有任何含义，如果你使用p来创建页面框架结构将会是一个非常糟糕的选择。

而Section用来定义一个结构化的区域，看看下面这个例子：

<section class="outer">
	<section class="inner">
		<h1>Section title</h1>
	</section>
</section> 

这里我们使用section来生成一个盒模式。如果我们运行 our outliner，我们得到如下警告：

[Untitled Section]

Section title

这里如果使用p的话，可以有效帮助我们划分区域：

<section>
	<div>
		<h1&gtSection title</h1>
	</div>
</section> 

生成结果如下：

Section title

可以看到没有任何警告或者提示！

总结

HTML 并不是一个SDK或者图形设计师的画板。它是一个Meta语言，一个帮助你了解特殊信息的语言。有时候我们使用解析器，获取主体，时间，来源或者流行等内 容。这就是microdata和RDF主要的功能。另外，上下文，层次，相关的重要性和代码关系都需要被考虑。这就是正确的区域元素使用和语法需要考虑 的。

有些人可能会告诉你不要过于考虑区域，可能由于没有什么意义。但是使用区域定义很好的提高了HTML的结构，上面我们已经很好的介绍了。

个人认为，Section不但对于优化document结构来说有好处，而且最终会让整个DOM趋于合理。而同时对于我们来说需要去适应这种变化，需要我们 自己去优化和改变自己的开发流程和习惯，但是我相信对于web开发的趋势和方向来说，最终会使得整个流程更加专业和标准化。对于变化应该值得。

以上就是HTML5 区域(Sectioning)的重要性的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于HTML5区域(Sectioning)的重要性的详细内容...