Deep understanding of HTML5 Series-text labels

Source: Internet
Author: User

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 is the importance of the element title attribute to semantics? 2) What are the new tags in HTML5 that have important implications for writing text? 3) Correct usage and precautions of <address>, <figure>, <time> tags in HTML5 what do you not know? 4) About <em><strong> and <b><i> 's past life?
The first one. What is the importance of the element title attribute to semantics?
    Title property does this just look at the title tag? But don't get together, they are completely different things; we seldom use this property in our development, first of all it is what it is, in fact, he is a prompt effect of the property; For screen readers, you can read text to the user , so the correct use can improve the accessibility of the page, such as the effect and code in the browser;  Code Implementation
Effect Show
Friends have not found this has déjà vu feeling, is the previous use of tags, the alt attribute of the feeling, this is the need to pay attention to friends, in IE7 before the IMG tag is alt to display text, but after IE7 version, If the ALT and Title properties appear at the same time, the text in the Title property is displayed instead of the Alt attribute, and if the result of the operation is:
a second question What are the new tags in HTML5 that have important implications for writing text?
    I would like to say a few words before writing the answer to the question of the understanding and use of these tags (at least the small part is so understanding and self-feeling effect can be); 1, clear HTML5 's core idea is the meaning, so no matter what label is to see the expression, rather than see the effect of the show; 2, about the text of the relevant label can be properly imagined as a punctuation mark in the language so that it is easy to remember and use (or you can also through other means) All right, you know the two points above, we're here to say the semantics and usage of these new tags . <address>, <figure>, <time> these three labels the next question is to say in detail here first; <strong><em> The two tags are already in the HTML4.0, but here's a little bit of it because it's possible to use them very rarely because there is very little attention to semantics.<strong> represents important text (which is shown in bold by default)-The emphasis is on semantic expression rather than on the effect of the presentation. <em> represents the underlined text (the default is italic)  <mark>The new element in the tag HTML5 is used to highlight the text, and its effect is like marking with a highlighter to the focus of the statement; <span> tag This is also in the HTML has already had, the previous article also probably mentioned once but did not have the detailed explanation, below detailed explanation: 1.span does not have any semantics, so the correct way to use it is to be used when there is no other appropriate label to use it; 2. It is a phrase-level label so it does not appear on a new line, 3. As in a div, you can add a span tag using a 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 new label that looks like <br>, except that it doesn't force a newline; <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;
a third question The correct usage and precautions of <address>, <figure>, <time> tags in HTML5 what do you not know?
      <address> This tag is new so with his people very few as to the correct usage of course few people are going to study it; a short 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 information page, this is correct, cannot mark "contact Us" in the office location This is the wrong use;3. The information provided is accurate, not the correctness of the e-mail address, but the need to provide information on the person, if a page has a lot of relevant people, then provide information when it is necessary to determine the accuracy of information, do not pigtailed; 4.address tags cannot have h1~h6\ Article\address\aside\footer\header\hgroup\nav\section and other labels;<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 non-semantic div tag; Usage tip: 1.figure elements can contain multiple content blocks ; But there can only be one figcaption (which can be interpreted as a caption to a chart) label 2. You can use H1~h6 to add headings to figures; 3.figcaption cannot appear alone, need to have a matching content to appear together; <time>This tag can be used to mark a specific time or date; The application scenario is usually the time of the publication of an article, such as: it is important to note that the time in 1.datetime is the same as the date of the text element in the timestamp, and the notation can be different; 2. If this time is to represent the entire article or the time of the page need to add the pubdate attribute; 3. Do not use the time tag for an exact period such as "Noon Today", "last weekend" 4. If you use the Pubdate property, be aware that you want to avoid pigtailed problems under the same parent tag The 5.times tag cannot be nested in another time tag; the time format in 6.datatime needs to be a standard machine for possible times such as: Yyyy-mm-ddthh:mm:ss
In fact, as a new label it has a lot of usage, the small part here just said some of the most basic things, but I think the use of the above so said things this time element can be said to be a primerQuestion Fourth about <em><strong> and <b><i> 's past life?
All of you who have developed HTML know that <em> and <i>, <strong> and <b> their presentation form, one is italic one is bold, then how do they get along in HTML5? Let's focus on the <b><i> 's previous life: In the early days, the internet did not have a thing called CSS at that time, in order to distinguish between the focus of the text and the special meaning of the text <b><i> the 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 CSS, its responsibility is to control the form of the page, of course, including the form of <b><i>, So in html4.0 and XHTML1, there are developers suggest abandoned <b><i&gt, and take the face of the <strong><em>+css, because they have the semantics to better interact with the user But the problem did not end there, because in some cases in the development of the discovery of <strong><em> is always not a good expression of semantics, to this end, in the HTML5 <b><i> has a modified appearance to show us,     So in the HTML5 and re-enabled the <b><i> brothers, then specifically in HTML5 when to use it? The B-tag means a piece of text that reminds the reader of the purpose for practical purposes, does not convey any additional importance, and does not mean other meanings and tones, such as keywords, product names, operation instructions, etc.; I tag denotes a piece of text different from other words, with different voice or tone, used for: classification name, technical terminology, Idiomatic words in a foreign language, etc.;

OK, let's talk about it today, do you have any help in reading this article? Believe that through these articles feel you to HTML5 text label this piece understand a lot?
Next article I will talk about some HTML5 and image related things oh, I believe there will be some things you do not know. Thank you for your reading and look forward to seeing you next time.

As an IT technician to hone their technology is essential, concern number Coder_online, the Programmer Interaction Alliance , you can chat with Daniel online at any time to discuss their interest in the topic, so that they spend the least time to learn the most things, Sweep the QR code below or search number Coder_online can be followed.

    • a little rookie learn Chromium's OpenGL Learning series second
Top 0 Step

Deep understanding of HTML5 Series-text labels

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.