PHP week Anniversary - BF
Get up to 80 % extra points for free! More info
Save up to 80 % on our PHP e-learning courses. Only this week!

Lesson 12 - Navigation menu, footer and HTML entities

In the previous lesson, Border, shadow and the boxmodel in CSS, we introduced you to borders, shadows, and the boxmodel. We also finished the article area on our website. In today's lesson, we're going to code a navigation menu and a footer, as promised.


We'll use the <header> element once again for the header. We've already used it to define the article header. Now, we'll use it to define a header for the entire body. Adding the header tag helps search engines treat the element as a header. As you already know, div elements were used at one point as headers, but doing so nowadays is considered unsemantic. A website full of div elements is hard to read for both programmers and search engines.

Let's go ahead and add a <header> tag at the very beginning of the <body>:



There will only be 2 things in the header: a logo and a navigation menu.


Insert the logo into a <div> element and add an id attribute with the value set to "logo".

<div id="logo">HoBi</div>

The id attribute is kind of similar to the class attribute. It assigns a particular style to a specific element. The main difference between them is that only one element can be affected because each id must be unique (like we did here with the "logo" id) in the entire HTML document. Whereas we are allowed to assign a single class to as many elements as we wanted. We use ids to style specific elements on a website. Take the logo, for example, there is only one logo on a page. We'll come back to ids later when we style the logo.

Navigation menu

As for the second element in the header, we said we'd have a navigation menu. We use the <nav> tag to set a navigation area. As you probably could have guessed, it has benefits over unsemantic divs because search engines can recognize



Downloaded 42x (76.84 kB)
Application includes source codes in language HTML



Article has been written for you by David Capka
Do you like this article?
2 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Previous article
Border, shadow and the boxmodel in CSS
All articles in this section
Make your first website, step by step!
Next article
Styling the HTML page head
Activities (9)




sadhath:3/15/2017 5:31

<style> {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
} {
border: 1px solid #777;
} img {
width: 100%;
height: auto;

div.desc {
padding: 15px;
text-align: center;

<div class="gallery">

<img src="fjords.jpg" alt="Fjords" width="300" height="200">

<div class="desc">Add a description of the image here</div>

<div class="gallery">

<img src="forest.jpg" alt="Forest" width="300" height="200">

<div class="desc">Add a description of the image here</div>

<div class="gallery">

<img src="lights.jpg" alt="Northern Lights" width="300" height="200">

<div class="desc">Add a description of the image here</div>

<div class="gallery">

<img src="mountains.jpg" alt="Mountains" width="300" height="200">

<div class="desc">Add a description of the image here</div>


3/15/2017 5:31
IT Man
Replies to sadhath
IT Man:3/15/2017 11:16
  1. Next time use button </> for code. It's hard to read it now.
  2. Stylesheet should be in own file with CSS. So put it in style.css and link it in HTML in head:
<link rel="stylesheet" href="style.css" />
3/15/2017 11:16
Don't be silly and smile!
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

2 messages from 2 displayed.