What is the difference between "semantic" and "semantics" in HTML5?

This is a collection of some semantic labeling questions and answers for your reference.

The concept of semantics should be accompanied by the emergence of HTML5, then what is the so-called semantics in HTML5?

Simply put: Describe the meaning of the content (meaning)

For example <p> , the label is the meaning of the paragraph, in the HTML5 all the tags have its written semantics. Without semantic tags in html, there is no HTML5, such as <font> tags. And HTML5 added some new tags, such as,, and <article> <footer> so on, to supplement the current lack of HTML . The classification of these tags also changed from "block-level element" and "inline element" to "peripheral content" and "phrase content".
The most basic idea in HTML5 is that the "semantic" and "display" are separated, and the tags appearing in the HTML5 code are the things that developers or browsers know what to do, and as for the display effect that's what CSS3 (cascading Style Sheet) needs to do, So in the HTML5 of this two good friends finally the distance produced beauty.
So what are the benefits of semantic HTML documents?

1. can improve accessibility and interoperability (better compatibility);
2. Improve the search engine optimization;
3. In general, you can make the HTML file smaller;
4. Let the code better protect, and the relationship with CSS3 more harmonious.

1. In the HTML5<nav>、<article>、<sections>、<aside>、<footer>What are the understanding and usefulness of these labels?

First, the understanding of this several tags:

HTML5 designers can be said to be well-intentioned, they seriously analyze HTML4.0 out of the problem, that is, the most popular way to write the 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 label in the inside, you need to add tags on what function <div> .

And <div> what is it? This is a detailed explanation of our next question. The point of the problem is <div> that there is no semantics, that is, what he wants to do is all about the developer. This creates a serious development specification is not unified, that is, the page navigation bar is <div> , the page sidebar is also, the only way to <div> differentiate them is id . Perhaps some interested developers will be able <div> to id write a semantic understanding, such as: the use of navigation bar id <nav> , sidebar id <aside> . This kind of writing to other developers seems to be very good, because see id can know what this <div> is for. However, a large part of the developers will write, such as: the use of navigation bar, id div1 Sidebar, so that the wording of the id div2 user may not be any different, because the developers know what they represent, and for other developers it is really a catastrophe, 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 must 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 semantics? What are the benefits of using the label above? The answer, in a very simple word, is: to unify the specification with the advent of new features.

These tags function as part of the <div> function, they do not have any default style, in addition to the text will be another line;

Second, the semantics and usage of these tags:

• <nav>: Tag navigation (which is required for important link groups in the Web page) is included in the <nav> middle of the usually <ul> unordered list. Of course, if it is a breadcrumb link need to <ol> have a sequence of tables, just remember that the semantics of their own flexible play is possible.
  

  Special tips:

  1. The HTML5 specification is not recommended for links with accessible footers <nav> ;
  2. Nesting in tags is not allowed in HTML5 <nav> <address> .

• <article>: an article tag tag (represents a document, page, app, or a separate container in a Web site, in principle, aggregation).
  

  Special tips:

  1. <article>This tag can be used in nested, but they must be part of the relationship with the whole;
  2. Also cannot be used in the <address> label;
  3. He is <section> easily confused with the label so it needs attention;

• <section>: a block definition tag (which represents a general block of a document or application), usually with a similar set of topics, usually containing a title. You can use this tag to write: Chapters in the article, various tabs in the tabbed dialog box, and similar features. Here you'll find him <article> like this tag, right? So how do you apply them correctly in development?
  It is also very simple, you think: if you need a separate module in the page to achieve a separate function, that is, the high aggregation of the case, the use of <article> other times <section> .
• <aside>: Define the sidebar label (indicating that part of the content does not have a great relationship with the body of the page, but can exist independently), with which he can implement: the promotion reference, the sidebar, the related article link box, the advertisement, the Friendship link and so on.
  

  Special tips:

  1. If the use of multiple <aside> , the label should be in the main content behind, so that the SEO search and enhance accessibility;
  2. If the image that is related to the main content of the article needs to be <figure> labeled.

• <footer>: Footer Label ( the label corresponding to the label), the functions he can implement are: Appendix, index, copyright page, license agreement, etc.


  Special tips:

  1. The footer does not have to be at the end of the element, but it is usually the case;
  2. He cannot be placed in the <address> element.

2. HTML5 General-purpose containers <div>、 <span>What is the meaning of survival in HTML5?

