Tutorial on making web pages with HTML5.0_html5 tutorial skills

Depending on who you ask, HTML 5 is either the next big step toward creating a more semantic web, or it’s just an incomplete hodgepodge of tags and markup. The network is in trouble.

The problem for both sides of the argument is that very few sites are using HTML 5 in a natural environment, so theoretical solutions to the now-recognized problems remain largely untested.

That said, it’s not hard to see the benefits and potential pitfalls of next-generation web markup tools.

Content 1. What’s different about HTML 5?

2. Finally, a document type that anyone can remember

3. The most basic semantic structure

1.

2.

3.

1.

2.

3.

4. Put them 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 different about HTML 5? First of all, what do we express through HTML 5? First off, what do we 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. However, we limit the actual reason (PS: browser support issues) to structure tags only. canvas, offline storage, local video or geolocation APIs are all great, however they are not yet supported uniformly by all browsers.

“But wait” you say, “most browsers don’t support the new structural elements either!” It’s true, but the vast majority of them will happily accept whatever you want to create Label. Even IE6 can handle new tabs, although if you want to style it with CSS, you'll need a little help from JavaScript.

One thing you need to remember when styling new tags is that unknown tags do not have a default style in most browsers. They are also considered row-level elements. Still, since most of HTML 5's new tags can be constructed, we'll give them the behavior of block-level elements. The solution is to make sure you include display:block; in your CSS style.

To help understand some of the new stuff in HTML 5 today, let’s get down to business now and start using some new structural elements.

Finally, 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 types, you are a bigger naughty guy than we are. Whenever we create a new page, we have to open an old file, cut and paste the document type definition.

This is a real pain, and why we love the new HTML 5 document type . Are you ready? He appears:

It won’t be too difficult to remember. Simple and easy to understand. Not case sensitive.

The idea is to stop HTML versioning and make backward compatibility easier. Whether it's successful in the long run is another matter, but at least it saves you the average time of typing.

The most basic semantic structure We have defined our page as an HTML 5 document. So far, so good. Now, what exactly are these new labels we've been hearing about?

Before we delve into new tags, think about the structure of your average web page, something like this:

This is fine for presentation purposes, but what if we want to know something about what the page element contains?

In the above example, we added IDs to all our structural divs. This is common among knowledgeable designers. The purpose is twofold, first, the ID provides an anchor that may be used to apply styles to particular paragraphs of the page, and second, the ID acts as a basic pseudo-semantic structure. A sophisticated parser will look at the tag's ID attribute and try to guess what they mean, but that's difficult when the ID names are different for each site.

This is where the new structure tag comes in.

Recognizing that these IDs had become a convention, the creators of HTML 5 went a step further and made some of these elements their own tags. Here's a quick summary of the new tags taking effect in HTML 5:

The head tag is designed as a container for introductory information about a chapter or an entire web page. The tag can contain anything from your typical logo or tagline at the top of most pages, to taglines and opening lines that introduce a chapter. If you still use in your page, you can use instead of

The nav element is pretty obvious, it’s your navigation element. Of course there is some debate about what counts as navigation. There is a basic site navigation, but in some cases there may also be page navigation elements. The creators of HTML5, WHATWG, have recently modified the explanation of to show how it can be used twice on the same page.

For more information about nav and the heated debate about HTML5, see Jeffrey Zeldman’s article on the nav element .

If you are still using the tag to contain your page navigation, you can use the concise tag instead.

Section is probably the most obscure of the new tags. According to HTML 5 definition , a chapter is a topic collection of content, usually after the header tag and before the footer tag. However, sections can be nested within each other if necessary.

In our example above, the div marked with "content" is a good choice to become a section. In addition, within that section, we can add sections according to the content.

Contrary to WHATWG's comment, the article element can contain "a piece of content that forms a separate part of a document or site; for example, a magazine or news article, or a blog entry."

Remember that a page can have multiple article tags; for example, a blog homepage may have the latest ten articles, each of which is contained in an article tag. Articles can also be divided into multiple paragraphs by using the section tag, however you need to be a little careful when planning your structure, otherwise you can easily end up with some ugly hodgepodge of tags.

Another rather obscure tag, the aside element is used for content that is "irrelevant to the content of the main body flow that makes up the document." That means an additional comment, inline footnotes, citations, annotations or more typical sidebar content like the one you see on the right side of this article.

According to the WHATWG comments, it appears that can be used in all of these situations, although the citations in your sidebar are very different from the tag cloud.

No one said HTML 5 is perfect!

The usefulness of Footer should also be obvious, except maybe you don’t know that you can have multiple footers. In other words, in addition to the main subscripts typically found at the bottom of most pages, paragraphs can also contain subscripts.

Put them together Let’s rewrite our original example using new tags:

Very clear and easy to understand, isn’t it? Some notes: We can include our My Article title in the header tag. I didn’t do this because the h1 element already conveys the meaning of the title, but if you also have the publication date, byline, or other data at the top of your article, adding a header container tag to the tag set is a good option.

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

Write styles for new tags In most browsers, all you need to do is simply define your styles as you would normally do to apply a style sheet on a new tab. But please make sure to add the display:block; rule to every element, no matter what, from now on. Over time, as browsers begin to standardize and support new elements, that won't be necessary.

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 style a navigation separately, you can easily add a class or style to the tag, like this:

Then you can apply a style:

Compatible with older browsers But wait, what about IE? These styles don't work under IE6 at all. If you still need to support legacy browsers like IE6, here's a solution. IE6 parses and displays these tags fine, but you can't set any CSS on them. The solution is to use a little JavaScript.

We just need to ask IE to style the HTML 5 tag we created using the createElement method. Add this in the head tag of your HTML 5 file. Alternatively, you can save it in a specific file and include it that way.

I know what you're thinking: "Brother, you didn't define a MIME type for that script tag at all."

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 clutter your script tags with attributes (unless your script isn't JavaScript).

This solves the problem with IE, but we're not out of the woods. It turns out there is a bug in the Gecko rendering engine that causes some versions of Firefox 2 and Camino to get stuck on these tabs.

There are two ways to handle this bug, neither of which is ideal. For more details, please see this article by HTML5doctor . This article also comes with a handy script that enables all HTML 5 elements.

Keep in mind that although Firefox 2 usage has quickly dropped below 10% of all site traffic, simply ignoring this bug may still depend on your site's visitors.

Now you can use HTML 5, but will you use it? The short answer is: we do.

The more complicated thing is: it depends on the site. If you're accused of remaking the CNN homepage, well, you might resist a little until browser support gets better. But if you want to revamp your blog, we have your back. Here are some WordPress plugins that can help you if you are using such a popular publishing system. Here is an HTML 5 theme created by Jeff Starr.

Also, try the site-focused HTML 5 Gallery and check out the source code to see what they've done.

Still, if IE’s shortcomings stop you, consider this: even Google is using HTML 5’s document type on their main search page. Even if you don't use all the new structural tags, you can at least take advantage of concise script declarations and some non-structural semantic tags that we'll cover next time.