65.9K
CodeProject 正在变化。 阅读更多。
Home

语义 HTML5 页面布局

Modesty Zhang
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (34投票s)

2011 年 1 月 14 日

CDDL

10分钟阅读

viewsIcon

253226

downloadIcon

7013

介绍一种简化的语义化 HTML5 标签页面布局，以及一个基本的 HTML5 模板和 CSS 资源。

引言

面向服务的 HTML 应用程序 (SOHA) 提倡干净且结构良好的 HTML 代码，而最初的 SOHA 页面布局模板 HTML 代码基于 XHTML 1.0 transitional 标准。XHTML 10 Transitional DOCTYPE 有助于在设计时创建格式良好的基于 XML 的 HTML，一些 IDE（如 Visual Studio 2010、Dreamweaver）具有出色的智能感知或代码提示，有助于在构建页面时识别潜在的 HTML 语法错误。然而，根据 WHATWG 规范，XHTML 标准并非 HTML5 的发展方向，并且 W3C 已解散 XHTML2 工作组，并将更多资源投入到 HTML5。由于 SOHA 仍处于起步阶段，而 HTML5 是 Web 的发展方向，因此是时候让基本的 HTML 页面模板更加面向未来且更符合 HTML5 标准，同时保留 纯粹的语义化 HTML (POSH) 的所有优点，以实现有效、语义化、可访问且结构良好的 HTML。

XHTML 的现实情况是，它对语法格式有更严格的要求，但在迁移到它时几乎没有给开发人员带来任何新功能，并且据估计，整个 Web 中只有 1% 的 HTML 是基于 XHTML 的。这是所有浏览器在渲染格式不正确的 HTML 时容忍度非常高，并且需要保持向后兼容性来处理现有的非 XHTML 格式化甚至没有 DOCTYPE 的 Web 内容（浏览器怪异模式）的主要原因。这也是 WHATWG 考虑推广 HTML 而非 XHTML 的一个重要因素，它允许 <img>、<br> 等标签在没有闭合标签的情况下仍然有效，并且不需要将标签属性值用引号括起来等等。其理念是采用一个无版本标准，该标准不断发展，并且始终对现有网页保持向后兼容。

本文提供了一个实用的基于 HTML5 的页面布局模板，用于实现有效、语义化、可访问且结构良好的 HTML，它具有简化的结构和更少的 HTML 代码，并使用了有意义的语义化标签，可在旧版浏览器（包括 Internet Explorer 6、Internet Explorer 7 和 Firefox 2）以及支持 HTML5 功能的现代浏览器中正常工作。通过应用这些基于 HTML5 语义化标签（如 <header>、<section>、<nav>、<aside> 等）的页面结构，可以使网页使用简洁的、面向未来的、语义化的 HTML5 标签来表示内容，更易于理解和维护。它还使我们能够在浏览器和 HTML5 标准不断发展的今天就开始使用 HTML5。

可以 在此处 查看利用语义化 HTML5 页面布局的示例 HTML 页面。

背景

这个 HTML5 语义化标签页面布局模板可以看作是 SOHA 架构在基本页面 HTML 方面的演进，它正从 XHTML 转向 HTML，以实现更好的向后兼容性、更轻量级以及更符合 HTML5。它提倡 POSH 的实践，因为语义化 HTML 提供了更好的标记层级和有意义的分组，搜索引擎可能会因此获得更好的排名。

例如，当屏幕阅读器/用户代理或搜索引擎看到 <div id="pageHeader">...</div> 时，它无法感知 DIV 包含的是页面头部（因为这些机器人无法理解标签 ID），尽管页面头部 DIV 通常包含网站的通用信息，但它只是一个用于分组目的的普通 DIV ，没有语义含义。如果我们将其更改为 <header id="pageHeader">...</header>，当屏幕阅读器/用户代理或搜索引擎读取它时，它们就会获得页面头部的语义含义，然后可以更好地处理信息，以获得更好的内容索引或页面排名。

以上只是 POSH 的一个潜在好处，还有许多 其他帖子 讨论了我们为什么需要语义化 HTML。简而言之，如果 Web 专业人士关心网站的长期可读性、可维护性并保持标准和面向未来，他们就会拥抱 POSH，以获得更清晰、更轻量级、结构良好且有意义的 HTML 内容标签。由于几乎所有 HTML 代码都是在 SOHA 架构 中手工编写的，这极大地改善了 SOHA 的基础。

