A general problem with comment tags is that they’re not used suffi ciently in a Web page. Sometimes a few comments suffi ce — and if a page only needs a few, you shouldn’t add more. Other times, a page needs a good deal more comments than it has. The number of comments required depends completely on the size and scope of the Web project and whether you’re working by yourself or with other developers.
However, sometimes developers get carried away and have so many comment tags that you can’t see the fl ow of the HTML code. A page with a long comment after every tag can act like barbed wire in a fi eld — you keep tripping over it and can’t reach your destination. If a large number of comments are required for a complex page, put them together in a single container, and then the other developers can see the HTML code and understand how it’s used.
39 In the following example, the <h1> tag closes outside the <section> container:
<section> <h1>Smash this!
</section> </h1>
Instead, it should look like this:
<section>
<h1>Smash this!</h1> </section>
Here, the <body> tag closes outside the <html> container. Th e <h3> container is correct.
<html>
<body>Really interesting stuff
<h3>Don’t forget to vote!</h3> </html>
</body>
Instead, it should look like this:
<html>
<body>Really interesting stuff <h3>Don’t forget to vote!</h3>
</body> </html>
Here, the <header> tag closes before the <nav> tag does:
<header> <nav>
<a href=”html5.org”>HTML5</a> |
<a href=”css3.org”>CSS3</a>> |
<a href=”php.net”>PHP</a> </header>
<footer>
<a href=”html5.org”>HTML5</a> |
<a href=”css3.org”>CSS3</a>> |
<a href=”php.net”>PHP</a> </nav>
</footer>
Instead, use two <nav> container sets — one for the header and one for the footer:
<header> <nav>
40
<a href=”css3.org”>CSS3</a> |
<a href=”php.net”>PHP</a> </nav>
</header> <footer> <nav>
<a href=”html5.org”>HTML5</a> |
<a href=”css3.org”>CSS3</a> |
<a href=”php.net”>PHP</a> </nav>
</footer>
Sometimes, when you test your HTML5 page, you won’t see what you expect — or even anything at all. Th e fi rst thing you need to check is your tag nesting.
In case you’re wondering about the code, it’s a non-breaking space. (Th e semicolon is part of the tag.) Simply think of it as a space around the vertical bar character (|) used to separate the links. In your browser, you’ll see:
HTML5 | CSS3 | PHP
When you place your navigation code inside of <nav> tags, you can easily spot it as naviga- tion. However, like all other tags, you have to pay attention to the nesting conventions used in HTML5.
TAKE THE WHEEL
Th e HTML for the following Web page (TakeTheWheel.html in this chapter’s folder at
www.wiley.com/go/smashinghtml5) has errors that need correcting. It starts off with several tags that are empty or partially completed. You’ll be responsible for making sure that the correct tags and text are added where they need to be. Sometimes, you’ll need to close a container that has been opened (<tag>) or open one that has been closed (</tag>). And be sure that your tags are correctly nested. (Hint: Th e very fi rst tag is not an HTML tag but that special one that begins with an exclamation point!)
<! > <html lang= > <head>
<!-- Color Combination
0B0B0D,29272A,A99A93,E27107,F8AC00 -->
<style type=”text/css”>
body {
background-color:#F8AC00; color:#29272a;
font-family:Verdana, Geneva, sans-serif; font-size:12px;
41
} h1 {
color:#29272A;
font-family:”Arial Black”, Gadget, sans-serif; } h2 { text-indent:10px; color:#0B0B0D; background-color:#E27107;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; } header { text-align:center; } </style> <title>==???===</title> < > <body> <header> < >My Favorite Things</h1> </header> <section> <h2>My Favorite Music</h2> ==????==<br/> ==????==<br/> ==????==<br/> < >My Favorite Movies</h2> ==????==<br/> ==????==<br/> ==????==<br/> <h2>My Favorite Computers</h2> ==????==<br/> ==????==<br/> ==????==<br/> <h2>My Favorite TV</h2> ==????==<br/> ==????==<br/> ==????== <br/> < > < >
<h5>Not responsible for my tastes.<br/>
Take it or leave it.< > </footer>
</body> </html>
Th is exercise should help you pay attention to the little details. Of all of the gotchas, it’s the little things that slip under the radar.