<div>This tag has been in HTML for a long time, and his whole spell is (division). Many of the new tags in HTML5 are a unified definition of his functionality, because there is no semantics in it, <div> but you can add CSS styles to it, so that you can make some of the best results for the page. So why does he still exist in HTML5? That's because, at some point, you'll find that you're using any of the tags in the HTML5 that don't fit the semantics you need right now, so you need <div> this tag at this point. Since it is said <div> , then also to say that the corresponding <span> tag, he is also a non-semantic label, the function and function is the <div> same, but the usage is not the same: <div> It is a block-level non-semantic container, <span> is a phrase without a semantic container.

<div>The use of the use of trust friends must be more familiar with me, so here about his usage is not much to say, just for the use of HTML5 in a <div> few suggestions:

1. If you feel that the new label in the HTML5 is better than the <div> appropriate one, you must use the new label, because <div> there is no semantics, this is not advocated by HTML5;
2. If the effect is required, you can add a label to the HTML5 of the new label <div> , which does not have much effect on the semantics of the HTML.

3. What is the importance of the element title attribute to semantics?

titleProperty is this just a look at the <title> label? But don't get it wrong, they're totally different things. Usually in our development time will rarely use this property, first of all what it is to do it, in fact, he is a hint of the role of the property, for screen readers can read text for the user, so the correct use can improve the accessibility of the page.

4. What are the new tags in HTML5 that have important implications for writing text?

Before writing the answer to this question, let's talk about the understanding and usage of these tags:

1. Clearly the core idea of HTML5 is semantics, so no matter what the label is to see the meaning of the expression, rather than to see the effect of the show;
2. The relevant label of the text can be properly imagined as a punctuation mark in the language so that it can be easily remembered and used;

Understand the above two points we are speaking about the semantics and usage of these new tags:
<address>, <figure> , <time> these three labels the next question in detail said here first not to say;
<strong>, <em> This two tag is already in the HTML4.0, but here is still to say, because in the past May rarely use them because few people pay attention to the semantics;

• <strong>Represents important text (the default is bold)-the emphasis is on semantic expression rather than on the effects of the presentation you need to remember.
• <em>Represents the underlined text (the default is italic)

<mark>The tag is a new element in the HTML5, which is used to highlight the text, and its effect is to be labeled as a highlighter-focused statement;
<span>Tag this is also in the HTML has already had, the previous article also probably mentioned a bit but no detailed explanation, the following detailed explanation:

1. <span>There is no semantics, so the correct way to use it is to be used when there is no other appropriate tag to use it;
2. It is a phrase-level label so it does not start another line;
3. The same <div> as in certain circumstances can be added to the <span> label using micro-format to increase the semantics;
4. In general, it is necessary to use CSS to control its display style because it has no style of presentation;

<wbr>A <br> new label that looks like it, except that it doesn't force a line break;
<ruby>, <rp> <rt> These labels are like the phonetic transcription in Chinese;
<meter>It can be used to do some measurement results display and voting results display (now the problem is that the browser does not support it);
<progress>The same progress bar display, can be used for some good interaction with the user effect, the problem is that browser compatibility is not good now.

5. In HTML5 <address>、 <figure>、 <time>What are the correct usage and precautions for tags that you do not know?

<address>This label is new, so few people use him. As for the correct usage, of course, very few people study it, the following simple summary:

1. <address>is used to define the contact information of the author, related person, or organization associated with an HTML page or part of a page, usually at the bottom of the page or in the relevant section;
2. Most of the time, the contact information is the author's e-mail or link to the contact page, this is correct, cannot be used to mark the "Contact Us" in the office location, which is the wrong use;
3. The information to be accurate, not to say the address of the e-mail is correct, but to say that the need to provide information on the person, if a page has a lot of relevant people, then provide information when must determine the accuracy of information, do not pigtailed;
4. <address>The label can not have ~,,,,,,, and <article> <address> <aside> <footer> <nav> <section> other tags;

<figure>This element is used to introduce charts, graphs, photographs, etc., the corresponding scene is like a magazine picture, before the HTML5 is not a special label to do this, before the implementation of this function is to use the label without semantics <div> ;

Usage tips:
1. <figure> elements can contain multiple content blocks, but only one <figcaption> (can be understood as a chart plus title) label;
2. You can use the ~ to <figure> increase the title;
3. <figcaption> cannot appear separately, need to have the matching content to appear together.

<time>This tag can be used to mark a specific time or date, and the application scenario is usually the time when a post is published.

It is important to note that:
1. datetime the best time in the <time> tag is the same as the text element date, the wording can be different;
2. If this time is to represent the entire article or the time of the page need to add pubdate attributes;
3. Do <time> not use the exact time in the label such as: "Noon Today", "last weekend";
4. If the use pubdate of attributes need to be aware of the same parent tag should not appear under the pigtailed problem;
5. <time> labels cannot be nested in another <time> label;
6. The datatime time format required is the standard machine possible time such as: Yyyy-mm-ddthh:mm:ss

