Check common mistakes in HTML5 tag usage and html5 tag misunderstanding

Source: Internet
Author: User

Check common mistakes in HTML5 tag usage and html5 tag misunderstanding

Recently, I learned how to use HTML5 tags in the group. You can select several tags and learn them first. Then, I will explain them to you. this process is quite rewarding. however, HTML5 is still in the draft stage. Some new tag elements are often interpreted as changing, and even labels are added and removed frequently (such as hgroup ), at the same time, there are no good examples for using HTML5 for the existing large portal websites, so that everyone can learn more. the following is an article I have seen in html5doctor. At this stage, it may be easier to understand what the master explains. Due to lack of learning skills, a lot of things you don't understand may just be translated literally. If not, please give us some advice.

In this article, I will share with you the small errors and bad practices of html5 page building, so that we can avoid these errors in future work.


Do not set

Define styles as a simple container

A common mistake we see is to arbitrarily

Tags are replaced by tags, especially those used to enclose containers. In XHTML or HTML4, we will see code similar to the following:


01
02 <div id = "wrapper">
03 <div id = "header">
04 05
06 div>
07 <div id = "main">
08
09 div>
10 <div id = "secondary">
11
12 div>
13 <div id = "footer">
14
15 div>
16 div>

Now I see the following code:

01
02 <section id = "wrapper">
03 04 05
06 header>
07 <section id = "main">
08
09 section>
10 <section id = "secondary">
11
12 section>
13 <footer>
14
15 footer>
16 section>

Intuitively, the above example is incorrect: it is not a container. The element is a semantic section to help build the document outline. It should contain the title. If you are looking for an element that can contain pages (whether HTML or XHTML), the usual practice is to define a style for the tag directly, as described by Kroc Camen, if you still need additional elements to define styles and use them, as described by Dr Mike, div is not destroyed. If there is nothing more appropriate here, div may be your most appropriate choice. Remember this. Here we have corrected the above example by using two new roles. (Whether you need additional resources depends on your design.

Http://html5.662p.com/thread-47-1-1.html


Html5 new tag elements such as: The newly added header and footer labels are mainly used to represent the DOM semantics.
No special style
Before HTML5, both header, body, and footer must be expressed using div.
The new HTML5 labels can be expressed directly using clear labels such as header, article, and footer to make the structure of the document clearer, in the previous design, div and the property id = "container" were required. Now we can use a label similar to article to express it. It is just more convenient to act on DIV.

What labels should I remember when learning html? What is html5?

Learning html focuses on practice. In practice, we will gradually understand what is important and what is not. However, it is ineffective to remember some labels in advance.

HTM5 is a new web standard proposed by W3C. It not only adds some new tags to the original but also standardizes html tags, at the same time, HTML5 has added many exciting javascript APIs. Therefore, HTML5 can be understood as a collection of standard HTML + new javascript APIs + css3.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.