The nav element
Like <header>, <nav> is a structural tag with a clear purpose.
I have it on the left on this site though it's often placed horizontally above or below the header. Technically you can place it (or them – there can be more than one) anywhere you want, but remember never make it difficult for visitors. One of the most common mistakes beginners – and for that matter, many professionals – make is to not make navigation simple, straight forward and intuitive.
The <nav> element is for "major navigation blocks"*. It can go in the header or article tags (which we will look at next); or it can be on its own. On the left I have it on its own and in the article element the "previous" and "next" links are in nav tags.
It's time to get a real HTML editor. There are a number of them. Google "free HTML editor" and see what you come up with. For Windows I like CoffeeCup's free version of its well-known HTML editor. I recommend you download and install it.For Mac I found TextWrangler. I don't have a Mac so I haven't tried it myself. If someone does try it please email me and tell me what you think.
If you do google "free HTML editor" you will find what are known as WYSIWYG editors – "WYSIWYG" being an acronym for "What You See Is What You Get". I strongly recommend against them. There are many problems with WYSIWYG editors, but their primary fault is that they do not make SEO friendly pages. They write messy code. It may look good on a monitor, but the bots, your second (and equally important) audience, have a hard time discerning what's what.
No WYSIWYG editor is able to identify what belongs in say the header, nav or footer – that is something only a human can do, therefore they are unable to utilize HTML5's new structural elements – such as the <nav> tag. In fact until now CoffeeCup has been a WYSIWYG editor, but with HTML5 becoming the new standard they are abandoning their WYSIWYG design option altogether.
Assuming you are on a PC**, open CoffeeCup and take a look at a screen you may well find yourself spending a ludicrous number of hours staring – and swearing – at. Needless to say, you can use any editor you please; CoffeeCup may not be for you.*** Choose carefully as web designers get oddly attached to their editors. Whatever editor you do choose may be with you for years to come.
In the upper left you will see an icon for "New". Click it, select "New HTML Page" and a new window will open that looks something like this:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/sin/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
Compare the above to what CoffeeCup has as a default template and you will see a couple of differences:<title></title> should go under <meta charset="utf-8"> and above everything else in the head.It's not critical, but that is its customary placement.<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> isn't necessary.This is CoffeeCup's plug. I guess we can't begrudge them that; they are giving us the software after all.Nor do you need <meta name="created" content="(date)">This records when you first created the page. It does nothing for SEO, plus it's information I personally have never needed, but it's up to you.
I might add that there are all kinds of things I don't do that others swear by and some things I consider important that others don't. HTML has few absolutes. You can and should develop your own way of doing things.
If you were wondering, the following:<!--[if lt IE 9]> <script src="//html5shim.googlecode.com/sin/trunk/html5.js"></script> <![endif]-->
...tells IE browsers older than IE9 ([if lt IE 9] means "if less than IE 9") to load a javascript that makes the new HTML5 structural tags function. Microsoft's IE didn't support them until IE9.
This is an example of what is called browser sniffing. With the introduction of IE9 Microsoft is finally conforming to basic HTML5 standards. With any luck browser sniffing will eventually become a thing of the past. At least it looks like browser compatibility issues might become less a pain in the neck than it has been to date. I do hope so.
Let's try out your new editor. In the code editor place your cursor between the opening and closing body tags.
Click "code" tab on the left and out will pop a list of all the elements.
Select the HTML5 list of elements.
Scroll down and double click <nav></nav>.
Click the return button on the left and list of elements will slide back.
With the cursor inside the nav tags, repeat the process again only now double click <ul></ul> and then inside that double click <li></li>. In that write <a href="index.htm">home</a>.
And you should have a line of code like:
<nav><ul><li><a href="index.htm">home</a></li></ul></nav>
...which you can clean up with "Enter" and "Tab" keys to: <nav> <ul> <li><a href="index.htm">home</a></li> </ul> </nav>
Now I would add <header></header> above the nav tags and include some text in <h1></h1>, clean it up and you're off to the races.
I have created a page, My New Template, based on what you just did. There is also some CSS for page layout. Take a look at it and see if the contents of the body tag looks at all like yours. I named my template "new-template.htm". You should name yours "index.htm" (or index.html) and save it in a folder named "website" on your desktop, or somewhere you can find it later.
Remember, there is no "correct" way to layout a page. I made this template this way to be simple and easy to understand, however I'll be the first to admit it's boring. Be creative.
Keep layout and navigation simple, straight forward and intuitive ...but be creative.
In web design there are some things you can't do and others you probably shouldn't. As you gain experience you will make mistakes – and you will put a lot of time and effort into correcting them ...but then there are those crazy ideas that pop in your head that break all kinds of "rules", but that make a site unique and special – and a joy to make.
