Per un incarico scolastico, ho scritto una pagina web in HTML5.
Dopo aver controllato nuovamente i requisiti del compito, ho trovato la riga:
• a minimum of three HTML pages complying with at least XHTML 1.0 standards or (better).
Preferirei non aver bisogno di aggiungere tutti i brutti tag nella parte superiore della pagina e modificare tutti i miei significativi <header> e <nav> tag in generico <div> s, quindi ho provato a convalidarlo.
In base al validatore W3C , il mio sito si ritira quando lo imposto per convalidarlo come XHTML 1.0
Secondo Validome , tuttavia, non è valido e mi dà errori per la mancanza di attributi appropriati nella parte superiore e errori per ognuno dei tag HTML5 che ho usato.
Questo mi lascia con la domanda:
HTML5 è almeno conforme a XHTML 1.0?
La pagina:
<!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>
Solo un aggiornamento:
La pagina sopra è stata accettata. Ho finito per usare JS per generare la pagina, ma il risultato finale era quasi lo stesso.