问题是，对于基于 HTML5 语义化标签的页面布局，它在不支持 HTML5 的旧版浏览器中是否有效？即使是当前版本的现代浏览器，它们也还没有完全支持 HTML5 标签（仅部分支持），我们如何才能确保这种基于 HTML5 的页面布局在不同浏览器和不同平台上都能正常工作？根据 WHATWG 规范，最常用的 HTML5 分区标签 包括 article、aside、details、figcaption、figure、footer、header、hgroup、menu、nav、section 等。为了现在就开始使用 HTML5 标签，并仍然在不同浏览器中正确渲染和表现，我们还需要一些 JavaScript（IE 的 HTML5 shim/shiv）和 CSS（需要设置新标签的显示规则）的解决方案。当浏览器提供更多 HTML5 支持时，我们可以在未来逐步移除这些解决方案。

由于我们的目标是提供一个页面模板，我们将重点关注 HTML5 分区标签，还包括 DOCTYPE、META 标签、SCRIPT 标签、语义化 HTML5 标签和 CSS 的更改。让我们从页面 DOCTYPE 开始。

HTML5 DOCTYPE

HTML 页面的 DOCTYPE 声明将告诉浏览器以标准模式渲染页面，尽管声明中包含 DTD URI，但浏览器不会从指定 URL 获取 DTD 来验证标记。如果页面没有 DOCTYPE 声明，就像早期（90 年代末之前）的 HTML 内容一样，浏览器将出于兼容性原因以“怪异模式”进行渲染。

典型的 XHTML 1.0 transitional DOCTYPE 如下所示

<!--XHTML 1.0 Transitional DOCTYPE, absent for HTML5-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

它并不算太长，但我总是记不住，总是依赖工具或 IDE 来为我插入。相反，HTML5 DOCTYPE 得到了极大的简化（并经过测试）

<!-- HTML5 DOCTYPE -->
<!DOCTYPE html>

更加简洁明了，无需依赖工具编写。事实上，较长的 XHTML DOCTYPE 和较短的 HTML5 DOCTYPE 的工作方式相同：只要浏览器看到 DOCTYPE 声明，无论指定何种 DTD 类型，它都会切换到标准模式来渲染页面，浏览器实际上并不会下载 DTD 并验证 HTML 文档，它似乎只在设计时用于 HTML 编辑器。

此外，HTML5 中还简化了其他常用标签。

HTML5 简化标签

首先，根 HTML 标签不需要命名空间（因为 HTML5 正从 XML 迁移），它只需要 LANG 属性。一个经典的英语内容 HTML 根标签通常是

<!-- namespace is not needed in HTML5 root element -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

在 HTML5 中，根元素可以这样写

<html lang="en">

此外，一些 meta 标签和常见的 script 标签也得到了简化。一个典型的 UTF-8 编码 meta 标签以前是

<!-- long UTF-8 charset meta tag, absent from HTML5 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

charset meta 标签被简化为

<meta charset="utf-8">

至于 script 标签，以前是

<!-- type attribute in script tag is not required in HTML5 -->
<script type="text/javascript" src="javascripts/lib/jquery-1.4.4.min.js"></script>

由于 JavaScript 是 HTML5 中唯一的脚本语言，因此无需指定 type 属性，它被缩短为

<script src="javascripts/lib/jquery-1.4.4.min.js"></script>

以上是 HTML5 中 <body> 标签之前的一些简化，让我们看看页面布局是如何变化的。

基于 HTML5 语义化标签的页面布局

典型的 HTML 页面会有一个页眉、页脚和中间页面内容。在中间页面内容中，顶级可能包含导航、内容和侧边栏 3 列。当然，在内容中，它可能嵌入更多部分，这取决于每个页面的具体内容。图 1 直观地展示了这种顶级页面布局

html5pagelayout.png

图 1. 使用语义化 HTML5 分区标签的典型页面布局

通常，<header> 用于分组介绍性或导航辅助内容。通常，header 元素用于包含部分的标题，它可以包含部分的目录、搜索表单、徽标等；底部，<footer> 通常包含有关其部分的信息，例如谁撰写的、相关文档的链接、版权数据等；在页面中间，<nav> 元素表示页面的一部分，其中包含指向其他页面或页面内部分的链接，通常是包含导航链接的部分；<aside> 内容与 aside 元素周围的内容 tangential 相关，可以将其视为与该内容分开，例如，引语或侧边栏、广告等。在页面布局的最中心，<section> 包含文档或应用程序中的一个逻辑或物理分组内容，例如，网站的主页可以分成介绍、新闻条目、联系信息等几个部分。而 <article> 标签是一个文档、页面、应用程序或站点中独立的构成部分，可以独立分发。例如：<article> 可以包含一个论坛帖子、一篇杂志或报纸文章、一个 Web 日志条目、用户提交的评论、一个交互式小部件或 gadget，或任何其他独立的文本内容。

