Header & Page Navigation
Now that you have more than one website page you'll need to link them togeather so we are going to add a <nav> element in the <header> section of your page.
To help us do this we first need to add the class="header_with_nav" to the opening <header> tag, so then the CSS will change the layout and spacing in the header to accomodate the <nav>.
Like the "header_with_img" before in the Build Steps docs all CSS for this class is already included in our CSS file so you only need to make changes in the HTML page.
<header class="header_with_nav">Changing the Heading
We next need to replace the placeholder text in the <h1> with the heading for the page.
We changed ours to <h1>About Building My First Website</h1> but you can choose something different.
<body>
<header class="header_with_nav">
<h1>About Building My First Website</h1>
</header>
</main>
Adding the Nav
To do this we will use a snippet file again the same way we did in the body.
Move your curser to the end of the <h1> then press the Enter / return key to create a new line below it.
Now type the the word: jwsnav
Note as you start to type this command you will see an option box appear you can now either select by clicking on the above snippet command or by continuing to type it in full then press either Tab or Enter.
<body>
<header class="header_with_nav">
<h1>About Building My First Website</h1>
<nav>
<ul>
<li><a href="../">name</a></li>
<li><a href="../url" aria-current="page">name</a></li>
<li><a href="../url">name</a></li>
</ul>
</nav>
</header>
</main>
Hopefully you should now see a nav like this one, containing an unordered list <ul> with three list items <li> inside, each with an anchor element <a> ready to link to your other website pages.
As you can see our snippet file provides you with three nav links. Though if you have more or less pages planned for your website, you can either add or delete the number of list items necessary for your needs. For our website purposes we only need two so are going delete the bottom list item.
A quick tip for deleting a whole line is to click on the line number (on the left side), this will highlight the line of code and then press Delete and it will remove the line.
<body>
<header class="header_with_nav">
<h1>About Building My First Website</h1>
<nav>
<ul>
<li><a href="../">name</a></li>
<li><a href="../url" aria-current="page">name</a></li>
</ul>
</nav>
</header>
</main>
Linking the Pages
Each <a> element contains a href="../url" where you will add the link to the page replacing the placeholder "url".
If you have been following along with our Build Steps you will already be familiar with the <a> element from adding social links to the footer. There we added absolute url's which are external links to other websites.
This time we are adding relative url's which are used to link to other files and folders on the same website, we do this by typing the folder name after the href="../" followed by another / at the end.
So to link to our about page it would look like this href="../about/"
We also need to add the visible part of the link which will display on the page by replacing the placeholder "name" before the </a> closing tag, so your link should look like this.
<li><a href="../about/" aria-current="page">About</a></li>
Aria Roles
You may have also noticed that one of the provided links has a aria role aria-current="page" in it. Aria roles provide semantic meaning to content, helping people using screen readers and other assisted tools to use and navigate your website.
This particular aria role helps users identify which page of the website they are currently on by adding it to the <a> of the page in the <nav>. We can also use this aria role to help add styling to the <a> from our style.css file that visually highlights the current page to everyone. So you really need to make sure the aria-current="page" is correctly placed in the nav on each page you make.
To finish our navigation links we need to make sure the first list item links to our index (home) page, though if you use the snippet file with each new page this should already be correct but if not we only need to type a ../ in the href="" as the index page is in our root folder rather than a sub folder like all other pages will be. Lastly add the name of your home page to whatever you have called it.
<body>
<header class="header_with_nav">
<h1>About Building My First Website</h1>
<nav>
<ul>
<li><a href="../">Home</a></li>
<li><a href="../about/" aria-current="page">About</a></li>
</ul>
</nav>
</header>
</main>
Home Page
Now we have made a second page (or more) we must go and add the nav to the first page we made in Build Steps too, this is now your Home/index page.
As this is the index page of the site and in the root folder unlike the other pages that are in a sub-folder, we will have to make a slight change to each nav list item by removing one of the two . in the href="./url" like this. Also don't forget to move the aria-current="page" to the Home list item too.
Header Addins
Header With Logo
Previously in the Build Steps we introduced you to adding an image/logo to your header with class="header_with_img".
The great thing is class="header_with_nav" also allows us to add an image/logo too.
We have added the JWS logo to our page by going to the end of the opening <header> element and pressing the Enter / return key to create a new line between it and the <h1> then adding a <img> tag.
We can shortcut this with Emmet by typing: img
Note as you start to type this command you will see an option box appear you can now either select by clicking on the above snippet command or by continuing to type it in full then press either Tab or Enter.
The Emmet img command only provides the src="" and alt="" tags so you will need to manually add between them the width="" and height="" tags.
Lastly we have wrapped our <img> inside <a> </a> tags and directed the href="../" to take the user to the home page, this adds a little extra navigational touch.
We can combine adding the <img> & <a> tags with Emmet by typing: a>img
<body>
<header class="header_with_nav">
<a href="../"><img src="../img/jasminews.svg" width="261" height="135" alt="Jasmine Web Starter Logo"></a>
<h1>About Building My First Website</h1>
<nav>
<ul>
<li><a href="../">Home</a></li>
<li><a href="../about/" aria-current="page">About</a></li>
</ul>
</nav>
</header>
</main>
That's it for the <header> section of the page, our next step covers adding structure and contents to the <main> section.
I hope you remembered to stage and commit after each step, if not please do so before proceeding.
Page Last Edited: