UNDERSTANDING HTML5 TAGS - HTML5 - page 36

< a href = ”css3.org” > CSS3 </ a > &nbsp; | &nbsp;
< a href = ”php.net” > PHP </ a >
</ nav >
</ header >
< footer >
< nav >
< a href = ”html5.org” > HTML5 </ a>&nbsp; | &nbsp;
< a href = ”css3.org” > CSS3 </ a > &nbsp; | &nbsp;
< 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. h e i rst thing you need to check is your tag nesting.

In case you're wondering about the &nbsp; code, it's a non-breaking space. (h 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.

40

TAKE THE WHEEL
h 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 of 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: h e very i 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;
margin-left:20px;