XHTML structured two: Case study: W3school's structured tags

无论如何，不要跳过本节。阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更新网站的便利性。

在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低50%左右，在减少服务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。

这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。

本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。

每个元素都必须结构化吗？

正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。

我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：


<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Asusun Suna">Asusun Suna</a></li>
<li id="d"><a href="/d.asp" title="Tuturin dot net">Tuturin dot net</a></li>
<li id="m"><a href="/m.asp" title="Tuturin Multimedia">Tuturin Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Kwamtarin Gudanarwa">Kwamtarin Gudanarwa</a></li>
</ul>
</div>

div、id 和其他帮手

如果被正确地使用，div 可以成为结构化标记的好帮手，而 id 则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的 XHTML，以及巧妙地利用 CSS，并通过标准文档对象模型 (DOM) 向站点添加复杂精巧的行为。

W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div：

div 元素，通过与 id、class 及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使 XHTML 适应他们自身的需求和口味。

div 是 division 的简写。division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

确定结构的通用机制

所有编写 HTML 的人对段落和标题这类常见的元素都很熟悉，但是有些人对 div 就可能不那么熟悉了。在W3C的描述中我们可以找到理解 div 元素的关键，“一种添加结构的通用机制。”

在本站的首页，我们将教程目录列表封装于一个 div 之中，这是因为教程目录并不是正文的任何元素的一部分。其中，h2元素标记每个教程的标题，同时 ul 列表元素标记每个教程的详细列表。但是在更大更具体的意义中，这个教程目录扮演了一个结构化的角色，即二级导航组件。为了强调这个角色，我们使用 navsecond 这个 id 标注这个 div。

<div id="navsecond">
<h2>HTML tutorial</h2>
<ul>
<li><a href="/html/index.asp" title="HTML tutorial">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML tutorial">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS tutorial">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP tutorial">TCP/IP</a></li>
</ul>
<h2>XML tutorial</h2>
<ul>
<li><a href="/xml/index.asp" title="XML tutorial">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL language">XSL</a></li>
... ...
... ...
</div>

Aka ba za a zai yinming. "Gladys" da "orangebox" ni kaiyuan shiyong XHTML de mingming guize. Dan shi yanyi de (semantic) huo yuanjiegou de (meta-structural) mingming zui hao (jiu shi neng jieshi zhongzhong yuansu suo zhixing gongneng de mingming).

当客户决定使用蓝色时，你会觉得将站点某部分命名为 orangebox（橙色框）会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来 "Gladys"（格拉迪斯，女子名）到底代表导航区、侧栏还是搜索框。

sake kira id "menu" ko "content" ko "searchform" zai kawo cikakken yadda zai iya ganin. Duk da haka, tura ba daya da tsarin nuna ba, sai wuri na kwayar wuri wanda ya yarda shine ya iya zama kowane nau'ikan tsarin nuna da kwarin. Hakanan yana nufin, kamar yadda za a iya amfani da kwayar wuri da nuna tsarin kusa ko kuma layin nuna, zai iya yana rarraba al'ada na nuna kamar yadda zai iya ganin. Baya ga haka, zai iya rarraba al'ada na nuna kamar yadda zai iya ganin.

id Vs. class

id daga baya ba daya cikin XHTML ba; kuma class ko kwarin div kuma. Za su iya

<div id="searchform">Komponentuna na forman nazarin zai iya a cikin hinar naman. Za
kwarin na page shine unique.</div>


   <h2>Rarrabawar blog na yau</h2>
   <p>Mantalkar blog zai iya a cikin hinar naman.</p>
   <p>Wannan shi ne mambu na blog na yauwa.</p>
   <p>Sa'ayi akwai mambu da yau tsakiyar page, kuma dukiya ta iya
   zai iya ayyana mutummiyar abubuwa a blog. Page blog zai iya
   kwarin da yana aiki a cikin "blogentry" (ko wuri ko wuri kuma)
   class).

</div>


   
Yesterday's blog post

   
In fact, here we are inside another div of class
   "blogentry."

   
They reproduce like rabbits.

   
If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.

</div>

在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class="blogentry" 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的（文章）入口，所以 class 属性被应用于这种情况。同样地，新闻站点通常拥有多个 div，这些 div 的 class 可以命名为 "newsitem" 或者别的什么。

然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和

段落，新闻站点也一样。我们在这里展示 class 为 blogentry 的 div，并不是鼓励你在站点中塞满 div，而仅仅是为了向你展示这个原则：在同一个 HTML 文档中，使用多次 class，但只能使用一次 id。

粘性贴纸理论

把 id 属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月 15 号之前必须缴纳的账单。

id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。

When an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manyCreating selectorsmethods, but id is easy to use and has many uses.

The power of id

The id attribute is incredibly powerful. It has the following capabilities:

  • As a stylesheet selector, allowing us to create compact and minimized XHTML.
  • As the target anchor of hyper text, replacing the outdated name attribute.
  • As a method to locate a specific element from a DOM-based script.
  • As the name of an object element.
  • As a tool for general purpose processing (in the examples of W3C, 'used as a domain identification tool when extracting data from an HTML page to a database, or converting an HTML document to other formats, etc.).

Rules for id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not capture this error, XML parsers will. At the same time, if you use id with JavaScript in a form, the id name and value must be a valid JavaScript variable. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using underscores in class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

Semantic tags and accessibility

Now, we have discussed the widely used XHTML elements (especially div and id), let's see some examples about the homepage of this site. First, let's review the menu located at the header position:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Asusun Suna">Asusun Suna</a></li>
<li id="d"><a href="/d.asp" title="Tuturin dot net">Tuturin dot net</a></li>
<li id="m"><a href="/m.asp" title="Tuturin Multimedia">Tuturin Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Kwamtarin Gudanarwa">Kwamtarin Gudanarwa</a></li>
</ul>
</div>

Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa. Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa.

Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa. Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa.

Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa. Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa.

Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa. Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa. Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa.

A kanamai a baiwarin ya yaki, a kuma ya iya nuna cikin juzufin, a cewa yana iya ga a yi kama cikin kaiyewa a cikin koyarwa, domin yana iya ga cikin baiwarin da kuma CSS, domin yana iya kama cikin kaiyewa kamar da cikin kaiyewa da cikin kaiyewa. Kuma, domin a cikin kaiyewa na yankin, a kuma ya iya kama cikin kaiyewa kamar da cikin kaiyewa. Idan a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa. Kuma, domin a cikin kaiyewa ya iya kama cikin kaiyewa, a kuma ya iya kama cikin kaiyewa.

And, since the tags do not include images and table cells, this navigation component can be referenced by any page within the site without changing the structure, while giving it different visual effects. In short, by modularizing the code, we have improved the reusability of the code.