To get an idea of what we’re going to build, take a look at the picture, on the following page. It’s a fairly typical blog structure, with a main header with horizontal navigation below the header. In the main section, each article has a header and a footer. An article may also have a pull quote, or an aside. There’s a sidebar that contains additional navigation elements. Finally, the page has a footer for contact and copyright information. There’s nothing new about this structure, except that this time, instead of coding it up with lots of div tags, we’re going to use specific tags to describe these regions.
It All Starts with the Right Doctype
We want to use HTML5’s new elements, and that means we need to let browsers and validators know about the tags we’ll be using. Create a new page called index.html, and place this basic HTML5 template into that file.
Take a look at the doctype on line 1 of that example. This is all we need for an HTML5 doctype. If you’re used to doing web pages, you’re probably familiar with the long, hard-to-remember doctypes for XHTML like this:
Now, take another look at the HTML5 doctype:
That’s much simpler and much easier to remember. The point of a doctype is twofold. First, it’s to help validators determine what validation rules it needs to use when validating the code. Second, a doctype forces Internet Explorer versions 6, 7, and 8 to go into “standards mode,” which is vitally important if you’re trying to build pages that work across all browsers. The HTML5 doctype satisfies both of these needs and is even recognized by Internet Explorer 6.
Headers
Headers, not to be confused with headings such as h1, h2, and h3, may contain all sorts of content, from the company logo to the search box. Our blog header will contain only the blog’s title for now.
You’ r e not restricted to having just one header on a page. Each individual section or article can also have a header, so it can be helpful to use the ID attribute like I did on 1 to uniquely identify your elements. A unique ID makes it easy to style elements with CSS or locate elements with JavaScript.
Footers
The footer element defines footer information for a document or an adjacent section. You’ ve seen footers before on websites. They usually contain information like the copyright date and information on who owns the site. The specification says we can have multiple footers in a document too, so that means we could use the footers within our blog articles too.
For now, let’s just define a simple footer for our page. Since we can have more than one footer, we’ll give this one an ID just like we did with the header. It’ll help us uniquely identify this particular footer when we want to add styles to this element and its children.
This footer simply contains a copyright date. However, like headers, footers on pages often contain other elements, including navigational elements.
Navigation
Navigation is vital to the success of a website. People simply aren’t going to stick around if you make it too hard for them to find what they’re looking for, so it makes sense for navigation to get its own HTML tag.Let’s add a navigation section to our document’s header. We’ll add links to the blog’s home page, the archives, a page that lists the contributors to the blog, and a link to a contact page.
Like headers and footers, your page can have multiple navigation elements. You often find navigation in your header and in your footer, so now you can identify those explicitly. Our blog’s footer needs to have links to the AwesomeCo home page, the company’s “about us” page, and links to the company’s terms of service and privacy policies. We’ll add these as another unordered list within the page’s footer element.
We will use CSS to change how both of these navigation bars look, so don’t worry too much about the appearance yet. The point of these new elements is to describe the content, not to describe how the content looks.
[go to part 2 ]
No comments:
Post a Comment