HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [21]
head? tag. Look at the source code, and you see that the relevant code looks like this:<p><head><p><p><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /><p><p><!-- oxWheels1.html --><p><p><!-- note this page has deliberate errors! Please see the text<p><p>and oxWheelsCorrect.html for a corrected version.<p><p>--><p><p></head><p><p><body><p><p><title>The Oxen and the Wheels element is supposed to be in the heading, but I accidentally put it in the body! (Okay, it wasn’t accidental; I made this mistake deliberately here to show you what happens. However, I have made this mistake for real in the past.)<p><br>Fixing the title<p>If the title tag is the problem, a quick change in the HTML should fix this problem. oxWheels2.html shows another form of the page with my proposed fix:<p><head><p><p><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /><p><p><!-- oxWheels2.html --><p><p><!-- Moved the title tag inside the header --><p><p><title>The Oxen and the Wheels element inside the body, rather than in the head where it belongs. If I move the title to the body, the error should be eliminated.<p><p>2. Change the comments to reflect the page’s status.<p>It’s important that the comments reflect what changes I make.<p><p>3. Save the changes.<p>Normally, you simply make a change to the same document, but I’ve elected to change the filename so you can see an archive of my changes as the page improves. This can actually be a good idea because you then have a complete history of your document’s changes, and you can always revert to an older version if you accidentally make something worse.<p><p>4. Note the current first error position.<p>Before you submit the modified page to the validator, make a mental note of the position of the current first error. Right now, the validator’s first complaint is on line 13, column 6. I want the first mistake to be somewhere later in the document.<p><p>5. Revalidate by running the validator again on the modified page.<p>6. Review the results and do a happy dance.<p>It’s likely you still have errors, but that’s not a failure! Figure 2-7 shows the result of my revalidation. The new first error is on line 16, and it appears to be very different from the last error. I solved it!<p><p>Figure 2-7: Document type does not allow element “h2” here.<p><p><p>Solving the next error<p>One down, but more to go. The next error (refer to Figure 2-7) looks strange, but it’s one you see a lot.<p>The document type does not allow error is very common. What it usually means is you forgot to close something or you put something in the wrong place. The error message indicates a problem in line 16. The next error is line 16, too. See if you can find the problem here in the relevant code:<p><body><p><p><h1>The Oxen and the Wheels<p><p><h2></h1>From Aesop’s Fables</h2><p><p>After you know where to look, the problem becomes a bit easier to spot. I got sloppy and started the <h2> tag before I finished the <h1>. In many cases, one tag can be completely embedded inside another, but you can’t have tag definitions overlap as I’ve done here. The <h1> has to close before I can start the <h2> tag.<p>This explains why the two main browsers displayed From Aesop’s Fables differently. It isn’t clear whether this code should be displayed in H1 or H2 format, or perhaps with no special formatting at all. It’s much better to know the problem and fix it than to remain ignorant until something goes wrong.<p>The third version — oxWheels3.html — fixes this part of the program:</div>
</div>
<div id="pager" style="text-align: center;margin: auto;">
<a data-ajax="false" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" href="/article/html-xhtml-and-css-all-in-one-for-dummies-andy-harris-e60649.html">Return Main Page</a>
<a data-ajax="false" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" href="/read/html-xhtml-and-css-all-in-one-for-dummies-andy-harris-e60649/20.html">Previous Page</a>
<a data-ajax="false" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" href="/read/html-xhtml-and-css-all-in-one-for-dummies-andy-harris-e60649/22.html">Next Page</a>
</div>
<div data-role="footer" id="tail" style="margin-top: 30px;">
<h3>®Online Book Reader</h3>
</div>
</div>
</body>
<!--
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
// includedLanguages: 'de,en,es,fr,it', 需要下拉翻译支持哪些语言，默认全部
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
-->
</html>
Figure 2-6 shows the first two error messages. The first complains about where the tag is. The second message complains about the
The Oxen and the Wheels
Look carefully at the head and title tag pairs, and review the notes in the error messages, and you’ll probably see the problem. The
Note: I’m only showing the parts of the page that I changed. The entire page is available on this book’s CD-ROM.
The fix for this problem is pretty easy:
1. Move the title inside the head.
I think the problem here is having the