· Tutorials\
· HTML & CSS
\Rating:
· 1
· 2
· 3
· 4
· 5
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
Mads Kjaer on Jul 6th 2009 with 551 comments
Tutorial Details
· Technology: CSS3, HTML 5
· Difficulty: Intermediate
· Completion Time: 1-2 hours
Final Product What You'll Be Creating
In 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 next major 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 started marking 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. <!doctype html>
2. <html>
3. <head>
4. <title>Page title</title>
5. </head>
6. <body>
7. <header>
8. <h1>Page title</h1>
9. </header>
10. <nav>
11. <!-- Navigation -->
12. </nav>
13. <section id="intro">
14. <!-- Introduction -->
15. </section>
16. <section>
17. <!-- Main content area -->
18. </section>
19. <aside>
20. <!-- Sidebar -->
21. </aside>
22. <footer>
23. <!-- Footer -->
24. </footer>
25.
26. </body>
27. </html>
It still looks like HTML markup, but there are a few things to note:
· In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. 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 <h1> to <h6>. 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 to wrap 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 are now 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.
1. <nav>
2. <ul>
3. <li><a href="#">Blog</a></li>
4. <li><a href="#">About</a></li>
5. <li><a href="#">Archives</a></li>
6. <li><a href="#">Contact</a></li>
7. <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
8. </ul>
9. </nav>
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.
1. <section id="intro">
2. <header>
3. <h2>Do you love flowers as much as we do?</h2>
4. </header>
5. <p>Lorem ipsum dolor sit amet, ...
NajlepszeFilmyChomikuj