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 the writing of these labels when really think and think, I want to know how to write to be very simple to understand the HTML5 in the several tags to write clear, but also read the previous article about the
nav: Tag navigation (this tag is required for an important link group in the Web page) contains a list of the most common <ul> unordered lists of his or her, of course, if it is a breadcrumb link, it is necessary to use the <ol> sequence table; As long as you remember the semantics of your own flexible play is possible; The same way the
article:The article tag tag (represents a document, page, application, or a separate container in a Web site, in principle, aggregation), when friends use him to satisfy the above usage will not be wrong, the wording of the previous article in the same way as the
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 does not have a large relationship with the body of the page, but can exist independently), with which he can achieve: the promotion of reference, sidebar, related articles linked boxes, ads, links and so on; Special tips: 1) If you use multiple aside tags should be behind the main content, this is advantageous Search and enhance accessibility to SEO; 2) If the image that is related to the main content of the article needs to be used <figure> (the following article will introduce) the label instead of using him;
Footer: The footer label (the label corresponding to the header label) can be implemented with the following functions: Appendices, indexes, copyright pages, license agreements, etc. The wording is the same as 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 detail to say some of the span) tag; the use 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 the HTML5 I make a few suggestions: 1) If you think the new label in HTML5 is better than using a div, be sure to use a new tag, because the DIV does not have any semantics, and this is not advocated by HTML5; 2) If the effect is required, you can add a div tag to the outside of the HTML5 new tag. This does not have much effect on the semantics of HTML;
question three:
How can I improve accessibility with aria?
Don't know if my friends have found that I am writing HTML5 's first blog has been speaking of semantic meaning, is it 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; Above also emphasizes the importance of semantics; let's tell you a little bit better safeguarded semantics, so be sure to look at it.: Concept Description: Wai-aria (Web Accessibility Initiative's Accessible Rich Internet applications) accessible web-rich Internet application, called Aria, is a technical specification He will use attributes to fill some semantics on the basis of the semantics provided by the HTML; is now using writing 1 to correctly apply the iconic role in Aria: 1) role = "banner" (banner) 2) role= "navigation" (navigation) & nbsp &NBSP;3) role= "main" (main) 4) role= "complementary" (Supplemental 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 (address:www.w3.org/tr/wai-aria/ ) 2) to include screen reader testing in your daily development (because he is the best thing that can directly reflect the semantics of your website) 3) RightSet the ID and class for the label (semantics must be obvious); 4) Correct use of the class class and the micro-format he provides; about class micro-format, Because a lot of people know or think that class's properties can only be applied to a set of elements of CSS style, in fact, it is not so, in fact, he can not refer to the extra tags have strong semantics, this is the micro-format, is the use of the contract class name to mark a piece of HTML to safeguarded with the application , intelligent search and search robot interaction; about the use of micro-format can 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.
Reprint Please specify the source: Thank you for your cooperation!
If there are any different ideas and suggestions, or want to get the first time blog update reminders, as well as more technical information sharing, welcome to the personal public platform: Programmer Interaction Alliance (coder_online), sweep the QR code below or search number Coder_online can pay attention to, We can communicate online.
What you don't know about HTML5 and the things in the HTML (iii)
