Tutorial Html5

this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.
________________________________________
1. HTML 5
HTML 5 is the nextmajor version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let’s get startedmarking up the blog page.
________________________________________
2. Basic Structure
Before we begin marking up the page we should get the overall structure straight:

In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I’ll explain afterwards:
view plaincopy to clipboardprint?
1.
2.
3.
4.Page title
5.
6.
7.
8. Page title
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
It still looks like HTML markup, but there are a few things to note:
• In HTML 5, there is only onedoctype. It is declared in the beginning of the page by . It simply tells the browser that it’s dealing with an HTML-document.
• The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from to . In this case the header is used to introduce the whole page,but we’ll use it to introduce a section of the page a little later.
• The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
• The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.
• aside is used towrap around content related to the main content of the page that could still stand on it’s own and make sense. In this case we’re using it for the sidebar.
• The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.
Instead of using divs to contain different sections of the page we arenow using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what’s what in a page.
________________________________________
3. Marking Up the Navigation
The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags.
view plaincopy toclipboardprint?
1.
2.
3. Blog
4. About
5. Archives
6. Contact
7. Subscribe via. RSS
8.
9.
________________________________________
4. Marking Up the Introduction
We have already defined a new section in the document using the section tag. Now we just need some content.
view plaincopy to clipboardprint?
1.
2.3. Do you love flowers as much as we do?
4.
5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
6.
We add an id to the section tag so we can identify it later when styling. We use the header tag to wrap around the...