What you don't know about HTML5 and the things in the HTML, the third article

Article Introduction:

About HTML5 believe that everyone has been familiar with, but his real meaning in the specific development will have what role? With respect to HTML, what new definition and new ideas does he have in it? Why do some experts think that when HTML5 is completely complete, all the work can be achieved in a true cloud way? Do you have any idea about this series of questions?

This series of articles will answer all the things you don't know about HTML5 and HTML, including: HTML5 's new ideas and ideas, the purpose of HTML5 's new tags and the application of specific development scenarios, HTML5 and CSS3 's emotional experience (collocation), Includes some small privacy of HTML5 's father html (things you may not know in development);

Hello , everyone, and see you again, What can I tell you about today that you may not know about? Now let's see.

1) What are the HTML5 <nav>, <article>, <sections>, <aside>, <footer>, and the use of these tags?

2) HTML5 Universal container <div>, <span> survival meaning in HTML5?

3) How can I improve accessibility with aria?

First question:

HTML5 <nav>, <article>, <sections>, <aside>, <footer> These tags are understood and useful?

Small in writing these several labels when really think and think, I want to know how to write to be very simple to understand the HTML5 in the several labels to write, and also read the previous article about the

Feel if for a person who has not contacted HTML5 may feel a bit messy, and to already know is HTML5 of people feel nothing new places, so feel like before the wording of a little chicken;

So today is going to change the wording, with a completely small white wording to tell the question of these several tags;

The first understanding of this several tags:

HTML5 designers can be said to be well-intentioned, they seriously analyze the HTML4.0 out of the problem, that is, the current way to write the popular page is <div>+css; we are not difficult to find as long as this can be used to write the page is simple and beautiful

There is no cumbersome tag in it, what function you need to add div tag on it, and what is a div? This is our next question in detail; The crux of the problem is that the DIV has no semantics, that is, what he is going to do is up to the developer; This creates a serious development specification is not unified, that is, the page navigation bar is a div, the page sidebar is a div, the only thing that distinguishes them is the ID, Perhaps some interested developers will be, Div's ID write the semantics of understanding, such as: the Navigation bar ID with "NAV", sidebar ID with "Aside", this kind of writing to other developers seems very good, because see ID can know what this div is used for But still a large part of the developers will write such as: "Div1", the ID of the sidebar with: "Div2", so the wording of the user may be no different, because developers know what they represent, and for other developers it is really devastating, in English is "Reading the Fucking code", and the developer itself may be a long time do not know what the meaning of, but the next time they will be developed to do so;

Back to the point, after the introduction of the above you may already know why in the HTML5 quote above the label, is to solve the problem of the development norms are not unified and to enhance the semantics, some may ask why HTML5 so care about the meaning? What are the benefits of using the label above? The answer, in a very simple words, is: to unify the norms and the emergence of new functions, (if you do not understand this sentence, please continue to pay attention to my blog oh, slowly understand, this with a sentence and two words also not clear);

These tagging functions are a part of the DIV function, they don't have any default style, except that it will leave the text in a separate line;

Second, the semantics and usage of these tags:

nav: Tag navigation (this tag is required for the important Link group in the Web page) contains the usual <ul> unordered list of him, of course, if the breadcrumb link is needed <ol> ordered list As long as you remember the semantics of your own flexible play is possible; the same way as the

Special Note: 1) HTML5 specification is not recommended for auxiliary footer links with <nav>;2) THML5 does not allow <nav> nested in the address tag;

article: the article tag tag (represents a document, page, application, or a separate container in a Web site, in principle, aggregation), when friends use his time to satisfy the above usage will not be wrong, the wording and the previous article in the

Special Note: 1) Article this tag can be nested use, but they must be part of the relationship with the whole, 2) also can not be used in the <address> tag, 3) He and <section> tags easily confused so need attention; I'll tell you how to make a choice in the middle of this two.)

section: a block definition tag (which represents a general block of a document or application), he generally has a set of similar topics, usually containing a title, which can be used to write: chapters of the article, various tabs in the tabbed dialog, and similar functions Here you will find him and article this tag very much like right? So how do you apply them correctly in development?

In fact, it's very simple. You think: If you need a separate module in your page to implement a separate function that is high aggregation in the case of <article> other time use <section>; as long as you think so and use it is no problem;

