HTML VS XHTML Syntax

By: Daniel Imbellino
Updated: Feb 28, 2013

Here we're going to take a look at the differences and properties of HTML and XHTML, making a comparison between the two. Also We will discuss the syntax of both markup languages, and how to use them properly. In order to build quality, functioning webpages, you need to know the rules and syntax for working with these markup languages.

Which version of HTML should I use? Should I use HTML 4.01, or XHTML 1.0 when designing my website? The answer lies in understanding the differences between the two. HTML 4.01 and earlier versions of HTML were fruaght with problems. For one, They all allow for the use of improper syntax and bad code structure.

Here's an example HTML 4.01 document with many errors. The errors in syntax and coding presented here would still, for the most part, render in most browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title></titl
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<body>
<h1>first heading</h1>
<H2>second heading</h2>
<p>Paragraph here</P>
</body>
</html>


Can you spot the problems with this markup? The title tag is missing a closing "greater than" sign and the word "title" is missing the letter e. Also, the closing head tag does not have a forward slash after the "less than" sign that would be used to indicated the closing of the "head" tag. As well, the "h2" and "p" tags have upper case letters in their tag elements. All of these issues we just showed are known as "bad coding practice", and should never be used this way! Nonetheless, the page will still render in a browser as usual. The problem that arrises, is what if someone else decides to edit your work, say at an organization that you work for? You would effectively make their job ten times harder than it needs to be! Bad code creates headaches for other web designers, as it's harder to view since it makes less sense. The other problem that arrises with "bad code" is the fact that search engines do take into account the structure and content of your web pages as they're being indexed by spiders. The search engines look negatively upon improper syntax and bad coding as a whole. They will give you a negative grade, which will inturn cause your page rank to be very low, possibly eliminating the odds of your content showing up in a search engines search results. Its best to create pages with XHTML 1.0 and to use proper syntax and check your code for mistakes when building a website.

XHTML Syntax (Hyper Text Markup Language):
XHTML is actually HTML 4.01 redesigned as an XML application. XML (extensible Markup Language) is not specifically a markup langauge, its actually a group of technologies that work together to produce markup languages as a whole; including their elements, attributes, rules, property values, etc. Unlike HTML 4.01, XHTML conforms to stricter XML standards that don't allow for as much error in design. Also, Notice the "X" in XHTML, which simply means "extensible". What this means is XHTML was built on a platform (XML) that can be extended upon for later adding new rules and attributes, etc. Infact there are many languages that have been created using XML, some of these include RSS (News Feeds), CML (Chemical Markup Language), MathML (Mathematics Markup Language), etc.

Heres another example HTML 4.01 document:
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>title here</title>
<meta name="description" content="example HTML 4.01 document">
</head>
<body>
<h1>First Heading</h1>
<br>
<p>This is a pragraph</p>
<br/>
<p>This is another paragraph</p>
</body>
</html>


Notice the <br> and <br/> tags in our example document, while these would be considered valid in HTML 4.01, they are strictly illegal in XHTML. The <br/> tag is known as an "open element" in HTML and XHTML, so is the "meta" tag.

In xhtml open tags must be closed with a forward slash "/" and should have a space between the forward slash and the closing "greater than" tag (>), as shown with our "meta" and "br" tags here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Title Goes Here</title>
<meta name="description" content="Example Of Proper XHTML Syntax!" />
</head>
<body>
<h1>First Heading</h1>
<br />
<h2>Second Heading</h2>
<br />
<p>This is a paragraph</p>
</body>
</html>

Notice that we properly closed our open "meta" and "br" elements using a space and a forward slash "/" to close each element. This is not required of the "Doctype" or "name space" elements, which are naturally open elements. In XHTML a "Doctype" and "xmlns" (XML Namespace) must be used in your documents. Also, XHTML documents must have one root element (in this case it's the opening html tag located in our XML Namespace). All XHTMl documents must also have an <head>, <title>, and <body> tags. All your elements must be properly nested (ex: <body><h1></h1></body> and NOT <h1><p></h1></p>) except for "open" elements. Elements can not use uppercase letters, they must always be lowercase (<h1> and NOT <H1>). Also, all attribute values in XHTMl must be quoted and must use lowercase letters, just as with actual elements. To render your webpages as fully compliant XHTML 1.0, you must use the "application/xhtml+xml" attribute when defining your "media type", and you must use the "Strict" "Doctype", otherwise your pages won't be true XHTML documents.

The problem we disussed earlier about HTML 4.01 and earlier versions allowing for bad code also exists with HTML5. As said before, if you produce bad code, you fail with the search engines when it comes to serving your content to users. Even guides, books, etc, covering the prinicipals of HTML5 insist that code errors are ok. The search engines disagree entirely! A newer version of HTML5 and XHTML are on the horizon. XHTML5 should be hitting the public sometime in 2013, although this is not to say whether or not browsers will have full compatibility upon its initial release. While HTML5 has brought about many new avenues for internet markup, its also caused a lot of headaches. It's still yet to have full compatibility with various forms of multimedia, especially video codecs. Also, HTML5 relies on the browsers pre-processor to process multimedia content, while with other versions of HTML you would use plugins such as the "Windows Media Player" and Adobe "Flash" plugins to render content. Know one wants to view a video that locks up every 20 seconds, and this appears to be the case with most major browsers when rendering multimedia content in HTML5. XHTML5 looks to shore up the shortfalls of HTML5, while combining its strength of newer technologies (Rich Code Snippets, etc) with the stricter and more manageable, and better well defined, XHTML standards.