HTML and CSS Reference
In-Depth Information
<header>
<!-- Logo -->
<div id="logo">The Logo Goes Here</div>
</header>
</div>
3. Save the files.
I have added some dummy text so that the element can be more easily identified when you view the templates in
your browser. Figure 2-6 shows the rendered index.html file with the new logo <div> .
Figure 2-6 The index.html file with the new logo <div> element, as displayed in Google Chrome.
That nearly completes the header; all that remains is to add some navigation. HTML5 introduces a new semantic ele-
ment for that, too.
Adding a <nav> Element to Each Template
All websites need navigation links to enable users to easily move between different pages. HTML5 intro-
duces the new <nav> element that enables you to indicate to computer programs exactly where these navigation
links can be found on the page. This can be useful to users who rely on screen-reading software, for example, be-
cause the software can more accurately pinpoint the page navigation. That capability translates into the user being
able to browse your website faster.
You can have more than one <nav> element on a page. Anywhere that you have a block of major navigation links is
a candidate for using the <nav> element. You can also add other content to the <nav> element, such as headings or
paragraphs of text. However, this content should be related to the links in some way.
You won't create the actual navigation links until Chapter 3; for now you are just creating space for them on the
page.
Search WWH ::




Custom Search