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.
