Categories


HTML vs XHTML

Regardless of your level of knowledge in HTML – novice or master – knowing the differences between HTML and XHTML is beneficial.  Both languages are pretty much the same in that they are tag-based markup languages used to write web pages for viewing. And, while the differences are not monumental . . . they are there and you should be aware of them.

One of the most significant differences is that HTML is more tolerant if your tags are not consistent – while XHTML does not allow for mis-matched or un-structured code.  For those just learning to write basic HTML, learning from the start to write in a structured format can be of great benefit down the road . . . and it’s not that difficult.

What are the differences?   

(All code is in blue)

1.  XHTML tags must be in lower case . . .  

Simply put instead of using

, , and

. . . you would use

, , and

.

2.  XHTML must be correctly nested . . .

In HTML having the closing tags in a different order from the opening tags would make no difference – however, in XHTML it would in deed make a difference.

 HTML:  This text would be black, bold and underlined.   (Note the different order of closing tags)

XHTML:  <font color=”#000000″>This text would be black, bold and underlined. (Note the sequence of the closing tags)

3.  All XHTML tags must always be closed . . . even empty elements

So what’ an empty element? An empty element is a tag that does not contain any data, i.e, line break, image or horizontal rule. Closing these empty elements can easily be accomplished by placing a ‘ space / ‘ after the tag and before the ‘ > ‘ in the tag itself. In these cases you would only have one tag.

For HTML the following would be true:

Line break:   

Image:   ”This

Horizontal rule:   


In XHTML the same tags would look like the following:

Line break:   

Image:   ”This

Horizontal rule:   


In HTML you’ve been closing tags like

, , and
; however, if you have been using paragraph tags

in HTML without closing them you may want to rethink your method. While pages will typically display OK without the closing tag, in XHTML you must close all paragraph tags. So, if you are using

tags in HTML now and not closing them, it would probably be a good idea to start doing so.

For HTML you could use:

First Paragraph

Second paragraph

For XHTML this would be correct:

First paragraph

Second paragarph

4.  XHTML attribute values must be in quotes . . . 

. . . when defining the parameters of a table; font size, face, or color; or the alternate text for an image, all of those attributes must be in quotes.

In HTML you could use:

In XHTML you would use:

Note: There is not a /> at the end of the table tag because you will have a

tag to close the completed table.

5.  XHTML must have one root element . . .

 . . . all XHTML elements must be properly nested within the root element. Any ‘child’ elements contained within the root element must be in pairs and correctly nested. A basic document structure would look like:

.. . meta information .. .

. . . page contents . . .

6.  XHTML Mandatory Elements

. . . in addition to the root element and ‘child’ elements, all XHTML documents must have a DOCTYPE declaration. This information would be placed before the and tags and is always the first line. Minimum required tags:

Meta tags go here

</strong></span>Title goes here<span style="color: #0000ff;"><strong>

Summary

This gives you a basic over view of  XHTML – what it is and how it differs from HTML.  With XHTML you only need to pay a little more attention to structure and code writing. 

Get a jump start on XHTML, HTML and CSS  with this book from Amazon  – Html, Xhtml & Css – Visual Quickstart Guide – Sixth Edition by Elizabeth Castro – part of the Quickstart Guide.  It’s easy to understand with lots of pictures and minimal reading – you’ll be up and running in no time.

If you liked this post, please share it with others . . . thanks!


Comments are closed.