Get up to 80 % extra points for free! More info
This week up to 80% off on Java courses. More info

Lesson 12 - Navigation menu, footer and HTML entities

In the previous exercise, Solved tasks for HTML and CSS lessons 10-11, we've practiced our knowledge from previous lessons.

In the previous lesson, Solved tasks for HTML and CSS lessons 10-11, 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.

Header

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>:

<header>

</header>

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

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

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

 

Previous article
Solved tasks for HTML and CSS lessons 10-11
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Styling the HTML page head
Article has been written for you by David Capka
Avatar
User rating:
3 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. 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 university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities