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.
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
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".
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.
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
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
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.
David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.