XHTML
  1. XHTML intro
  2. XHTML purpose
  3. XHTML/HTML diff
  4. XHTML syntax
  5. XHTML DTD
  6. HTML to XHTML
  7. XHTML validation
  8. XHTML modules
  9. HTML 5
  10. XHTML history
  11. XHTML summary

The differences Between HTML and XHTML

Remember that XHTML is NOT a different language from HTML, but the next phase in the evolution of HTML. There are only a few differences between HTML and XHTML, but they are very important differences. They may seem minor, but can have a major impact.

By following the tag rules of XHTML you will create webpages that correctly follow modern web standards and will validate with an HTML validator.

XHTML/HTML differences quick list
  • Tags in XHTML must be closed in the proper order
  • Tags in XHTML must be closed
  • Tags (as well as their attributes) in XHTML must be in lowercase
  • Attributes must be quoted
  • XHTML documents can only have one root tag

Tags in XHTML must be closed in the proper order

In HTML, you might have a situation where tags are not closed in the proper order.

Example:
<html> <head> <title>Tags not properly closed</title> </head> <body> <pre><i>Preformatted and italic text</pre></i> </body> </html>

In XHTML, all tags must be closed in the proper order.

The above example fixed to conform to XHTML standards:
<html> <head> <title>Tags properly closed</title> </head> <body> <pre><i>Preformatted and italic text</i></pre> </body> </html>

Keep track of your code to make sure that there exists a proper tag order. If you are working with a large set of code, it can sometimes get confusing, so keep track of your code as you're working with it so you don't get lost in it.

Tags in XHTML must be closed

Tags should always be closed. An unclosed tag can lead to strange results that can be tedious and hard to fix. For example, not closing the <a> tag can result in a much bigger chunk of text turning into a link than you were going for.

Example of not closing tags:
<head> <title>Closing tags</title> </head> <body> <a href="http://www.yahoo.com" target="_blank"> Yahoo search engine <br /><br /> Here is some text </body> </html>

Notice how in the above example the text "Here is some text" becomes part of the link even though that's not what we intended. This happened because we did not close the <a> tag.

The above example fixed to conform to XHTML standards:
<html> <head> <title>Closing tags</title> </head> <body> <a href="http://www.yahoo.com" target="_blank"> Yahoo search engine </a> <br /><br /> Here is some text </body> </html>
Output:
Yahoo search engine Here is some text

In this example, the text "Yahoo search engine" is the link, and the text "Here is some text" remains as regular text like we intended.

What about tags that have no end tags?

Those tags are supposed to end with a / character, not doing this is also an error.

Example with tags that do not have end tags not closed:
<img src="apple.jpg" alt="apple"> <hr> <br> <meta name="keywords" content="softcover books, hardcover books, literature">
The above example fixed to conform to XHTML standards:
<img src="apple.jpg" alt="apple" /> <hr /> <br /> <meta name="keywords" content="softcover books, hardcover books, literature" />

Tags in XHTML must be in lowercase

Not just tags, but their attributes as well must all be in lowercase in XHTML.

Example with uppercase tags and attributes:
<html> <head> <TITLE>Tags properly closed</TITLE> </head> <body> <TABLE> <TR> <TD ALIGN="CENTER">Cell 1</TD> <TD ALIGN="CENTER">Cell 2</TD> </TR> </body> </html>
The above example fixed to conform to XHTML standards:
<html> <head> <title>Tags properly closed</title> </head> <body> <table> <tr> <td align="center">Cell 1</td> <td align="center">Cell 2</td> </tr> </body> </html>

Attributes must be quoted

Attributes should always be quoted. Even though a page may appear as you intend it to even if you don't quote attributes, the page will not validate with an HTML validator. Also, if the value given to the attribute that is not quoted has at least one space, the page may actually not appear as you intend it to.

Example of not quoting attributes:
<html> <head> <title>Quoting attributes</title> </head> <body> <input type="button" value=I am a button /> <br /><br /> <a href=http://www.yahoo.com target="_blank"> Yahoo search engine </a> </body> </html>

In the above example, we omitted quotes from the value attribute of the <input> tag which in this case displays a button. The text that is supposed to be displayed on the button is "I am a button", but only "I" is displayed since it cuts off after the space. For the href attribute in the <a> tag, we omitted quotes as well, but it still works as intended.

The above example fixed to conform to XHTML standards:
<html> <head> <title>Quoting attributes</title> </head> <body> <input type="button" value="I am a button" /> <br /><br /> <a href="http://www.yahoo.com" target="_blank"> Yahoo search engine </a> </body> </html>

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:
<html> <head> <title>document title</title> </head> <body> document content </body> </html>

To learn more about XHTML syntax, read our XHTML syntax tutorial.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information