In fact, as a new label, they have a lot of usage, here just said some of the most basic things, but I think the use of all the above can be said to be a primer.

5. About<em>、<strong>And<b>、<i>'s Past life?

You have developed HTML friends know <em> and <i> , <strong> and <b> their presentation form, one is italic one is bold, then they in the HTML5 how to get along? Let's focus on <b> <i> the past life:

In the early days, the internet did not have a thing called CSS at that time, in order to distinguish between the text of the emphasis and special meaning of the text <b> , the <i> brothers appeared. With their help, the text of the page and the user's interaction has been improved.
However, in the case of the rapid development of the Internet, soon appeared a called CSS, its responsibility is to control the form of the page, of course, including <b> , the <i> form of expression, so in HTML4.0 and XHTML1 there are developers suggest abandoned <b> , <i>, the <strong> <em> +css, because they have the semantics to better interact with the user. But the problem did not end, because in the development time in some cases found in the use <strong> , <em> is always not very good expression of semantics, for this, in the HTML5 <b> , and <i> modified to show us, so in HTML5 re-enabled <b>, <i> this pair of brothers.

So, when do you use them specifically in HTML5?
<b>The label denotes a piece of text that is intended to alert the reader for practical purposes, does not convey any additional importance, and does not indicate other semantics and tone, for: keywords, product names, operating instructions, etc.;
<i>The label represents a piece of text different from other words, with different voice or tone, used for: classification name, technical terminology, idiomatic words in foreign languages, etc.

6. How can I use ARIA to enhance accessibility?

Is semantics really that important? How to improve accessibility and SEO search through semantics? Because now some SEO and browser or screen reader (an article reader for people with disabilities) are doing some new functions according to the new standards of HTML5, they will be directly related to their own functions with the new semantics. If the developer of the Web page does the same thing, the application of your website will be greatly increased.
The above also stressed the importance of semantics, the following to tell you a better way to enhance the semantics of the tips, must look well, because this little trick friends do not necessarily know:

Concept Description:wai-aria (Web Accessibility Initiative's Accessible Rich Internet applications) accessible Web-rich Internet app for accessibility initiatives, For short, Aria, he is a technical norm. Based on the semantics provided by HTML, he uses attributes to fill some of the semantic gaps.

Usage of Aria:

• Use the iconic role in aria correctly:
  1. role = "banner" (banner)
  2. role= "Navigation" (navigation)
  3. Role= "Main" (main)
  4. Role= "Complementary" (supplementary content)
  5. Role= "ContentInfo" (content information)
     > Tips: Landmark character is just one of the ARIA specifications, if you are interested can go to the official website to read it (address: http://www.w3.org/TR/wai-aria/)
• Include screen reader testing in your daily development (because he is the best thing that can directly reflect your site's semantic writing);
• The correct label formulation id and class (semantic must be obvious);
• Correct use class of the class and the micro-format he provides;

About class the micro-format, because a lot of people know or think that class the property is only for a set of elements to apply CSS style, in fact, it is not the case, in fact, he can not refer to additional tags to enhance the semantics, which is the micro-format, micro-format is the use of the class Convention Name to mark a piece of HTML to enhance interaction with the application, the intelligent search and the search robot. The use of micro-format can take a look at this URL: http://microformats.org

7. Do you think that the naming of Web files will affect the experience of your website?

This first feeling is not reliable, the name of a file will also affect the experience of the site?
The correct answer is indeed: Yes!
such as: File name: html_first_blog.htm and html-first-blog.html
This two file name is the second to win the first one on the user's experience and the search engine. Is someone asking why??
Let me just say that there are several points that need our attention:

1. The file name requires lowercase letters:
   The application scenario is the simplest input address, you think which of the following is more convenient to write, this please feel it:
   • Http://192.168.0.1/TestHtml/The_First/Html5.html
   • Http://192.168.0.1/testhtml/the-first/html5.html
2. To separate words with a dash:
   We will certainly think, with "_" is very good, in fact, this is to do c development time of writing, can also be said to be a habit, but in the site "-" is a search engine preferred style;
3. Use the standard extension:
   Now with a lot of Web sites are using the. htm extension, this browser will not error, but the standard extension is. html so you do not save time to write a letter "L".

Remember that the above points are the correct way to write the name of the page file Oh, do not put the method of writing other languages in.

Reference article:

http://blog.csdn.net/lihui130135/article/details/45033967
http://blog.csdn.net/lihui130135/article/details/45150501
http://blog.csdn.net/lihui130135/article/details/44748415

What is the difference between "semantic" and "semantics" in HTML5?