Deep understanding of html5 tags and deep understanding of html5 tags

Deep understanding of html5 tags and deep understanding of html5 tags

Introduction:

I believe everyone is familiar with html5, but what is its true significance in specific development? What new definition and concept does html have? Why do some experts believe that after html5 is fully completed, all work can be achieved in the real cloud mode? Have you understood this series of questions?

This series of articles will answer all the things you don't know about html5 and html. They will include new ideas and ideas such as html5, the intention of the new html5 tag and the application in specific development scenarios, the emotional experience of html5 and css3 (usage matching ), including some small privacy of html5 father html (things you may not know during development );

 

Hello everyone, I have met you again. Today I will tell you what you may not know? Let's take a look.

1) how to understand and use the <nav>, <article>, <sections>, <aside>, and <footer> labels in html5?

2) What are the meanings of HTML 5 Universal containers <div> and <span>?

3) How to Use ARIA to improve accessibility?

 

First question:

What are the meanings and usefulness of <nav>, <article>, <sections>, <aside>, and <footer> labels in html5?

When I wrote these labels, I really thought about it. I want to know how to write these labels in html5; at the same time, I also read the

It seems that a person who has never been familiar with HTML5 may feel a little messy, and there is no novelty for those who already know HTML5, therefore, it seems that the same writing style is a little tricky;

So today I plan to write another code, and I will use the full-white method to describe the tags in the problem;

Understanding of the first pair of tags:

HTML5 designers can say they have a good time. They carefully analyze the problems in HTML4.0, that is, the current method of writing pages to popular pages is <div> + css; it's not hard to find that if we use this, we can simply write the page beautifully.

There is no complicated tag in it. You can add the div Tag if you need any function. What is div? This is a detailed explanation of the next problem. The key to the problem is that div does not have any semantics, that is to say, all the things he wants to do are determined by developers. This leads to serious inconsistency of development specifications, that is to say, the navigation bar of the page is div, And the sidebar of the page is div. The only difference between them is id. Maybe some developers will understand the meaning of the div id, for example: the id in the navigation bar uses "nav" and the id in the sidebar uses "aside". This method is good for other developers, because you can see the id, you can know what the div is for. However, most developers write this as follows: "div1" is used for the navigation bar id and "div1" is used for the sidebar id: "div2", there may be no difference in this writing for users, because developers know what they all represent, and this is really a disaster tolerance for other developers, in English, it is "reading the fucking code", and developers may not know what it means for a long time, but they must have done this in the next development;

Back to the topic, after the above introduction, you may already know why the tag above is referenced in HTML5, to solve the problem of inconsistent development specifications and to enhance semantics, some may ask why HTML5 cares about semantics? What are the benefits of using the above labels? The answer is in a very simple way: to unify the appearance of norms and new features; (if you do not understand this sentence, please keep an eye on my blog, I will understand it later. I cannot tell you either one sentence or two sentences );

These tag functions are part of the div function. They do not have any default styles, except for making the text start with another line;

The semantics and usage of these labels:

Nav: indicates the unordered list contained in the tag navigation (corresponding to an important link group on the webpage; of course, the <ol> ordered list is required for the breadcrumb link. You only need to remember the meaning and use it flexibly. The method is the same as that of the

Note: 1) HTML5 standards do not recommend <nav> for secondary footer links; 2) THML5 does not allow <nav> to be nested in the address label;

Article: indicates an article tag (indicating an independent container in a document, page, application, or website, which is aggregation in principle ), when friends use him, they will not make mistakes when satisfying the above usage. The same way is written as the

Note: 1) The article label can be nested, but it must be partially related to the whole; 2) it cannot be used in the <address> label; 3) he and <section> labels are easy to confuse, so you need to pay attention to them. (I will explain how to make a choice between the two ;)

Section: A block definition label (indicating a document or a general block of an Application). Generally, it contains a set of similar theme content. Generally, it contains a title; you can use this label to write: articles, tabs in the tag dialog box, and other similar functions. Here you will find that the label is similar to the label of article, right? So how can they be correctly applied in development?

In fact, it's quite easy to think like this: if you need a separate module in your page to implement a separate function, that is, high aggregation, you can use <article> <section> for other functions; as long as you want to use it in this way, there is no problem;

