HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in folder 5.
1.
Open the
index.html
and
about.html
files in your text editor.
2.
Add a new
<nav>
element under the logo, as shown in the following code.
<div id="container">
<!-- Header -->
<header>
<!-- Logo -->
<div id="logo">Logo</div>
<!-- Navigation -->
<nav>
The Navigation Links Go Here
</nav>
</header>
</div>
3.
Save the files.
4.
Open the files in your web browser.
5.
Use the developer tools to inspect the page and make sure that the new
<nav>
element is listed below the
logo.
Again, I have added some dummy text to make this element more visible. Take a look at the templates in your
browser. Figure 2-7 shows the home page, as displayed in Google Chrome.
Figure 2-7
The home page template, complete with <nav> element.
Adding <section> Elements
The
<section>
element should be used to represent a generic section of your web page. For example, you
can use it to represent individual chapters in a document or the different sections of a home page (such as introduc-
tion, news, or contact information). Section elements usually contain a heading as their first piece of content.