aside: Define the sidebar label (indicating that part of the content and the body of the page is not a great relationship, but can exist independently), with him can be achieved: the promotion of reference, sidebar, related articles linked boxes, ads, links and so on;

Special Note: 1) If multiple aside tags should be used after the main content, so as to facilitate the search and promotion of SEO accessibility; 2) If the image that is related to the main content of the article needs to use the <figure> (later article will introduce) label instead of using him;

footer: Footer label (tag corresponding to header label) the functions he can implement are: Appendices, indexes, copyright pages, license agreements, etc. The wording is the same as the

Special Note: 1) The footer does not have to be at the end of the element, but usually, 2) he cannot be placed in the

Second question:

HTML5 Universal Container <div>, <span> survival meaning in HTML5?

The DIV tag has been in HTML for a long time, and his whole spell is (division), and many of the new tags in HTML5 are a unified definition of his functionality, because the DIV itself has no semantics; but you can add CSS to it. , so that we can do a good job of the page to make some of our ideal effect; then why does he exist in HTML5? At some point you will find that you use any of the tags in the HTML5 is inappropriate for the semantics you need now, so at this point you need to use the div tag, Say Div so in order to talk about his corresponding <span> this tag, he is also a non-semantic tag function and the role of the same as Div is just the use of different: Div is a block-level non-semantic container, span is the phrase of the non-language container; I will be in the detail to say some span) tags;

Usage of Div believe that friends use more than I know so here about his usage is not much to say just for the use of Div in HTML5 I make a few suggestions:

1) If you feel that the new label in HTML5 is better than using a div, you must use a new label, because the DIV does not have any semantics, this is not advocated by HTML5;

2) If the effect is required, you can add a div tag to the HTML5 of the new label, which will not have much effect on the semantics of HTML;

Question three:

How can I improve accessibility with aria?

I do not know if my friends have found that I am writing HTML5 's first blog has been speaking of semantic meaning, is the semantics really so important? Through the semantics and how to improve the accessibility and Zenga seo search? Because now some SEO and browser or screen reader (an article reader for people with disabilities) are in accordance with HTML5 new standards to do some new features, they will be very new semantics directly with their own function, if the Web site developers do the same, then your website application will be greatly zenga;

The above also emphasizes the importance of semantics; let's tell you a little bit more about the safeguarded semantics, so be sure to take a good look. Because this little trick friends don't necessarily know:

Concept Description: Wai-aria (Web accessibility Initiative's Accessible Rich Internet applications) accessible web-rich Internet app for the accessibility initiative, called ARIA, He is a technical specification; Based on the semantics provided by HTML, he will use attributes to fill some of the semantic gaps;

Now is the usage of writing

1) Proper use of the iconic role in Aria:

1) Role = "banner" (banner)

2) role= "Navigation" (navigation)

3) role= "main" (main)

4) role= "complementary" (supplementary content)

5) role= "ContentInfo" (content information)

Tip: A landmark character is just one of the ARIA specifications if you're interested, you can go to the official website to read it (address: www.w3.org/TR/wai-aria/)

2) include screen reader testing in your daily development (because he is the most direct reflection of your site's semantic writing good things)

3) correctly set the ID and class for the label (semantics must be obvious);

4) Correct use of class and the micro-format provided by him;

The micro-format of class, because a lot of people know or think that the properties of class can only be applied to a set of elements CSS style, in fact, it is not the case, in fact, he can not reference the extra tags have strong semantics, this is the micro-format, The micro-format is to use the contract class name to mark a piece of HTML to safeguarded with the application, intelligent search and search robot interaction;

The use of micro-format can take a look at this URL: http://microformats.org

So today is the point, do not know how to read this article you have any help? Believe that through these articles feel you know a lot about HTML5?

In the next article I will talk about some of the HTML5 and text related things Oh, I believe there will be something you do not know, may also be based on your comments or questions in the next article to answer OH;

Thank you for your reading and look forward to seeing you next time.

If you have any questions about this technology, the first time to get an article update, a day to publish a technical Daniel's original article, more technical information sharing .

Welcome to the personal public platform : Programmer Interaction Alliance , sweep the QR code or search number below Coder_online can follow , Online to help you solve technical difficulties, to Daniel directly spot.

What you don't know about HTML5 and the things in the HTML, the third article