Aside: defines a sidebar label (indicating that some content does not have a great relationship with the page subject, but it can exist independently). It can be used to implement: link boxes, advertisements, and links of related articles on the promotion reference, sidebar, and so on;

Note: 1) if multiple aside tags are used, they should be behind the main content, which is conducive to SEO search and improved accessibility; 2) if the image is related to the main content of the article, use the <figure> label instead of the label described later;

Footer: The footer label (the label corresponding to the header label) can implement the following functions: Appendix, index, copyright page, and license agreement. The syntax is the same as that of the

Note: 1) the footer is not necessarily at the end of the element; but it is usually like this; 2) it cannot be placed in the

 

Second question:

What are the meanings of HTML 5 Universal containers <div> and <span>?

The div tag has appeared in HTML a long time ago. Its full division is (division), and many new tags in HTML5 are the unified definition of its functions, because div itself does not have any semantics; but you can add css styles to it; this will make some of our ideal results for the page; why does HTML5 still exist? That is because, in some cases, you may find that any tag in HTML5 is not suitable for the semantics you need, therefore, we need to use the div label at this time. When talking about the div, we need to talk about the <span> label corresponding to it, it is also a function and function of a tag without any semantics. It is the same as div, but its usage is different: div is a block-level silent container, and span is a phrase-less container; (I will talk about some span in detail later) labels;

I believe that my friends are familiar with the usage of div, so I will not talk about its usage here. I only provide some suggestions for using div in HTML5:

1) if you think it is better to use a new tag in HTML5 than to use a div, you must use a new tag. Because div does not have any semantics, This is not advocated by html5;

2) If the effect is needed, you can add a div tag outside the HTML5 new tag, which will not have a big impact on the semantics in html;

 

Third question:

How can I use ARIA to improve accessibility?

I don't know if my friends have found that I have been talking about semantics since I wrote the first HTML5 blog. Is semantics really so important? How can I improve access and search by Zeng Jia SEO through semantics? Because some SEO and browsers or screen readers (an article reader for people with disabilities) are currently making some new functions according to the new HTML5 standards; they will have a new semantics that corresponds directly to their own functions. If Web developers do the same, then your website will be highly applied;

The above emphasizes the importance of semantics. Here we will tell you a better hint of strong semantics. It must be nice, because this hint is not necessarily known by friends:

Concept Introduction: WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Applications) Accessibility webpage Initiative Accessible Rich Internet Applications, referred to as ARIA, he is a technical specification; based on the semantics provided by HTML, he uses attributes to fill in some semantic gaps;

Now is usage writing

1) correct use of the landmark role In ARIA:

1) role = "banner" (banner)

2) role = "navigation" (navigation)

3) role = "main" (subject)

4) role = "complementary" (Supplemental content)

5) role = "contentinfo" (content information)

Tip: the landmark role is only one of the ARIA specifications. If you are interested, go to the official website to read it (Address: www.w3.org/TR/wai-aria /)

2) include the screen reader test in your daily development; (because it is the most direct reflection of the meaning of your website)

3) correctly define the id and class for the tag (the semantics must be obvious );

4) correctly use the class and its microformats;

Many people know that class attributes can only apply CSS styles to a group of elements. This is not the case; in fact, he can also make a strong sense without referencing additional labels. This is a microformat, the standard style uses the agreed class name to mark an HTML block so that Zeng Qiang can interact with applications, smart search, and search robots;

About the use of micro-channel can look at this URL: http://microformats.org

 

 

So let's talk about it today. I don't know if it helps you read this article? I believe you have learned a lot about HTML5 through these articles?

In the next article, I will talk about some text-related things related to HTML5. I believe there will be something you don't know. I may also answer your questions or comments in the next article;

Thank you for your reading. We are looking forward to seeing you next time;

 

If you have any questions about the technology mentioned in this article, you can get an article updated as soon as possible. Every day, you can publish an original article about the technology and share more technical information.

Welcome to the personal public platform: the programmer InterAction alliance. Scan the QR code below or search for the coder_online code to focus on it. It helps you solve technical difficulties online and solve problems for Daniel.