The innovation of HTML 5--semantic label (ii) __html

Source: Internet
Author: User

One of the innovations of HTML 5: Semantic label two text element label, grouping element label.

The innovation of HTML 5--The semantic label (i) introduces some HTML5 new section elements, in which the structure elements form the Web page, but other content is also required to populate, such as pictures, text, code, forms, interactions, and so on. So we'll go into the details of HTML5 's new additions and redefined text element tags, grouped element tags, and other element tags. Text font elements

The text has a big impact on SEO, and HTML5 The semantics of some text font elements again, adding some new. Then we'll get to know them again. A (anchor abbreviation): Used to define the hyperlink EM (emphasis's abbreviation): EM is a sentence to emphasize, add and not add will cause semantic changes, can also be understood as local emphasis, used in the sentence to change the focus of a word. Strong:strong is important, Strong's emphasis is a random, no order, see a text, immediately highlight the key words. P:p element B (bold abbreviation): b element is bold, now means "stylistic highlight" text, popular will be used in the text highlighting a certain or several characters, designed to arouse the user's special attention, no emphasis on the role. For example, the keywords in the document summary, the product name in the comment, and the category name. I (italic abbreviation): I originally just tilt, now described as in the ordinary article to highlight the different views or tone or other text, like the script in the narrating (foreign language, transliteration), or can also be used for typesetting of italic text. Code: Defines the text of the computer's codes. Q (quote): Used to define the content of a reference (short content) cite: a title used to define a reference content that originates from a book or magazine, and does not allow other information, such as the author, date, etc. U (abbreviation for underline): Define underline text ABBR (abbreviation abbreviation): Define an abbreviated text, suggest describing the abbreviation in ABBR title attribute DFN (defining instance abbreviation): Used to define an operation var: defines the variable samp in computer code (abbreviation for sample): Sample text output by the program KBD (abbreviated keyboard): Defines the abbreviation for text WBR (word break) that is entered by the keyboard: Defines the time span for line wrapping: No semantic BR : Define a newline character

Many of these are only the definition of the consortium, some do not support, but in order to thoroughly implement the semantics of the consortium, or slowly familiar with it.

Text FONT element label Use NOTE: When the following elements are not appropriate: Table important strong, the table highlighted EM, the table title of the H1–h6, table highlighting or tagged text p, etc., is expressed in B. The emphasis of EM is to use in sentence a word to change the focus of sentences, can be said to be local, and strong and local or global irrelevant, local emphasis with strong also can, strong emphasis is important, will not change sentence meaning. Time Element

The time element is also a text label, because it is a brand new label, so we'll introduce it separately. The time element is used to mark the publication times of an article.

<time datetime= "2012-02-15" pubdate>2012 year February 15 </time>

In the form of code like this, know time tags generally have three components machine-recognized timestamp: The format must be the number of years and days separated by a minus sign, if the increase in time, then the date after the letter T and then with the 24-hour format time value and the time zone offset, such as datetime= " 2012-2-15t22:49:40+08:00 "Human identifiable text content: The format is arbitrary, as long as you can read." An optional pubdata tag: Pubdata is a Boolean value, and if necessary, it's good to write the property name Pubdata. But for the sake of beauty, we can also write Pubdata= ""

We also note that if the time is in a article, it indicates when the article was published, and if it is not in the article that the entire document was published.

<article>
    
Time Sample Code Grouping element Labels

We are familiar with Div, p, DL, DT, DD, OL, UL, Li, hr are grouped element tags, we next look at some of the less common and the new grouping element tag blockquote: Mark a long citation. Mark Short citation (in-line citation), q element should be used. The Pre:pre element can define preformatted text. Text that is surrounded in the pre element usually retains spaces and line breaks. The text is also rendered as a equal-width font. A common application of the pre label is to represent the source code. His relationship with code is like the relationship between Blockquote and Q. OL element

OL elements in the HTML5 has been improved, adding two properties: "Start": The Start property is used to define the starting position of the list number, "reversed": the Reversed property represents the reversal of the list, but there is no browser to support it, I don't have to elaborate here. figure elements and figcaption elements

The figure element is used to contain a single piece of content that, if removed, does not affect the surrounding content. Specifically, it can be used to represent pictures, charts, graphs, audio, video, code snippets, and so on. You can also add a title to the content if you want it, which is represented by Figcaption. Figcaption can only be a child element of a figure element and may be placed anywhere within the figure element. Shaped like:

<figure>
    
    <figcaption>html5jscss Front-End network is just built up the station </figcaption>
</figure>

Not all pictures are wrapped in figure, and the IMG tag has semantics. Do not use figure if you are simply trying to render the graph and are not referencing elsewhere in the document. If it is related to the context, you can also move it to the appendix, so don't use the figure,aside may be suitable.

Figure elements and aside elements seem to express similar content, but aside can contain more content than figure. When you don't know how to choose, you can do this: this content is a key to the surrounding content, or very important, not less, then you can use figure, otherwise use aside.

Attention:

A figure element is allowed to place a maximum of only one figcaption element or not, but other elements can be placed indefinitely. Note that not all pictures have to use figure elements. embedded Element Label

In addition to displaying the document type characters in the page, you need to put some other elements, which is what we call an embedded element.

Embedded elements include img (picture), page (IFRAME), multimedia objects will no longer be all bound in object or embed tags, but by a video (audio) audio for painting canvas elements

Here we do not describe their properties in detail, later specifically.

HTML5 added some new tags, such as form elements and some interaction elements, but with different emphasis, so we put it in another article to continue to understand. The HTML5 semantic tag ends here.

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.