This tutorial has taught you how to create stricter and cleaner HTML pages.

You have learned that all XHTML elements must be properly nested, XHTML documents must be well-formed, all tag names must be in lowercase, and that all XHTML elements must be closed.

You have also learned that all XHTML documents must have a DOCTYPE declaration, and that the html, head, title, and body elements must be present.

For more information on XHTML, please look at our XHTML reference.

Now You Know XHTML, What’s Next?

The next step is to learn CSS and JavaScript.

CSS

CSS is used to control the style and layout of multiple Web pages all at once.

With CSS, all formatting can be removed from the HTML document and stored in a separate file.

CSS gives you total control of the layout, without messing up the document content.

To learn how to create style sheets, please visit our CSS tutorial.

JavaScript

JavaScript can make your web site more dynamic.

A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all major browsers.

If you want to learn more about JavaScript, please visit our JavaScript tutorial.

Why XHTML Modularization?

XHTML contains most of the functionality a web developer will need.

For some purposes XHTML is too large and complex, and for other purposes it’s too simple.

By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards in more complex applications.

With modular XHTML, designers can:

• Choose the elements to be supported by a device
• Simplify XHTML for small devices
• Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia)
• Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices)

XHTML Modules

W3C has split the definition of XHTML into 28 modules:

* Deprecated elements should not be used in XHTML.

Validate XHTML With A DTD

Before an XHTML file can be validated, a correct DTD must be added as the first line of the file.

The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:

The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:

The Frameset DTD includes everything in the transitional DTD plus frames as well:

Validate Your XHTML With The W3C Validator

Is Mandatory

An XHTML document consists of three main parts:

the DOCTYPE declaration
the section
the section
The basic document structure is:

…

Note: The DOCTYPE declaration is always the first line in an XHTML document!

An XHTML Example

This is a simple (minimal) XHTML document:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

a simple paragraph

The DOCTYPE declaration above defines the document type. The rest of the document looks like HTML.

Document Type Definitions (DTD)

A DTD specifies the syntax of a web page in SGML
DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations
An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup
There are three XHTML DTDs:

STRICT
TRANSITIONAL
FRAMESET
XHTML 1.0 Strict

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use it together with CSS.

XHTML 1.0 Transitional

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use the transitional DOCTYPE when you want to still use HTML’s presentational features.

XHTML 1.0 Frameset

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use the frameset DOCTYPE when you want to use HTML frames.

• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden
• The id attribute replaces the name attribute
• The XHTML DTD defines mandatory elements

Attribute Names Must Be In Lower Case

This is wrong:

This is correct:

Attribute Values Must Be Quoted

This is wrong:

This is correct:

Attribute Minimization Is Forbidden

This is wrong:

This is correct:

Here is a list of the minimized attributes in HTML and how they should be written in XHTML:

The Lang Attribute

The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.

If you use the lang attribute in an element, you must also add the xml:lang attribute, like this:

Mandatory XHTML Elements

All XHTML documents must have a DOCTYPE declaration. The html, head, title, and body elements must be present.

This is an XHTML document with a minimum of required tags:

Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.

Note: The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace "xmlns=http://www.w3.org/1999/xhtml" is default, and will be added to the <html> tag even if you do not include it.

XHTML is not very different from the HTML 4.01 standard.

So, bringing your code up to the 4.01 standard is a good start.

Our complete HTML 4.01 reference can help you with that.

In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip closing tags (like </p>).

The Most Important Differences:

• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:

In XHTML, all elements must be properly nested within each other, like this:

Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.

This is wrong:

This is correct:

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

XHTML Elements Must Always Be Closed

Non-empty elements must have a closing tag.

This is wrong:

This is correct:

Empty Elements Must Also Be Closed

Empty elements must also be closed.

This is wrong:

This is correct:

XHTML Elements Must Be In Lower Case

Tag names and attributes must be in lower case.

This is wrong:

This is correct:

XHTML Documents Must Have One Root Element

All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element.

The basic document structure is:

XHTML consists of all the elements in HTML 4.01, combined with the strict syntax of XML.

Why XHTML?

Many pages on the internet contain “bad” HTML.

The following HTML code will work just fine if you view it in a browser (even if it does NOT follow the HTML rules):

Bad HTML

This is a paragraph

XML is a markup language where everything must be marked up correctly, which results in “well-formed” documents.

XML is designed to describe data, and HTML is designed to display data.

Today’s market consists of different browser technologies, some browsers run on computers, and some browsers run on mobile phones or other small devices. The last-mentioned do not have the resources or power to interpret a “bad” markup language.

Therefore – by combining the strengths of HTML and XML, W3C recommended a markup language that is useful now and in the future – XHTML.

]]> http://jaffnacampus.com/xhtml/xhtml-why/feed/ 0 http://jaffnacampus.com/xhtml/introduction-to-xhtml/ http://jaffnacampus.com/xhtml/introduction-to-xhtml/#comments Wed, 27 Jan 2010 12:55:49 +0000 admin http://jaffnacampus.com/xhtml/introduction-to-xhtml/ XHTML is a stricter and cleaner version of HTML.

---

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML and the basics of building web pages

If you want to study HTML first, please read our HTML tutorial.

---

What Is XHTML?

• XHTML stands for EXtensible HyperText Markup Language
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is a W3C Recommendation

---

XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000.

Stay updated with the latest W3C recommendations in our W3C tutorial.

---

All Browsers Support XHTML

XHTML is compatible with HTML 4.01. All browsers support XHTML.

]]> http://jaffnacampus.com/xhtml/introduction-to-xhtml/feed/ 0