Is HTML5 XHTML 1.0 compliant?
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
For a school assignment, I wrote up a web-page in HTML5.
After looking over the assignment's requirements again though, I found the line:
• a minimum of three HTML pages complying with at least XHTML 1.0 standards or (better).
I'd really rather not need to add all the ugly tags to the top of the page, and change all my meaningful <header> and <nav> tags to generic <div>s, so I tried validating it.
According to the W3C validator, my site checks out when I set it to validate it as XHTML 1.0
According to Validome though, it's not valid, and gives me errors for the lack of appropriate attributes at the top, and errors for each of the HTML5 tags that I used.
That leaves me with the question:
Is HTML5 at least XHTML 1.0 compliant?
The page:
<!DOCTYPE html>
<html>
<head>
<title>Brendon's Uromastyces Fact Site</title>
<meta charset="utf-8">
</head>
<body>
<div id="mainBody">
<section>
<header>
<h1>Brendon's Uromastyces Fact Site</h1>
</header>
<h2>
Welcome to my site dedicated to providing reliable, referenced information about Uromastyces.
</h2>
<p>
My goal in creating this site was to allow fast access to the most important information surrounding
Uromastyces. Especially regarding issues like the choice of substrate (the bedding that lines the
bottom of the cage), there is a lot of contradictory information, which can be overwhelming for
someone new to reptile keeping.
</p>
<p>
Below, as well as to your left, are navigation bars you can use to explore each of the site's main
topics: information relating to <em>Enclosures</em>, <em>Diet</em>, and general information about
their <em>Behavior and Life</em>.
</p>
<nav class="navBar">
<ul>
<!-- Only 3 of the links are currently valid: "Home" (this page; sample1.html), "Enclosure"
(sample2.html fixed up), and "About Me" (the third required page for the exercise)-->
<li><a href="sample1Fixed.html">Home</a></li>
<li><a href="sample2Fixed.html">Enclosure</a></li>
<li><a href="diet.html">Diet</a></li>
<li><a href="behaviorAndLife.html">Behavior and Life</a></li>
<li><a href="page3.html">About Me</a></li>
</ul>
</nav>
</section>
</div>
<aside class="sideBar">
<!-- This image is currently pretty big. Once I have access to CSS, I can have it automatically adjust the
size. The width/height attributes seem to be considered deprecated (http://www.tutorialspoint
.com/html/html_deprecated_tags.htm) in favor of using CSS. I'll have this adjust itself according to
the screen size down the road to accommodate small screens. My goal will be to have the width of the
nav bar == the width of the image, and have the height adjusted automatically.-->
<img src="pascal-cropped-shrunk.jpg" alt="Picture of Pascal">
<!-- Without being able to do any styling, this is going to sit below the main content body, when ideally it
would float to the left-->
<nav class="navBar">
<ul>
<!-- Unfortunately, this is copy-and-pasted from above. I'm not sure the best, most maintainable solution
would be at this point. If a link is updated, or the menu is changed, I want to ensure that all
menus reflect the change.
Down the road, I may generate the menus using JS (along with other content that doesn't vary
between pages), but that's not an option right now.
Also, since I can't arrange the elements yet, both of the nav menus are immediately on top of
each other, which is redundant. Later on, one will be a nav bar on the left, and the other a
quick access nav bar underneath the site introduction.-->
<li><a href="sample1Fixed.html">Home</a></li>
<li><a href="sample2Fixed.html">Enclosure</a></li>
<li><a href="diet.html">Diet</a></li>
<li><a href="behaviorAndLife.html">Behavior and Life</a></li>
<li><a href="page3.html">About Me</a></li>
</ul>
</nav>
</aside>
</body>
</html>
Just an update:
The above page was accepted. I ended up using JS to generate the page, but the end result was nearly the same.
Solution
Is HTML5 at least XHTML 1.0 compliant?
No.
If you mean in the sense that valid HTML5 is necessarily valid XHTML 1.0, then this plainly untrue: HTML5 permits unclosed tags for many elements, such as img, br, hr, which in a DOM would be interpreted in much the same way as XHTML self-closing tags would.
In your document, for instance, <meta charset="utf-8"> is an unclosed tag - legitimate in HTML5 but not XHTML 1.0.
XHTML documents must be XML documents, but HTML4/5 documents do not have to be valid XML, indeed part of the genesis of HTML5 was about avoiding requiring this sort of compliance with XML.
Furthermore, HTML5 introduces new elements not present in XHTML 1.0.
According to the W3C validator, my site checks out when I set it to validate it as XHTML 1.0
When I use that tool on the HTML you provided, the validator says there are 16 errors. You may have permitted the validator to detect the doctype, which would cause it to be validated as HTML5.
If you mean in the sense that valid XHTML is necessarily valid HTML5, this is also not the case, as some elements, such as tt and big are no longer valid in HTML5, and some attributes have changed values and/or meanings. You may find this document helpful (although it refers to HTML4 rather than XHTML).
The only thing which can be said is there exists a subset of HTML5 and XHTML which can exist in both documents. This subset looks more like XHTML - minus some older features - than HTML5. Even then, because both XHTML 1.0 and HTML5 have expectations about how they're 'introduced' (i.e. doctypes etc), there are few if any options for sending whole documents which truly conform to both.
If you want to fulfil the criterion "complying with at least XHTML 1.0 standards or (better)[sic].", and you are not able to clarify whether HTML5 is acceptable, if I were you, I would interpret this as XHTML 1.0 or 1.1 only. Version 2.0 only exists as an editor's draft/'working group note' and the working group on this has been closed.
OTHER TIPS
HTML5 has an XML serialization, which is exactly the same elements and semantics as HTML5, just with an XML compliant syntax.
XHTML5 is not exactly XHTML 1.0 compliant, but it is better than XHTML 1.0 and should therefore be good for your purpose. (Obvious depending on the definition of "better", but in the context of versions it is typically just means a newer version or recommendation, which HTML5 is.)
In other words, you should be fine using HTML5-specific elements like <header>, as long as you make sure to use XML syntax (all tags closed and so on).
Your <meta charset="utf-8"> for example should be <meta charset="utf-8" />.
XHTML is an XML schema with HTML tags. Any XML document must begin with an <?xml ... declaration, so your example is not XML and not XHTML.
HTML5 and XHTML 1.0 are compatible in the sense that you can easily switch from XHTML to HTML5 by only changing the doctype, but not the other way. Most notably:
- HTML5 has a more liberal syntax. It does not require certain tags to be closed. E.g. you have an unterminated
<img>and<meta>tag. In XML, empty tags can be written as<img ... />. - HTML5 includes many tags that are not present in the older XHTML standard.
IIRC, the elements
section,header,aside,navare not defined in XHTML 1.0.
