Tutorial on creating a webpage using HTML5.0

Comments: To help you understand some of the new things in HTML 5 today, we are now starting to use some new structural elements. The first thing we need to do when creating HTML 5 documents is to use the new document type.

According to the people you asked, HTML 5 is not the next important step towards creating a more semantic network, but a series of incomplete tags and tags that make the network in trouble.

The argument between the two parties is that few sites use HTML 5 in the natural environment, so the theoretical solution to the problems they are aware of is still largely untested.

Even so, it is not difficult to find out the benefits and potential problems of the Next Generation Network marking tool.

Content

1. What is the difference between HTML 5?

2. Finally, a document type that anyone can remember

3. Basic Semantic Structure

1.

2. <nav>

3. <section>

1. <article>

2. <aside>

3. <footer>

4. Put them together

5. Write 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? First off, what do we mean by HTML 5? Theoretically, we express everything-new semantic structure tags, such as canvas or offline storage API specifications, and new inline semantic tags. However, the actual cause (PS: browser support problems) is limited to structure labels. Canvas, offline storage, local videos, and geographic location APIs are all wonderful, but they cannot be supported by all browsers.

"But wait," you said. "Most browsers do not support new structural elements !" This is true, but most of them will be happy to accept any tags you want to create. You can even use IE6 to process new tags, even if you want to use CSS to set Styles, you need some JavaScript help.

When you set a style for a new tag, remember that the unknown tag does not have a default style in most browsers. They are also considered row-level elements. Even so, since most of the new HTML 5 tags can be constructed, we will give them block-level element behavior. The solution is to confirm that the CSS style contains the display: block ;.

To help you understand some of the new things in HTML 5 today, we are now starting to use some new structural elements.

Eventually, a document type that anyone can remember

The first thing we need to do when creating HTML 5 documents is to use the new document type. Now, if you still clearly remember the document type of HTML 4 or XHTML 1. x, you are really more naughty than us. Every time we create a new page, we must open an old file, cut and paste the document type definition.

This is really painful and why we like the new HTML 5 document type. Are you ready? He appears:

It is not hard to remember. Easy to understand. Case Insensitive.

This idea is to stop HTML versioning and make backward compatibility easier. In the long run, success is another thing, but at least it saves the average time you enter.

Basic Semantic Structure

We have defined our page as an HTML 5 document. So far, everything has been good. What are the new tags we have heard about?

Before learning about the new tag, think about the structure of your webpage, like this:

This is useful for presentation, but what if we want to know some questions about page elements?

In the above example, we added an ID for all our structure div. This is common among experienced designers. ID provides an anchor that can be used to apply a style to a special section on the page. ID acts as the basic pseudo-semantic structure. The clever parser will view the ID attribute of the tag and try to guess their meaning. However, it is difficult to find a different ID name for each site.

This is why the new structure label comes.

When recognizing that these IDs have become a convention, the creators of HTML 5 go further and turn some of these elements into their own tags. Here is a quick summary of the new tag that takes effect in HTML 5:

<Header>

The header label is designed as a container for introducing information about a chapter or a whole web page. <Header> A tag can contain either a typical sign or a flag at the top of most pages, or anything that introduces a unit's slogans and opening remarks. If you still use <div id = "header"> on your page, you can replace it with <Nav>

The nav element is very obvious. It is your navigation element. Of course, there is some controversy about what is regarded as navigation. There is a basic website navigation, but in some cases there may be page navigation elements. The HTML5 founder WHATWG recently revised the explanation of <nav> to demonstrate how to use it twice on the same page.