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.

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.

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.

All tags must be closed

XHTML requires the closing of tags. In HTML, you could open a <p> 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.

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: <br>, <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" />

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" />

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.

Tags must be lowercase

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

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

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.

Resources

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

WIKI使用导航

站长百科导航

站长专题