WordPress:HTML to XHTML

Not long ago, all web pages were designed with HTML tags. Then CSS took the presentation styles out of the HTML tags and into style sheets, expanding the visual capabilities of web pages. HTML has now grown into XHTML, a more mature and stable version, and with it comes some new ways of using and thinking about tags in web pages.

Since the majority of WordPress Themes are based on XHTML and not HTML, it's important for users designing their own Themes, changing their Themes, or preparing HTML web pages for importing content into WordPress to understand the differences and usages of XHTML. This will also help you to understand the validation errors that arise from incorrect use of XHTML.

以前，所有的网页都是使用HTML标签设计编写的。然后CSS把表达形式从HTML标签升级为样式表，扩展了网页的视觉效果。HTML现在升级成为XHTML，一个更加成熟稳定的版本，随之一些新的有关网页中标签的使用方法和想法出现了。

使用者设计他们自己的主题，更改他们的主题，或者是准备HTML网页以把内容加入 WordPress。因为大多数的WordPress 主题是基于XHTML之上而不是HTML，所以对于使用者来说，理解HTMLh和XHTML之间用途的不同是很重要的。

What is XHTML?

XHTML (eXtensible HyperText Markup Language), is very similar to HTML. It’s designed to be - and is - the successor to HTML. The eXtensible in XHTML means it extends the power and capabilities of HTML tags. Basically, XHTML is better HTML.

XHTML是什么？

XHTML (eXtensible HyperText Markup Language 可扩展超文本标记语言)，与HTML非常相似。它是HTML的继任者。在XHTML中，“可扩展”意味着它扩展了HTML标签的功能和性能。基本上，XHTML 要比 HTML“好”。

The Differences Between XHTML and HTML

If you are familiar with HTML, you will be glad to know that the majority of what you know about HTML is still relevant in XHTML. XHTML completes HTML, and eliminates many of the bad practices formed with HTML.

The following is a basic introduction to the differences between HTML and XHTML.

XHTML和HTML的不同之处

如果你对熟悉HTML，你就会发现，其实HTML的大多数内容和XHTML是相关的。XHTML完善了HTML，消除了HTML形成的很多不好的惯例。

以下将对HTML和XHTML的不同点做一个基本的介绍

All tags must be closed

XHTML requires the closing of tags. In HTML, you could open a  tag and not close it, and go about your merry day without having to worry about the code not validating. In XHTML, this is wrong and your code will not validate. Take, for example, the two following pieces of code:

The old HTML way:

<p>Mary had a little lamb. 
<p>Its fleece was white as snow.

The new, better, XHTML way:

<p>Mary had a little lamb.</p>
<p>Its fleece was white as snow.</p>

XHTML closes these tags, completing the HTML. Closing tags has always been what you were supposed to do. With XHTML, it is now enforced.

所有的标签必须闭合

XHTML要求使用闭合的标签。在HTML里，你可以使用标签，并不要求你一定要闭合，你完全不用担心代码[[Wordpress:Validating a Website|不合法]。在XHTML里，这是错误的，你的代码将无法生效，举例来说，以下两个代码：

旧的HTML形式： Mary had a little lamb.

<p>Its fleece was white as snow.

新的更好的 XHTML形式：

<p>Mary had a little lamb.</p>
<p>Its fleece was white as snow.</p>

XHTML闭合了这些标签，完善了HTML。闭合标签成为你“应该做的”。在XHTML里，你必须这么做。

Self-closing tags

XHTML now emphasizes closing ALL tags, not just open tags. Items like line breaks or images which do not have closing tags in HTML, must be self-closing in XHTML.

Tags that now require self-closing include the HTML tags:  , <hr>, <meta>, <link>, <input>, and <img>.

To turn these into self-closing tags, a space and forward slash ( />) must be added to the end of the tags.

<br />
<hr />
<meta name="author" content="Your Name" />
<link rel="stylesheet" type="text/css" href="style.css" />
<input name="example" type="text" />
<img src="image.jpg" alt="image" />

自动闭合标签

XHTML 强调闭合所有的标签。比如换行或者图片等在HTML中没有闭合标签的一些标签，在XHTML中必须“自动闭合”。

现在要求自动闭合的HTML标签有： , <hr>, <meta>, <link>, <input>, and <img>.

要转换这些标签为自动闭合标签，必须在这些标签的末尾加上空格或者斜线( />)

<hr />
<meta name="author" content="Your Name" />
<link rel="stylesheet" type="text/css" href="style.css" />
<input name="example" type="text" />
<img src="image.jpg" alt="image" />

Images must have alternative text

Every image tags in XHTML must all have an alt attribute. The alt attribute is not the place for editorial commentary about the picture:

<img src="ball.jpg" alt="We played with a ball during recess" />

The alt tag must contain a description of the image. This meets the requirements for Wordpress:Accessibility and web standards:

<img src="ball.jpg" alt="large red ball" />

图片必须有可替换文本

每一个XHTML中的图形标签都必须有一个alt属性，alt属性并不是有关图片的编辑说明性文字：

<img src="ball.jpg" alt="We played with a ball during recess" /> alt标签必须包含图片的一个描述。这样才达到了易用和网页标准：

Nested tag order

Nested tags now must be closed in the order they were opened. An incorrect nested tag order would be:

<strong><em><u>Mary had a little lamb.</strong></u></em>

The correct nested tag order should be:

<strong><em><u>Mary had a little lamb.</u></em></strong>

Like closing tags, the practice of correctly nesting tags existed in HTML, but in XHTML it is now more strictly enforced.

嵌套标签次序

嵌套标签必须按照顺序依次闭合。例如不正确的嵌套次序：

Mary had a little lamb.

正确的嵌套次序应该是：

Mary had a little lamb.

和闭合标签一样，正确嵌套标签的习惯亦存在于HTML，只不过在XHTML中更加严格而已。

Tags must be lowercase

In HTML, you could get away with using capital letters in your tags, such as  . With XHTML, all tags must be lower case, like  . The following is an example of incorrect use of capitalization:

<Strong><Em><u>Mary had a little lamb.</u></Em></Strong>

标签必须是小写字母

在HTML中，你不论使用大写还是小写字母都可以，如 。但在XHTML中，所有的标签必须使用小写，如 。下边是一个错误的使用大写的例子： Mary had a little lamb.

Pages require a valid XHTML doctype

All pages must have a <!DOCTYPE> entry defining the document as XHTML 1.0 Strict.

Although you may be tempted to use the more recent XHTML 1.1, this version may unnecessarily cause problems; most notably that you cannot retain XHTML 1.1 standards compatibility without breaking compatibility with Internet Explorer. For simplicity's sake, it is preferable to use XHTML 1.0 Strict.

页面要求合法的XHTML文档格式

所有的页面开始处必须有一个<!DOCTYPE>标签定义本文档为XHTML 1.0 Strict。

尽管你可能想使用新版本的XHTML 1.1，但该版本可能造成一些不必要的麻烦；特别是你在不改变IE现有兼容性的情况下，无法保持XHTML 1.1的标准兼容性。为了简便起见，最好还是用XHTML 1.0 Strict版本。

Resources

资源

This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.

WIKI使用导航

站长百科导航

站长专题