Shenbo Building HTML 5 Web pages from a zero-based platform

Last Update:2018-08-10 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Shenbo cooperation Buckle 9300727 HTML 5 is a buzzword in the field of web development, yes, a lot of people are optimistic about it, there are many industry-famous companies began to formally use HTML 5 to re-build their own sites, such as YouTube began to use HTML 5 video, Google has abandoned its own gears, began a full embrace of HTML 5 to implement offline solutions, major browser manufacturers are also beginning to support HTML 5, even the criticized Microsoft also claimed to increase the support for HTML 5 in IE 9. This article intends 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 have to understand that HTML 5 is a new semantic structure tag, including canvas, offline storage specification, and some new inline semantic markup, but because of objective reasons (mainly browser support), we have to limit the scope of the tag discussion, such as canvas, offline storage, native video or geo-location API, Not all browsers are supported.

Since the new HTML 5 tags are mostly structural, they behave somewhat like block elements, and to help deepen our understanding of HTML 5, I'll use some new structural elements in the following.

Everyone should remember the DOCTYPE (document type)

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

1	<!DOCTYPE html>

It's easy to remember, and it's not case-sensitive, it's much simpler to use today's widely available version, and it's backwards compatible.

Semantic structure

Before we dive into the markup, let's start with a brief look at the approximate structure of a Web page.

<html>

<head>

...stuff...

</head>

<body>

</p>

<ul>

<li>About</li>

<li>Contact</li>

</ul>

</p>

<h1>My Article</h1>

</p>

</p>

</body>

</html>

So with the idea of adding new tags, the creators of HTML 5 designed some new elements, so let's look at some of the key structural tags added to HTML

This tag is intended to describe the introductory information for a section or a full Web page,

<nav>

The meaning of this element is not said, 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 interpretation of <nav>, showing how to use two times on a page.

Simply put, if you use the <p id= "NAV" > tag in the page to accommodate the navigation elements, you can use <nav> to replace them.

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

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

According to WHATWG's comments, the article element is a part of a document or website that is packaged to form a section, such as a magazine or newspaper article, or a blog post.

Remember, there can be more than one article element 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 accidentally error.

<aside>

Another obscure marker is aside, which represents something unrelated to the main text flow of a document, which is equivalent to a parenthesis comment, footnote, reference, comment, or anything like a sidebar, which can be used for all of these situations based on WHATWG's comments,<aside>.

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

Put it all together

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

<!DOCTYPE html>

<html>

<head>

...stuff...

</head>

<body>

</header>

<nav>

<ul>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

<h1>My Article</h1>

</article>

</section>

</footer>

</body>

</html>

The style of the new tag

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

Below our team header applies some styles:

header {

display: block;

font-size: 36px;

font-weight: bold;

}

1	<navclass="main-menu">

Then apply a style:

nav.main-menu {

font-size: 18px;

}

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

document.createElement(‘header‘);

document.createElement(‘nav‘);

document.createElement(‘section‘);

document.createElement(‘article‘);

document.createElement(‘aside‘);

document.createElement(‘footer‘);

</script>

Although the IE problem has been solved, but as far as I know, Firefox 2 in the Gecko rendering engine still has a bug, there are two solutions, but neither of these methods is ideal, considering that the number of users of Firefox 2 is very small, you can completely ignore this bug.

Now you can 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, if you want to refactor the CNN homepage, it may not be very realistic, it is better to wait for a better browser support, but if you are renovating your blog system, then you can try, if you use WordPress, There have been some plugins available to help you, here's a wordpress theme for HTML 5.

You can also go to the HTML 5 Gallery (http://html5gallery.com/) to see, because it is all built with HTML 5, you can look at its source code, to deepen the understanding of HTML 5 tags. You can also continue to focus on 51cto.com's HTML 5 feature, and we will continue to update technical applications and news reports about HTML 5.

If you're still a little hesitant, go to Google's homepage, which is already HTML 5, and if you're safe, you can use JavaScript to declare these new tags. HTML 5 Tags far more than these, I hope this article can eliminate your doubts, bold use of HTML 5, only use more people, this specification can really work.

Shenbo Building HTML 5 Web pages from a zero-based platform

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More