XHTML Q&A: the difference between HTML and XHTML

« · By Faruk Ateş on Apr 20, 2005 · comments off · »

The second of a series of Questions and Answers on XHTML and semantics, on reasons for switching (or not), and on what it takes to switch. This time the question is: What are the exact differences in elements between XHTML and HTML? The original question was actually about the differences in markup, but I feel that it's better to start off with the differences in elements before going into the syntactical differences in markup.

Most people who have been reading weblogs about web standards for some time are already aware of the differences between %XHTML% and %HTML%, but still many people remain that aren't fully informed yet. Additionally, with web standards growing steadily in popularity among webdevelopers and -designers worldwide there are constantly new people that want to learn about the differences. So here we go, a brief examination into the structural differences in elements between XHTML and HTML.

What are the exact differences in elements between XHTML and HTML?

The friend who asked me about these differences used  and  as his example, asking me which element meant what exactly and when to use which.
Basically, XHTML leans towards being a completely strict and as-semantic-as-possible^[1] markup language. XHTML 1.0 Strict requires that you use no presentational elements in your markup anymore, but instead take care of all forms of presentation with %CSS%. All the 'visual' elements should no longer be used in XHTML Strict.Rectification: while there is no definite requirement in the specification, some visual elements have been deprecated, and for others their use is strongly discouraged. A list of visual elements:


<big>
<center>


<s>

<strike>
<tt>

Now, a visual element is essentially an HTML element that serves no meaningful purpose other than visually changing the text inside it.  will make text appear bold, but so does . Why is one no longer allowed while the other is?

The key here is semantic value. A b tag will only make your text appear bold in visual browsers, whereas a strong tag indicates that the text inside the element is more important. A screenreader will read the text out louder than normal text, and search engine bots will know that the text is of higher importance and will act accordingly.

A great example to illustrate this is the much-despised (among web standards enthusiasts) font tag. Take these two options for example:

My Document Title
<h1>My Document Title</h1>

In any visual browser, these two would appear to you to be effectively the same. However, they're completely different in their meaning and value, and this will make a difference for your site's search engine optimization. If you look at the above markup in a text-only browser, the first will example will be displayed and treated as a very normal line of text, whereas the second example will be displayed as a heading with the highest importance - which is what we intended. With the second example, Google will give your document title a higher value in its index, which greatly helps your ranking, but beyond that, your page will also make more sense to people not using a visual browser, like a screenreader or a cellphone browser.

Bottom line is that the visual elements serve no meaning to anything or anyone that doesn't operate on a completely visual level. In that aspect, XHTML strives towards a much more semantically useful web, where content has meaning instead of only visual styling (which says nothing of any importance whatsoever).

Addendum April 24th, 2005
Some people have contacted me about there being several errors in this post; some were arrogant and just started slandering me without being kind enough to simply inform me of my mistake. The main error was that XHTML 1.0 Strict doesn't prohibit the use of all visual elements; some are deprecated but others aren't (yet?). This has been corrected in the text.
Another issue was that people pointed out that the above text is incomplete. This is correct, but intentional: I have been planning a follow-up on this post that goes into explaining other differences, such as that XHTML has to be well-formed.

[1]: I say semantic as possible because XHTML still has a long ways to go before it'll be a truly semantic language. It's currently possible to come a long way in the sense of true semantics, but that's a subject for another time.

Bookmark: Newsvine del.icio.us Digg