Deep understanding of html5 tag meaning

Deep understanding of html5 tag meaning

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) In html5

,, ,, Understanding and use of these labels?

 

2) html5 containers

What is the meaning of survival in HTML5?

 

3) How to Use ARIA to improve accessibility?

 

First question:

In html5

,, ,, Understanding and use of these labels?

 

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

Label description;

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 way to write pages that are currently popular.

+ Css

 

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 way 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: Mark navigation (this tag is required for an important link group on the webpage ).

• Unordered list; of course, it is required if it is a breadcrumb Link
  1. Ordered list. You only need to remember the meaning and use it flexibly. Labels are written in the same way;

      

     Note: 1) HTML5 standards do not recommend secondary footer links

     ; 2) THML5 does not allow 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 a friend uses him to meet the above usage, there will be no errors.

     Labels are written in the same way;

     Note: 1) the label article can be nested, but they must be partially related to the whole; 2) They cannot be used.

     Tag; 3) He and Labels are easy to confuse, so pay attention to them. (I will talk about 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, it will be used.

     Use it for other purposes 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) for images related to the main content of the article, use

     (This will be introduced in later articles) label instead of using it;

      

     Footer: The footer label (the label corresponding to the header label) can implement the following functions: Appendix, index, copyright page, and license agreement. Statement in the previous article

     Labels are written in the same way;

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

     Tags; they cannot be nested with each other, or Element;

      

      

     Second question:

     Html5 container

     What is the meaning of survival in HTML5?

      

     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, so we need to use the div label at this time, and say that the div should talk about the label corresponding to him, 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;