html5为什么要用结构标签布局网页？_随笔

对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在！

列举常用HTML5结构组合

header

nav

section

article

figure

figcaption

aside

footer

一般首页结构，如图所示

当然也可以是下面的结构

其中<section>和<article>最为相似，而且和div标签貌似也有很大相似之处。

但看似相似，并不是真的相似，这些标签是为了布局而生的，自然有它们更精确的语义定位，或者说他们更将强调Html的语义。

DIV

这个标签一直是我们见得最多、用得最多的标签。

它本身无任何语义，用作布局以及样式化标签。

Section

与div相似，但它有更进一步的语义。

section用作一段有专题性的内容，一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

Article

article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

div、section、article，语义是从无到有，逐渐增强的。

div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。

<header>标签

<header>标签定义文档的页眉（介绍信息）

用法：

<header><h1>windyauang的Dreamweaver专栏</h1></header>

<nav>标签

<nav>标签定义导航链接的部分

用法：

<nav>

<ul>

</ul>

</nav>

<section>标签

<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

用法： <section>

<p>文章段落内容</p>

</section>

<article>标签

<article>标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。总之，可以理解为article所表示的就是文章内容。

用法：<article>

<a href="#">文章内链接</a><br />

文章内容文章内容文章内容

</article>

<aside>标签

<aside>标签定义article以外的内容。aside的内容应该与article的内容相关，如上图所示，它类似于布局中的辅助侧边栏。

用法： <aside>

段落内容段落内容

</aside>

<footer>标签

<footer>标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息，也就是类似于版权信息的东西。

用法： <footer>

页脚文字，版权信息等

</footer>

整体的Html5代码应该如下：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<header><h1><a href="#">windyauang的Dreamweaver专栏-Html5布局示范文档</a></h1></header>

<nav>

<ul>

</nav>

<footer>文章版权内容</footer>

</section><aside>相关内容</aside>

<footer>页脚、页面版权内容</footer>

</body>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6147506.html

html5为什么要用结构标签布局网页？

发表评论

评论列表（0条）