HTML to XHTML conversion
XHTML is the current standard and HTML is the previous. Despite this, there are currently many webpages on the web that need to be converted into XHTML.
This lesson focuses on:
- Why convert to XHTML?
- Tag and syntax rules
- Confirm page validity
Why convert to XHTML?
You have a website with 12 pages, each page has about 200 - 300 lines of code. Your pages looks fine in a browser, and you see no reason to convert the code to XHTML. But there is a reason, there are in fact several reasons.
-
Pages will be up to date
XHTML is the modern standard, HTML is the previous. By converting your pages to XHTML, you are showing that you are up to date on web standards. -
Cleaner, more efficient code and better usability
By converting your pages to XHTML, you will have cleaner, more efficient code since you will be clearing out any mistakes (such as a missing closing tag) that may result in a page not displaying correctly. By doing so, you will at the same time provide better usability for your webpage visitors because you will be insuring that they see your pages how you intend for them to be seen. -
Pages will validate with a webpage validator
By converting your pages to XHTML, they will validate with a webpage validator (assuming you use correct syntax and don't break any tag rules). Validated pages show that you have taken the time to create interoperable content that will be displayed as intended on various different browsers and devices.
Tag and syntax rules
To convert your pages from HTML to XHTML, there are some tag and syntax rules you need to make sure your code is following.
Tag rules
For more details on these tag rules visit our differences between HTML and XHTML page.
Tags must be closed in proper order
This is wrong:
This is right:
Tags must be closed
This is wrong:
This is right:
Tags (and their attributes) must be lowercase
This is wrong:
This is right:
XHTML documents can only have one root tag
The root tag of XHTML documents is <html>. All the other tags of an XHTML document must be nested within it. They can have sub-elements within them, all of which must be nested properly within their parent elements.
Basic structure of an XHTML document:
Syntax rules
For more details on XHTML syntax rules visit our XHTML syntax page.
Attribute names must be in lower-case
This is wrong:
This is right:
Attribute values must be quoted
This is wrong:
This is right:
Attributes cannot be minimized
This is wrong:
This is right:
The name attribute is replaced by the id attribute
This is wrong:
This is right:
NOTE: The name and id attributes should be used together for backwards compatibility.
The xmlns attribute should be applied to the <html> tag
The attribute xmlns stands for XML namespace. This attribute is needed because an XHTML document is based on XML. The URL given as the value for this attribute is where to find the namespace.
This is wrong:
This is right:
Some elements are mandatory
XHTML documents must contain a doctype declaration. Mandatory XHTML elements include the html, head, body, and title elements. The title element must be located inside the head element.
A basic XHTML document with the mandatory elements (including the doctype declaration):
NOTE: The doctype declaration is NOT an XHTML element, and not part of the XHTML document. The doctype declaration is used to declare which document type the XHTML document is.
The doctype declaration as well as the different document types you can have in XHTML are covered in the XHTML document types lesson.
Confirm page validity
Once you convert your pages from HTML to XHTML, everything is good and clean, right? Well maybe, but not necessarily. You have to actually confirm that your pages are valid.
You can do this with the validator available at validator.w3.org.
If a page validates right away, great! If it does not, it's ok. Keep working at it. If a page does not validate, the validator will tell you where the errors are so that you can fix them. Once you fix the error(s), re-test as much as you need until you get a valid page.
You can also download and use the program HTML Tidy to fix errors in your HTML code.
