How to build an HTML 5 Web page

HTML 5 is a buzzword in web development today, yes, a lot of people are optimistic about it, there are many well-known companies in the industry began to use HTML 5 to rebuild their website, such as YouTube began to use HTML 5 video, Google has abandoned its own gears, Beginning to embrace the HTML 5 implementation of offline solutions, major browser manufacturers are also beginning to support HTML 5, even the accused of Microsoft also claimed to be in IE 9 to increase the support of HTML 5. This article is going to give you a detailed description of how to build a complete HTML 5 Web page to deepen 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, includes canvas, offline storage specification, and some new inline semantic tags, but for objective reasons (mainly for browser support), we have to limit the scope of the tags, such as canvas, offline storage, native video or geo-positioning APIs, Not all browsers support it.

Since the new HTML 5 tags are mostly structural, and their behavior is somewhat similar to block elements, to help you deepen your understanding of HTML 5, I'll use some of the new architectural elements in the following sections.

DOCTYPE (document type) that everyone should remember

The first thing to create an HTML 5 Web page is to use the new DOCTYPE, you must remember the DOCTYPE of HTML 4 or XHTML 1.x, when we want to copy and paste from the old document into the new document, we have to modify the DOCTYPE, please remember that the following is the HTML 5 of DOCTYPE:

> is easy to remember, and is not case-sensitive, much simpler than today's widely used version, and keeps backwards compatible. Semantic structure before going deep, let's look at the approximate structure of a Web page. In the above example, I added IDs for all div tags, and I believe most web designers are familiar with this practice, for two purposes, first, the ID provides a hook, It allows you to apply styles to specific parts of a page, and secondly, as an original, pseudo semantic structure, the smart parser looks at the id attribute on the label and tries to guess what it means, but this is a difficult thing to do because each site ID may be different.

So there's the idea of adding new tags, and the creators of HTML 5 are designing new elements, so let's take a look at some of the key structural tags added to HTML 5.

This tag plan is used to describe introductory information about a section or a complete Web page, and tags can include all the flags that are usually placed on the header of the page, if you use the

, it will be replaced.

The meaning of this element is not to say, your navigation elements are 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 explanation, showing how to use a page two times. In short, if you use the

tag to accommodate the navigation elements, then you can use the to replace.

This may be the most ambiguous tag, as explained in the HTML 5 specification, a section is a subject-content group, preceded by a header tag, usually followed by a footer tag, and section can be nested if needed.

In our example, the div labeled "content" is a good candidate for section, and in this section we may have more sections depending on the content.

According to WHATWG's comments, the article element is to package the section to form a document or a separate part of the Web site, such as a magazine or newspaper article, or a blog post.

Remember, you can have multiple article elements in a page, such as a blog home page may have more than 10 article elements, article can also enter the section element, so you need to be careful when nesting, you may inadvertently error.

<aside>

Another ambiguous sign is aside, which behaves as if it were nothing to do with the main text stream of the document, which is equivalent to a bracket remark, footnote, reference, comment, or something similar to a sidebar, which, according to the WHATWG annotation, can be used for all of these situations.

The meaning of footer is also very clear, it can be used in section, also can be used at the bottom of a page.

Put it all together.

Now we all rewrite the previous example page with the new tag.

 

My Article
Packaged into header tags. Also note that we can add a footer element under the article element to accommodate such as page navigation, related articles or other content.

Styles for new tags

In most browsers, you only need to use styles for elements as usual, but be sure to add display:block to each element; rules, over time, the browser's support for HTML 5 new elements becomes more and more standard, it can not be used.

Below our team header applies some styles:

header {Display:block;      font-size:36px;  Font-weight:bold; Remember, you can still add the class and ID attributes to these elements, so if you want to use a single style for the navigation section, you add a class or id attribute to the following:

<nav class= "Main-menu" > then apply a style again:

Nav.main-menu {font-size:18px; Compatible with old browsers

These styles can not be used under IE 6, if you insist on maintaining compatibility with the old browser, there is a remedy, IE 6 can resolve these tags, but can not apply the style, the solution is to use JavaScript, using the CreateElement method can make IE support HTML 5 tag style, you can include this code in the header of the HTML 5 file, or you can save it to a separate file and then refer to it.

<script>   document.createelement (' header ');    document.createelement (' nav ');     document.createelement (' section ');    document.createelement (' article ');     document.createelement (' aside ');    document.createelement (' footer ');  script >  you might ask, why didn't you specify the MIME type for this script? There is no need to specify in HTML 5, and in HTML 5 all scripts are assumed to be type= "Text/javascript", so there is no need to be superfluous. Now you are ready to use HTML 5, but should you use it? The answer is simple: Yes! But this also depends on the nature of the site to make adjustments, for example, suppose you want to refactor the CNN home page, it may not be realistic, it is best to wait for the browser to support a better one, but if you are renovating your blog system, then you can try, if you use WordPress, Now there are some plug-ins that can help you, and here's a wordpress theme for HTML 5. You can also go to the HTML 5 gallery to see, because it is all built with HTML 5, you can look at its source code, deepen the understanding of HTML 5 tags. You can also continue to focus on the 51cto.com HTML 5 topic, and we will continue to update our technical applications and information coverage on HTML 5. If you're a little hesitant, check out Google's homepage, which is already HTML 5, and you can use JavaScript to declare these new tags for use. HTML 5 Tag far more than these, I hope this article can eliminate your doubts, bold use of HTML 5, only the use of more people, this specification can really effect.