XHTML 是什么？
XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。 XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格更纯净的 HTML 版本。 XHTML 是作为一种 XML 应用被重新定义的 HTML。 XHTML 是一个 W3C 标准。
为什么要使用XHTML？
XHTML 是 HTML 与 XML（扩展标记语言）的结合物，XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。
我们认为万维网上的许多页面都包含着糟糕的 HTML 代码。下面的 HTML 代码仍然可以工作得很好，即使它没有遵守 HTML 规则：
XML 是一种标记化语言，其中所有的东西都要被正确的标记，以产生形式良好的文档。 XML 用来描述数据，而 HTML 则用来显示数据。 今天的市场中存在着不同的浏览器技术，某些浏览器运行在计算机中，某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。 因此，通过把 HTML 和 XML 各自的长处加以结合，我们得到了在现在和未来都能派上用场的标记语言 – XHTML。 XHTML 可以被所有的支持 XML 的设备读取，同时在其余的浏览器升级至支持 XML 之前，XHTML 使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。
XHTML 与 HTML 之间的差异
XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。
元素必须被正确地嵌套
这是错误的：<b><i>This text is bold and italic</b></i>
这是正确的：<b><i>This text is bold and italic</i></b>
XHTML 元素必须被关闭
这是错误的：<p>This is a paragraph
这是正确的：<p>This is a paragraph</p>
空标签也必须被关闭
这是错误的：A break: <br>
这是正确的：A break: <br />
XHTML 元素必须小写（XHTML 规范定义：标签名和属性对大小写敏感）
这是错误的：<BODY><P>This is a paragraph</P></BODY>
这是正确的：<body><p>This is a paragraph</p></body>
XHTML 文档必须拥有一个根元素
所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：
<html><head> ... </head><body> ... </body></html>
XHTML 语法
属性名称必须小写
属性值必须加引号
属性不能简写
用 Id 属性代替 name 属性
XHTML DTD 定义了强制使用的 HTML 元素
属性名称必须小写
这是错误的：<table WIDTH=”100%”>
这是正确的：<table width=”100%”>
属性值必须加引号
这是错误的：<table width=100%>
这是正确的：<table width="100%">
属性不能简写
这是错误的：<input checked>
这是正确的：<input checked=”checked” />
下面是一个 HTML 的简写属性列表，以及在 XHTML 中的改写：
用 id 属性代替 name 属性（在 XHTML 中不鼓励使用 name 属性，应该使用 id 取而代之）
这是错误的：<img src=”picture.gif” name=”picture1″ />
这是正确的：<img src=”picture.gif” id=”picture1″ />
重要的兼容性提示：你应该在 “/” 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容。
语言属性（lang）
lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。
如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang，像这样：<div lang="no" xml:lang="no">Heia Norge!</div>
强制使用的 XHTML 元素
所有 XHTML 文档必须进行文件类型声明（DOCTYPE declaration）。在 XHTML 文档中必须存在html、head、body元素，而 title 元素必须位于在 head 元素中。
下面是一个最小化的 XHTML 文件模板：
提示：文件类型声明并非 XHTML 文档自身的组成部分。它并不是 XHTML 元素，也没有关闭标签。
提示：在 XHTML 中，<html> 标签内的 xmlns 属性是必需的。然而，即使当 XHTML 文档中没有这个属性时，w3.org 的验证工具也不会提示错误。这是因为，”xmlns=http://www.w3.org/1999/xhtml” 是一个固定的值，即使你没有把它包含在代码中，这个值也会被添加到 <html> 标签中。
XHTML DTD（XHTML 定义了三种文件类型声明，使用最普遍的是 XHTML Transitional）
3种文档类型声明
DTD 规定了使用通用标记语言SGML)的网页的语法。
诸如 HTML 这样的通用标记语言应该使用 DTD 来规定应用于某种特定文档中的标签的规则，这些规则包括一系列的元素和实体的声明。
在通用标记语言SGML)的文档类型声明或 DTD 中，XHTML 被详细地进行了描述。
XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。
存在三种XHTML文档类型：
STRICT（严格类型）
TRANSITIONAL（过渡类型）
FRAMESET（框架类型）
XHTML 1.0 Strict（需要干净的标记，避免表现上的混乱，与层叠样式表配合使用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Transitional（需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset（需要使用HTML框架将浏览器窗口分割为两部分或更多框架时）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如何升级至 XHTML？
1. 添加文件类型声明
将下面的文件类型声明添加至每页的首行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
关于文件类型声明的一点提示：
如果你希望将页面验证为正确的 XHTML，那么页面中必须含有文件类型声明。需要注意的是，根据不同的文件类型声明，新式的浏览器（比如 Internet Explorer 6）对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明，那么它会按照“恰当”的方式来处理文档。如果没有 DOCTYPE，文档也许会以截然不同的方式显示出来。
2. 小写的标签和属性名
由于 XHTML 对大小写敏感，同时也由于 XHTML 仅接受小写 HTML 标签和属性名，因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。对属性名也要做同样的处理。我们一直在自己的网站使用小写字母，因此基本上，替换功能没有太多地排上用场。
3. 给所有属性加上引号
由于 W3C XHTML 1.0 标准中要求所有的属性值都必须加引号，所以，如果以前没有注意到这个细节，你需要逐页地对网站进行检查。这是一项费时的工作，所以绝不要再忘记为属性值加引号了。
4. 空标签：<hr> , <br> 和 <img>
在 XHTML 中是不允许使用空标签（Empty tags）的。<hr> 和 <br> 标签应该被替换为 <hr /> 和 <br />。这样做又产生了一个新问题，Netscape 会误读 <br/> 标签。我们不清楚原因所在，不过将之改为 <br />后就没有问题了。认识到这一点后，你需要再一次通过搜索和替换功能对标签进行更改。其他一些标签（比如 <img> 标签）也会碰到上述同样的问题。不要使用闭合标签来关闭 <img>，而是要在标签的末端添加 / >。
5. 验证站点
做完所有这一切以后，使用下面的链接根据官方的 W3C DTD 对所有修改过的页面进行验证： XHTML Validator。接下来，可能还会有少数的错误被发现，逐一对这些错误进行（手工地）修正。
我们应该使用转换工具吗（比方说 TIDY）？对，我们本可以使用 TIDY。
Dave Raggett 的 HTML TIDY 是用来清理HTML代码的免费工具。在处理那些由专门的 HTML 代码编辑器和转换工具生成的难以阅读的HTML代码方面，TIDY 还是做得很棒的。同时，它可以帮助你发现站点中哪些地方需要投入更多精力，使得对于残疾人士，网页具有更强的易用性。
XHTML 验证
通过 DTD 验证 XHTML
XHTML 文档是根据文档类型声明（DTD）进行验证的。只有将正确的 DTD 添加到文件的首行，XHTML 文件才会被正确地验证。
严格 DTD 包含没有被反对使用的或不出现在框架结构中的元素和属性。
过渡 DTD 包含严格 DTD 中的一切，外加那些不赞成使用的元素和属性。
框架 DTD 包含过渡 DTD 中的一切，外加框架。
XHTML 模块
XHTML 模块化的原因
XHTML 是简单而庞大的语言。XHTML 包含了网站开发者需要的大多数功能。对于某些特殊的用途，XHTML 太大且太复杂，而对于其他的用途，它又太简单了。
通过将 XHTML 分为若干模块，W3C 已经创造出数套小巧且定义良好的 XHTML 元素，这些元素既可被独立应用于简易设备，又可以与其他 XML 标准并入大型且更复杂的应用程序。
通过使用模块化的 XHTML，产品和软件设计者可以：
选择被某种设备所支持的元素。
在不打破 XHTML 标准的情况下，使用 XML 对 XHTML 进行扩展。
针对小型设备，对 XHTML 进行简化。
通过添加新的 XML 功能（比如 MathML, SVG, 语音和多媒体），针对复杂的应用对 XHTML 进行扩展。
定义 XHTML 框架，比如 XHTML BASIC （针对移动设备的 XHTML 子集）。
W3C 已将 XHTML 的定义分为28种模型：
XHTML 事件属性
HTML 4.0 的新特性之一是使 HTML 事件触发浏览器中的行为，比方说当用户点击一个 HTML 元素时启动一段 JavaScript 。以下就是可被插入 HTML 标签以定义事件行为的一系列属性。
窗口事件 Window Events) 【仅在 body 和 frameset 元素中有效】
表单元素事件 Form Element Events) 【仅在表单元素中有效】
键盘事件 Keyboard Events)
在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
鼠标事件 Keyboard Events)
在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
XHTML 结构化之一：使用 XHTML 重构网站
XHTML 规则概要
将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML，都不会妨碍你使用 XHTML。
使用恰当的文档类型声明和命名空间。
使用 meta 元素声明你的内容类型。
使用小写字母书写所有的元素和属性。
为所有的属性值加引号。
为所有的属性分配值。
关闭所有的标签。
使用空格和斜线关闭空标签。
不要在注释中写双下划线。
确保小于号及和号为 < 和 &
Unicode 和其他字符集
XML、XHTML、和HTML 4.0 文档的默认字符集是 Unicode，一个由 Unicode 联盟定义的标准。Unicode 是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode 也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。
尽管 Unicode 是 web 文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用 ISO-8859-1 Latin-1) 编码，而中华人民共和国的国家标准是 gb2312。
为表达语义而标记文档，而不是为了样式
记住：请最大限度地使用 CSS 来进行布局。在 web 标准的世界里，XHTML 标记与表现无关，它只与文档结构有关。
结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。
不是每个站点都能立即抛弃 HTML 表格布局。CSS 的发明者，W3C，直到 2002 年 11 月才将官方网站转换为 CSS 布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在 XHTML 1 中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离（或者说将数据从设计中分离），即使是混合的传统的布局也可从中受益。
下面有一些提示，可以帮助你通过更结构化的方式进行思维：
提纲内的色彩
在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域（也许我们的宣传册和商业站点还不是那么独特和个人化）。但是至少我们不会再受到提纲的困扰了。
实际上，依照 HTML，我们应该将内容结构化为有组织的层级。在浏览器不支持 CSS 的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。
当你将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。
<h1>我的主题</h1> <p>介绍性文字</p> <h2>补充性的观点</h2> <p>相关文字</p>
同时，避免使用已被废弃的 HTML 元素比如 <font>，或者无语义的元素比如 <br />，来模拟其实不存在的逻辑结构。
比如，不要像这样做：
<font size="7">我的主题</font><br /> 介绍性文字<br /><br /> <font size="6">补充性的观点</font><br /> 相关文字<br />
根据它们的意义使用元素，而不是根据它们的外观
我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用h1，或者在我们需要在前面加一个圆点符号时使用 li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于 HTML 元素之上。我们都一直习惯于认为，h1 意味着大号字，而 li 意味着圆点，或者 blockquote 意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作 HTML。
同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为 h1，即使这么做毫无结构化语义可言。
<h1>这是主标题，在我将文本按照提纲格式组织的情况下。</h1>
<h1>这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知该如何使用CSS。</h1>
<h1>这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的，
如果我了解CSS，就可以在不打乱文档结构的情况下达到这个设计。</h1>
我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，h1可以成为你希望的任何样子。通过 CSS，h1 可以成为非粗体的小号的罗马字体，而 p 文本可以成为粗体的大号字，li 也可以没有圆点（你或者可以使用小猫小狗或者公司标志的 PNG,GIF 或者 JPEG 图片取而代之）等等。
从今天开始，我们将要使用 CSS 来决定元素的外观。我们甚至可以根据元素在页面中或者在站点中所在的位置来改变它们的外观。 CSS 可以将表现从结构中彻底抽离，并且允许你按照你喜欢的样式来格式化任何元素。
h1, h2, h3, h4, h5, h6 {
font-family: georgia, palatino, "New Century Schoolbook",
times, serif;
font-weight: normal;
font-size: 2em;
margin-top: 1em;
margin-bottom: 0;
}
你为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML 格式的电子邮件中，文档的结构得到保留。
我们并不想在关于 XHTML 的章节讲述更多 CSS 方面的技术。我们只是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应被用来转换文本，而不是强加显示效果。
使用结构化元素，而不是无意义的垃圾
由于我们已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义，许多 HTML 争论者这样使用标签来插入列表：
项目一<br />
项目二<br />
项目三<br />
考虑一下使用有序或者无序列表取而代之：
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
“但是 li 给我一个圆点，而我不需要圆点！”你也许会这么说。根据上面的章节，CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 的最基本的能力。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。
所以，请使用列表元素来标记列表。相似地，使用 strong 来代替 b，使用 em 代替 i，等等。在大多数桌面浏览器缺省状态下，strong 的显示效果和 b 相同，而 em 和 i 相同，同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。
尽管 CSS 不会为任何元素的显示作假设，浏览器却作了很多假设，并且我们还没有碰到一个将 strong 显示为其他效果而不是粗体字的浏览器（除非是被设计师创建的 CSS 指示以其他方式显示）。假如你担心某个陌生的浏览器不会将 strong 显示为粗体字，你可以编写这么一条 CSS 规则：
strong {
font-weight: bold;
font-style: normal;
}
视觉元素和结构
web 标准不仅要求我们使用何种科技，而且还要遵守使用这些技术的方式。使用 XHTML 来编写标记，同时使用 CSS 来处理一部分或者全部的布局，并不一定会使站点更易用更轻便，同时节约多少带宽。就像我们在早期使用的技术那样，XHTML 和 CSS 也会被误用和滥用。冗长的 XHTML 和冗长的 HTML 一样，都会浪费用户的带宽和时间。冗长的过度的 CSS 也不能完全的代替表现 HTML 代码；这只不过是一种糟糕的东西被另一种代替了而已。
XHTML 结构化之二：案例分析：W3school 的结构化标记
阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更新网站的便利性。
在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低50%左右，在减少服务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。
这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。
本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 id) – ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。
每个元素都必须结构化吗？
正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。
我们在公元 2006 年创建了 W3School 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 w3school 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：
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。
你可以使用任何命名。”Gladys” 和 “orangebox”都完全符合 XHTML 的命名规则。但是语义的 semantic) 或者元结构化 meta-structural) 的命名是最好的（即能够解释其中元素所执行功能的命名）。
当客户决定使用蓝色时，你会觉得将站点某部分命名为 orangebox（橙色框）会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来 “Gladys”（格拉迪斯，女子名）到底代表导航区、侧栏还是搜索框。
因此，将 id 标注为 “menu”、”content” 或者 “searchform”会帮助你回忆。进一步讲，标记不等同于设计，结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是，无论你使用纯粹 CSS 布局或者混合布局，你都会彻底改掉使用表现标记进行思考和创作的习惯。
id Vs. class
id 属性对于 XHTML 并不新鲜；class 属性或者 div 元素也一样。它们都可以回溯到 HTML 时代。id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含 id 为 content 的 div，那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地，class 属性可以被一遍又一遍地使用在页面中（例如，页面中的五个段落都可以使用名为 “small” 或者”footnote” 的 class 名称）。下面的标记将有助于阐明 id 和 class 的差异：
在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class=”blogentry” 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的（文章）入口，所以 class 属性被应用于这种情况。同样地，新闻站点通常拥有多个 div，这些 div 的 class 可以命名为 “newsitem” 或者别的什么。
然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和 <p> 段落，新闻站点也一样。我们在这里展示 class 为 blogentry 的 div，并不是鼓励你在站点中塞满 div，而仅仅是为了向你展示这个原则：在同一个 HTML 文档中，使用多次 class，但只能使用一次 id。
粘性贴纸理论
把 id 属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月 15 号之前必须缴纳的账单。
id 同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的 id 在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。
id 的力量
id 属性不可思议地强有力。它具有以下的能力：
作为样式表选择器，使我们有能力创作紧凑的最小化的 XHTML。
作为超文本的目标锚，取代过时的 name 属性。
作为从基于 DOM 的脚本来定位特定元素的方法。
作为对象元素的名称。
作为一种综合用途处理 general purpose processing) 的工具（在 W3C 的例子中，“当把数据从HTML页面中提取到数据库，或将 HTML 文档转换为其他格式等情况下，作为域识别工具来使用。”）。
id的规则
id 值必须以字母或者下划线开始；不能以数字开始。虽然 W3C 验证不会捕获这个错误，但是 XML 解析器会的。同时，如果你将 id 与 JavaScript 在表单中配合使用，那么 id 名称和值必须是合法的 JavaScript 变量。空格和连字号，特别是连字号，是不被允许的。不仅如此，将下划线用于 class 或者 id 名都不是个好主意，这是由于在 CSS2.0（以及某些浏览器）中的限制。
语义标记和可用性
现在，我们已经讨论过了用途广泛的 XHTML 元素（特别是 div 和 id），让我们在看看关于本站首页的例子。首先让我们回顾一下这个位于报头位置的菜单：
我们拥有七个链接，每个链接被分配一个 id 来对应相应的内容：例如名为 h 的 id 对应 HTML 教程，以此类推。同时这些链接被封装于名为 menu 的列表元素内，名为 menu 的 id 标明了这个列表的职能 – 一个菜单列表，而更外围的名为 navfirst 的 div 则用来标注页面中的这个节 section)，将之与诸如主要内容 maincontent)、侧栏 sidebar) 和页脚 footer) 之类的元素区别开来。
div 和 ul 两个元素提供了真实的结构，即标明了其中内容的职能（导航栏）和它在文档中所属的位置（页面的报头位置）。相反地，传统的表格布局无法提供有关数据的任何语义信息，同时会轻松地吃掉三倍的带宽。
请注意这些标记没有包含img标签，所以不会牵扯到 width、height、background 或者 border 等等属性。同时它没有使用表格单元格，也不会涉及相关的一系列属性。它非常地干净小巧，同时提供了所有可供理解它的信息。
通过与 CSS 配合使用，这些标记向网站访问者提供了可靠的可快速加载的布局。同时也提供了为访问者创造更灵活多样的外观的可能性。并且在无 CSS 的环境中，我们的结构良好的标记依然可以毫不混乱地提供所有的内容。
目光敏锐的读者也许已经发现，a 元素中包含的文本并没有被浏览器显示出来，这也要归功于结构化标记与 CSS 的完美配合，使我们可以通过几行 CSS 规则来定义一个触发机制，当用户使用图形浏览器时，他们会看到漂亮的导航按钮，而当用户使用纯文本的阅读器时，他们也可以得到全部的文本，这样，对所有的用户来说，内容都是一样的。
并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。