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.

Logo

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.

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

content as a navigation menu.

Now, what element should we use to structure the actual navigation menu? If you guessed table, nope, not this time. Maybe we could put several divs side-by-side as buttons? I'll give you some credit, as it is a bit better, but unsemantic. To get to the root of it all we must ask, what is a navigation menu? The answer is, that it is a list of several links to the most important subpages of a website. Knowing this, we'll put navigation links into a list using the <ul> tag as the list and the <a> tag for each individual link. The navigation menu will look like this:

<nav>
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">References</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Notice how I assigned the "active" class to the first list item. We assign this class in every single subpage on our website so the user knows which "menu link" he/she currently in. This is a crucial thing to add so that users can stay well oriented in your site.

At this very moment, if we were to open the website in a browser, it wouldn't look very good because we haven't applied any sort of style to the header yet:

Let's add also a footer at the end of the <body>. We'll style everything in the next lesson, where you'll see just how powerful CSS is.

Footer

Similarly, as there is the <header> tag, there is also the <footer> tag. The

tag is used to set a footer. It can either be the article's footer or the entire body's footer. Let's go ahead and add the <footer> element to our page:

<footer>

</footer>

A footer usually contains information about copyright, the year a website was created, who created it, and so on. If you have a larger website, it's a good practice to add a navigation menu to the footer as well. Add the following code to the footer:

Made by &copy;HoBi for <a href="http://ict.social">ICT.social</a>

The © sequence represents the © character. We add these type of characters to our code using HTML entities.

HTML entities

Maybe you have encountered a situation where you needed to write a specific character as text on your website, a character that is reserved for use by the HTML language. Characters like <, >, " and & (less than, greater than, quotation marks, and the "and" symbol). Although it isn't likely that anything would happen if you used them in a text, your website would become invalid. Browsers are used to a certain amount of errors in an HTML document. However, that is not a valid excuse to leave errors as is because we cannot rely on the browser "error overlooking" feature to work every time.

This code is wrong:

<!-- This code is wrong -->
<p>He said that a > b, but it wasn't true.</p>

Obviously, the problem is that the greater than and less than characters throw the web browser off because it thinks we're opening an HTML tag. For this reason, we write certain characters using what are known as HTML entities.

These are the most important ones:

Character	Entity number	Entity name	Description
			Non-breaking space
"	"	"	Quote
'	'	'	Apostrophe
&	&	&	Ampersand
<	<	<	Less than
>	>	>	Greater than
€	€	€	Euro
©	©	©	Copyright
®	®	®	Registered trademark
™	™	™	Trademark

Technically, we can write any character using its entity. Mind you, it is absolutely necessary that you use them when writing characters that reserved by the HTML language. We can also use them to write characters that are difficult to write on a keyboard (like the copyright sign). We can write an entity either by its name or its code (the name is preferred for readability's sake).

When we write multiple non-breaking spaces in a row, the browser won't merge them into a single space just like it does with normal spaces, it keeps them all. Beginners that are unaware of the margin and padding properties often use spaces to emulate them, which is completely wrong and you should absolutely avoid ever doing so. An appropriate use of non-breaking spaces would be to keep short prepositions stuck to the word it belongs to rather than having it be wrapped on the next line.

Let's fix the code up above and make it valid:

<p>He said that a &gt; b, but it wasn't true.</p>

We'll get back to validity at the end of the course. However, you should always go back and double, no triple check to make sure your code is valid. If anyone tells you otherwise, he or she doesn't understand HTML and CSS very well.

Embedding source codes

We use HTML entities to embed HTML source codes where we want tags to display and not be processed:

<pre>
<code>
&lt;!doctype html&gt;
&lt;html&gt;
        &lt;head&gt;
                &lt;title&gt;Title&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
                Body
        &lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

The result:

Notice the code tag used to specify the area with a source code. Then, there is the <pre> tag. We use it when we want to display a preformatted test just as we wrote it. This way, we prevent the browser to merge our spaces, tabs, and line endings. Such a text will be rendered exactly as it was written and using a proportional font.

In the next lesson, Styling the HTML page head, we're going to style the header and footer. In other words, finish our layout. Look forward to it, it's going to be great! Today's work is available for download below as always.

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

Article has been written for you by David Capka Hartinger

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.

David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.

Activities