Making Web pages with HTML5

Content

　　

1. What is the difference between HTML 5?
2. In the end, a document type that anyone can remember
3. The most basic semantic structure
1. 2. <nav>
3. <section>
1. <article>
2. <aside>
3. <footer>
4. Put ' em together.
5. Writing styles for new elements
6. Compatible with old browsers
7. Now you can use HTML 5, but will you use it?

What is the difference between HTML 5?

First, what do we express through HTML 5? What do us mean by HTML 5? In theory, we express everything-new semantic structure tags, such as canvas or offline storage API specifications, and new inline semantic tags. Nevertheless, the actual reason (PS: browser support issues) is limited to the structure tag. Canvas, offline storage, local video or geolocation APIs are wonderful, yet they are not supported by all browsers.

"But wait," you say, "Most browsers don't support new architectural elements!" This is true, but most of them will be happy to accept any tags you want to create. Even IE6 can handle new tags, although if you want to use CSS to set styles, you need a bit of javascript help.

When you set a style for a new label, one thing to remember is that the unknown tag has no default style in most browsers. They are also considered to be line-level elements. However, since most of the new tags in HTML 5 can be constructed, we will let them have the behavior of block-level elements. The solution is to make sure that you include the Display:block in the CSS style;.

To help understand some of today's new HTML 5 gadgets, let's get down to business and start using some new architectural elements.

In the end, a document type that anyone can remember

The first thing we need to do to create an HTML 5 document is to use the new document type. Now, if you clearly remember the HTML 4 or XHTML 1.x document type, you are a more mischievous ghost than we are. Whenever we create a new page, we have to open an old file, cut and paste the document type definition.

It's really painful and that's why we like the new HTML 5 document type. Are you ready? He showed up:

It's not too hard to remember. Simple and easy to understand. is case-insensitive.

The idea is to stop HTML versioning and make backwards compatibility easier. Success is another thing in the long run, but at least he saves the average time you enter.

The most basic semantic structure

We have defined our page as an HTML 5 document. So far, everything is fine. Now, what exactly are the new tags that we've heard about?

Before we dive into the new label, think about the structure of your general Web page, like this:

This is good for the show, but what if we want to know something about the page element?

In the example above, we have added IDs for all of our struct div. This is a common thing in a knowledgeable designer. For two purposes, first, IDs provide anchors that can be used to apply styles to special paragraphs of a page, and second, IDS act as basic pseudo semantic structures. The smart parser will look at the ID attributes of the tags and try to guess what they mean, but it's hard when each site's ID name is different.

This is the reason for the new structure tag coming.

When the recognition of these IDs became routine, the creators of HTML 5 went further and made some of these elements into their own label. Here is a quick summary of the new tags in effect in HTML 5:

　　

The head tag is designed as a container for information about a chapter or an entire page.

The

tag can include a typical logo or slogan from the top of most pages, and anything to introduce a chapter's slogan and Prologue. If you are still using it on your page, you can use to replace

　　

Nav element is very obvious, this is your navigation element. Of course what is counted as navigation there is some controversy, there is a basic site navigation, but in some cases there may also be page navigation elements. HTML5 's founder, WHATWG, has recently been revising

explains how to use two times on the same page.

For more information about NAV and the intense debate about HTML5, see Jeffrey Zeldman's article on NAV elements.

If you're still using

tags to include your page navigation, you can use the simple tag to replace.

　　

The section may be the most ambiguous in the new label. According to the HTML 5 definition, a chapter is a collection of topics for a content, usually after the header tag, before the footer tag. However, if necessary, the section can also be nested with each other.

In our example, the div labeled "content" is a good choice to become a section. In addition, in that section, depending on the content, we can add sections.

　　

Eradicate WHATWG annotations, article elements can contain "a piece of content that makes up a document or a separate part of the site; for example, a magazine or news article, or a blog entry." ”

Remember that a page can have multiple article tags, such as a blog home page may have the latest 10 articles, each included in a article tag. Article can also be broken into multiple paragraphs by using a section label, but when you plan your structure you need to be a little more careful, or you may easily end up with a hodgepodge of ugly labels.

　　

Another rather vague label, the aside element is used for "unrelated to the content that makes up the main body stream of the document." That means an additional comment, inline footnotes, references, annotations, or more typical sidebar content as you can see on the right side of this article.

According to WHATWG's comments, it looks

can be used for all of these situations, although the references in your sidebar and the tag cloud are very different.

No one says that HTML 5 is perfect!

　　

The usefulness of footer should also be obvious, except that you may not know that you can have multiple feet. In other words, a paragraph can contain a foot mark in addition to the main pin that is usually seen at the bottom of most pages.

Put ' em together.

Let's rewrite our original example with the new tag:

It's very clear and easy to understand, isn't it? Some comments: We can include the header tag in our

title. I didn't do this because the H1 element has already expressed the meaning of the title, but if you have a release date, branding or other data at the top of your article, adding a header container tag to the tab set is a good choice.

Also note that we can add a second footer element under the article element to include page navigation, related articles, or other content.

Write a style for a new label

In most browsers, all you have to do is simply define your style for applying stylesheets to new labels, as you normally do. But make sure to add Display:block to each element, anyway, from now on. After a while, when the browser starts to standardize and support the new elements, it doesn't have to be.

For example, let's apply some styles to our header:

Remember, you can still add class and ID attributes to these tags. So, if you want to set a style individually for a navigation, you can easily add a class or style to the tag, like this:

Then you can apply a style:

Compatible with old browsers

But wait a minute, what about IE? these styles do not work at all under IE6. If you still need to support browsers like IE6, there's a workaround here. IE6 parse and show these tags okay, but you can't set any CSS on them. The workaround is to use a bit of JavaScript.

We just need to get IE to set the style for the HTML 5 tag we created using the CreateElement method. Add this in the Head tab of the HTML 5 file. Alternatively, you can save it in a specific file and include it in this method.

I know what you're thinking: "Brother, you don't have a MIME type defined for that script tag. ”

You don't need to do these things in HTML 5 at all. In HTML 5, all scripts are assumed to be type= "Text/javascript", so there's no need to let attributes mess up your script tags (unless your script isn't JavaScript).

This solves the problem of IE, but we are not out of the woods. It is now proven that the Gecko rendering engine has a bug that causes some versions of Firefox2 and Camino to be stuck on these tabs.

Here are two ways to handle this bug, none of which is ideal. For more details, check out this article in Html5doctor. This article also comes with a handy script for all HTML 5 elements to work.

Remember, although Firefox 2 usage quickly drops below 10% in all site traffic, simply ignoring the bug may still need to be based on your site's visitors.

Now you can use HTML 5, but will you use it?

The short answer is: we will.

The complicated thing is: it depends on the site. If you accuse yourself of re making the CNN homepage, well, you may have a bit of resistance until the browser's support gets better. But if you are going to give your blog a facelift, we support you. There are also some WordPress plug-ins that can help you if you are using such a popular publishing system. Here is an HTML 5 theme made by Jeff Starr.

Also, try the site-oriented HTML 5 gallery and look at the source code to see what they have done.

Still, if IE's flaws stop you, consider this: even Google uses the HTML 5 document type on their main search page. Even if you don't use all the new structure tags, you can at least use the concise script statement and the next time we'll introduce some unstructured semantic tags.