下面是代表上述布局的骨架 HTML 代码

图 2. 页面布局的 HTML 代码
<body>
	<div id="pageContainer">
		<header id="pageHeader"></header>
	 	<div id="contentContainer" class="clearfix">
			<nav id="pageNav"></nav>

  		<section id="pageSection">
				<header class="sectionHeader"></header>
				<article class="sectionArticle"></article>
				<footer class="sectionFooter"></footer>
			</section>

 			<aside id="pageAside"></aside>
		</div>
		<footer id="pageFooter"></footer>
	</div>
</body>

您可以使用不同的代码来布局，例如，可以使用 float 布局来布局包含 <nav>、<section> 和 <aside> 的中间行。我使用 <DIV> 来进行分组，通过使用“clearfix”样式，可以确保其直接子元素在同一行中水平布局，这样我们就可以避免使用空的、没有任何语义意义的标签。我通常为页面中只出现一次的标签分配 ID，而使用 CLASS 来处理可能出现的多个实例。例如，顶级页眉 <header> 的 ID 是 pageHeader，而节标题的 CLASS 是 sectionHeader。

现在我们有了简单易懂的页面布局 HTML 代码，我们确实需要 JavaScript 和 CSS 的帮助才能使其在今天的浏览器中正常工作。

用于语义化 HTML5 标签页面布局的 JavaScript 和 CSS

由于当前版本的浏览器并未完全支持 HTML5 特定标签，它们仅将它们视为用户定义的标签。所有主流浏览器，除了 Internet Explorer（包括 IE6、IE7 和 IE8），都将标签渲染为内联元素，并允许开发人员自定义样式，就像我们通常为需要自定义样式的其他标签一样，我们可以放心地说，这些浏览器已经让开发人员可以使用语义化 HTML5 标签布局了，我们只需要单独处理 Internet Explorer。

由于 IE 不知道如何渲染未经识别的标签并且拒绝对其进行样式化，我们可以使用 HTML5 shiv/shim 来使其工作。这是 Sjoerd Visscher 发现的 技术，如果一个 DOM 元素是通过脚本创建的，并且其名称与标签相同，那么 IE 就会开始支持样式化，这基本上就是 html5.js 所做的，我们可以使用条件注释链接将其仅用于 IE

<span class="com"><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></span>

非 IE 浏览器会将上述条件脚本标签视为注释，而仅版本低于 9 的 IE 会运行脚本。以下 CSS 规则将告诉所有浏览器将我们所有的分区标签渲染为块级元素

/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section 
{ display: block; }

为了使页面布局 CSS 成为真实 Web 页面的可靠基础，以下是具有简单 CSS 重置和基本 960 布局（它将 pageContent 居中于浏览器窗口中），以及 clearfix 样式的 CSS 规则

/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section 
{ display: block; }

/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol  { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}

/* =page level container */
#pageContainer {
    margin: 0px auto 0px auto;
	width: 960px;
}

#pageHeader {
    margin:0px auto 0px auto;
    width:960px;
    height:82px;
    position:relative;
}

#contentContainer {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 500px;
}

#pageFooter {
    margin: 0px auto;
    padding-bottom: 20px;
	width: 960px;
	position: relative;
}

/* Clear Floated Elements */
.clearfix:before, .clearfix:after {content: "\0020"; 
display: block; height: 0; visibility: hidden;}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

有关更复杂的 HTML5 页面模板，您可以参考 HTML5 boilerplate。

总结

实际上的 示例 HTML 页面 是对 Web App Common Tasks by jQuery 中提供的示例页面的改进，它不仅使用了本文讨论的语义化 HTML5 标签，还将 CBEXP JavaScript 文件重构为 jQuery.sohabase.js，以更好地适应 SOAH 架构。通过比较源代码，您可以发现页面布局和视觉样式与以前基本相同，脚本功能也一样，而 HTML 代码则更加简洁且语义上有意义。

语义化 HTML5 标签页面布局简化了基本页面布局，并使用户能够今天就能跨浏览器和跨平台开始使用 HTML5 标签，它拥有 POSH 的全部优势，并以更具未来感和标准化的方式渲染网页。它使用简单而有意义且代码量少的 HTML 来构建页面的骨架，更易于创建、理解和维护，同时保持 CSS 在尺寸、定位和样式方面的灵活性。既然 HTML5 是 Web 的发展方向，为什么在构建新东西时不尝试一下呢？

历史

  • 2011 年 1 月 14 日：初次发布
© . All rights reserved.