HTML 5 is a hot term in the field of web development nowadays. Yes, many people are optimistic about it, and many well-known companies in the industry have begun to use HTML 5 to re-build their own websites, for example, when YouTube began to use HTML 5 videos, Google had abandoned its own gears and began to fully embrace HTML 5 for offline solutions. Major browser manufacturers also began to support HTML 5, even the criticized Microsoft claims to add HTML 5 support in IE 9. This article will introduce you in detailHow to build a complete HTML 5 Web PageTo enhance your understanding of HTML 5.
What is the difference between HTML 5?
First, we need to understand that HTML 5 is a new semantic structure tag, including canvas, offline storage specification, and some new inline semantic tags, but for objective reasons (mainly for browser support ), we have to restrict the scope of the discussion, such as the image layout, offline storage, native video, or geographic location API, which is not supported by all browsers.
Because the new HTML 5 tags are mostly structured, their behavior is similar to block elements. To help you better understand HTML 5, I will use some new structural elements in the following content.
Doctype that everyone should remember (document type)
The first thing to create an HTML 5 web page is to use the new doctype. You must remember HTML 4 or XHTML 1. the doctype of X. to copy and paste the old document to the new one, you must modify the doctype. Remember that the following is the doctype of HTML 5:
- <!DOCTYPE html>
It is easy to remember, and it is case-insensitive. It is much simpler than the widely used version and maintains backward compatibility.
Semantic Structure
Before in-depth marking, let's take a look at the general structure of the next web page.
- ...stuff...
- <body>
- <div id="header">
- </div>
- <div id="nav">
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </div>
- <div id=content>
- <p>...</p>
- </div>
- <div id="footer">
- <p>...</p>
- </div>
- </body>
In the above example, I added an ID for all Div tags. I believe most web designers are familiar with this practice. This has two purposes: first, Id provides a hook, you can apply a style to a specific part of the page. Second, ID is used as a primitive pseudo-semantic structure. The intelligent parser searches for the ID attribute on the tag, and try to guess its meaning, but this is a very difficult thing, because each website ID may be different.
With the idea of adding new tags, the creators of HTML 5 designed some new elements. Let's take a look at some of the key structural tags added in HTML 5.
◆<Header>
This tag plan is used to describe the introductory information of a section or a complete web page. The
◆<Nav>
The meaning of this element will not be mentioned, and your navigation element will be placed here, such as the main site navigation, but in some cases there may also be page navigation elements, the creator of HTML 5, whatwg, recently modified the <nav> explanation to demonstrate how to use it twice on a page. For more information about Nav, see http://www.zeldman.com/2009/07/13/html-5-nav-ambiguity-resolved /.
To put it simply, if you use the <Div id = "nav"> tag in the page to accommodate navigation elements, you can replace it with <nav>.
◆<Section>
This may be the most obscure mark. According to the explanation in the HTML 5 standard, a section is a topic content group. There is usually a header mark in front, and it is usually followed by a footer mark, if necessary, sections can also be nested.
In our example above, the DIV marked as "content" is a good candidate for Section. In this section, we may have more sections based on different content.
◆<Article>
According to whatwg comments, the article element is to package sections to form a document or website independent part, such as a magazine or newspaper article or a blog article.
Remember, a page can contain multiple Article elements. For example, a blog home page may contain more than 10 Article elements, and an article can also enter the section element, therefore, you must be careful when using nested functions. errors may occur when you are not careful.
◆<Aside>
Another ambiguous mark is aside, which represents content unrelated to the main text stream of the document, that is, a bracket remark, footer, reference, comment, or something similar to the sidebar. According to the whatwg comment, <aside> can be used in all of these cases.
◆<Footer>
Footer has a clear meaning. It can be used in section or at the bottom of a page.
Put all together
Now we use the new tag to rewrite the previous example Page.
- <!DOCTYPE html>
- ...stuff...
- <body>
- <nav>
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </nav>
- <section>
- <article>
- <p>...</p>
- </article>
- </section>
- <footer>
- <p>...</p>
- </footer>
- </body>
Is it cleaner and easier to understand? We can pack
Newly tagged Style
In most browsers, you only need to use the style for the element as usual, but you must add the display: block to each element. The rule, over time, when the browser's support for new HTML 5 elements is becoming more and more standard, it will not be used.
Below we apply some styles to the team header:
- header {
- display: block;
- font-size: 36px;
- font-weight: bold;
- }
Remember, you can still add the class and ID attributes on these elements. Therefore, if you want to use a style separately for the navigation section, you can add a class or ID attribute as follows:
- <nav class="main-menu">
Then apply a style:
- nav.main-menu {
- font-size: 18px;
- }
Compatibility with old browsers
None of these styles can be used in IE 6. If you insist on maintaining compatibility with the old browser, there is a remedy. IE 6 can parse these tags, but it cannot apply styles, the solution is to use JavaScript and use the createelement method to enable IE to support HTML 5 tagged styles. You can include this code in the header of the HTML 5 file, you can also save it to an independent file and then reference it.
- <script>
- document.createElement('header');
- document.createElement('nav');
- document.createElement('section');
- document.createElement('article');
- document.createElement('aside');
- document.createElement('footer');
- </script>
You may ask, why didn't you specify the MIME type for this script? You do not need to specify this parameter in HTML 5. In HTML 5, all scripts are assumed to be type = "text/JavaScript", so you do not have to do this.
Although the IE problem has been solved, as far as I know, the gecko rendering engine in Firefox 2 still has a bug. There are two solutions, but neither of them is ideal, for more information, see http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2 /. Considering that Firefox 2 has very few users, you can ignore this bug completely.
Now you can use HTML 5, but should you?
The answer is simple: Yes!
However, this should also be adjusted based on the nature of the website. For example, if you want to reconstruct the CNN homepage, it may not be realistic. It is better to wait for the browser to support it better, however, if you are renovating your blog system, you can try it. If you are using WordPress, there are some plug-ins available to help you, here is a WordPress topic in HTML 5.
You can also go to the HTML 5 Gallery (http://html5gallery.com/), because it is all built with HTML 5, you can look at its source code, deepen the understanding of HTML 5 markup. We can continue to focus on the HTML 5 topic of 51cto.com. We will continue to update the technical application and information reports on HTML 5.
If you are hesitant, you can check out Google's homepage, Which is HTML 5. If you are safe, you can use JavaScript to declare these new tags for use. The HTML 5 tags are far more than that. I hope this article will eliminate your doubts and use HTML 5 boldly. Only when there are more users can this standard be truly effective.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
