7

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.

  • 3
    stackoverflow.com/q/6028133. Ask your teacher if it's OK to use HTML5. The W3C validator is the only one that matters. – Robert Harvey Dec 5 '15 at 16:08
  • @RobertHarvey It takes a week to get a reply from the teacher though (I'm online), so I'd like to have a somewhat informed decision for the meantime. – Carcigenicate Dec 5 '15 at 16:10
  • 1
    Reading the mind of a teacher is always a bit perilous, but if I were in your shoes, he did use the words "at least" and "or better," which qualifies HTML5 AFAIC. I would avoid HTML5 specific features like Canvas, and simply state that "it validates on the w3c validator for XHTML 1.0." – Robert Harvey Dec 5 '15 at 16:12
  • 3
    When I put your document through the W3C validator, and set it to validate XHTML 1.0, I get loads of errors. 12 of them. Errors, not warnings. Did you misconfigure the form? You must select XHTML 1.0 in the dropdown list… – amon Dec 5 '15 at 16:23
  • 4
    Hm, one could always argue that HTML5 is a better standard than XHTML1.0 :-) – Bergi Dec 5 '15 at 20:37
14

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.

  • Indeed, I think the thing to do would be to argue (as soon as possible, not after submitting the assignment) that one or both of HTML 5 or XHTML 5 are "better" than XHTML 1.0. in the hope of getting agreement. Ideally they'll even explain why they said they wanted XHTML, but perhaps that's hoping for too much. – Steve Jessop Dec 5 '15 at 22:30
6

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" />.

  • Note that for a document to be XHTML5, it MUST be served with an XML media type (i,e. application/xhtml+xml). That's not a requirement of XHTML1.0 (though maybe it should have been). – Alohci Dec 5 '15 at 21:39
0

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, nav are not defined in XHTML 1.0.
  • "Any XML document must begin with an <?xml ... declaration". That's not true, the XML spec states that "XML documents SHOULD begin with an XML declaration" and follows almost immediately with an example that does not begin with an XML declaration. – Alohci Dec 5 '15 at 21:32
  • @Alohci Oh, your're right! But with XML 1.1, the declaration has been made mandatory. Of course, XHTML 1.0 builds upon the XML 1.0 standard. – amon Dec 5 '15 at 21:40
  • Good point. I note that XHTML5 also references XML1.0, not 1.1. – Alohci Dec 5 '15 at 21:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.