Explanation Lesson #4

Add Navigation and h1 Tag

The nav element is another new addition in HTML5. You can use it just like a division to add a navigation device of any kind to your web page.

Our navigation device is constructed using an unordered list (<ul></ul>) of links made using anchor tags. It can be easily converted to a drop down menu by adding nested lists and some style settings to your CSS. For now we'll add only the first tier.

The Media Queries button will not be used as a link to a web page. This will be the button we use to create our drop down.

Because empty links are considered errors in your code, we add a url #heading that will jump to the id tag in the opening header tag. Clear as mud?

Adding a Page Heading

This is the proper use of the h1 tag. Remember, only one to a web page.

main h1 {
font-size: 24px;
font-weight:100;
margin: 1% 0;
text-align: center
}

Here we set font-size to 24px
Set font-weight to 100 (could also use bold, normal and thin)
Added a 1% margin top and bottom to create white space
Finally aligned it to center on page