HTML5 semantic element (2) text content,

Source: Internet
Author: User

HTML5 semantic element (2) text content,

The previous article introduced the semantic elements of the page structure. This article describes the content of the text, including: <bdi>, <details>, <summary>, <mark>, <output>, <ruby>, <rt>, <rp>, <time>, and <wbr> semantic element.

 

Directory

1. Introduction

1.1 description

1.2 category

2. Supported by IE

3. IE does not support

 

1. Introduction 1.1

Semantic elements in text content are usually used to describe special content fragments. You can use these semantic elements to mark important information, such as names, comments, precautions, and dates.

The following elements are contained: <bdi>, <details>, <summary>, <mark>, <output>, <ruby>, <rt>, <rp>, <time>, and <wbr>.

<Bdi>: indicates a text direction that is separated from the parent element. The default text direction is used.

<Details>: used to describe the details of a document.

<Summary>: the title of the <details> element.

<Mark>: highlighted text.

<Output>: Mark a region where content will be filled in the future.

<Ruby>: annotation (Chinese phonetic alphabet or character ).

<Rt>: Used in the <ruby> element to define the interpretation or pronunciation of a character (Chinese phonetic alphabet or character.

<Rp>: Used in <ruby> elements to define the content displayed by browsers that do not support ruby elements.

<Time>: date or time.

<Wbr>: Wrap a word when it cannot be fully stored in the subsequent space.

 

1.2 category

The support for these elements varies by version of IE. Here, we will introduce the supported and unsupported features of IE:

Supported by IE: <mark>, <output>, <ruby>, <rt>, <rp>, and <time>.

<Bdi>, <details>, <summary>, and <wbr> are not supported by IE.

 

2. Supported by IE

Elements supported by IE are also supported in Chrome.

Including: <mark>, <output>, <ruby>, <rt>, <rp>, and <time>.

2.1 <mark>: highlighted text

Minimum browser version: IE 9, Chrome 26

Use Cases: Important content.

Details: Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

Example:

<P> the capital of China is <mark> Beijing </mark> </p>

 

2.2 <output>: Mark a region where content will be filled in the future.

Minimum browser version: IE 9, Chrome 33

Use Cases: Displays a region of the calculation result and JavaScript return value.

Details: Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Attribute:

For: ID of the associated element. If there are multiple, separate them with spaces.

Form: ID of the associated form. You do not need to assign this attribute to a form.

Example:

<form id="form" oninput="result.value=userName.value">    <input type="text" name="userName"/>    <output name="result"></output></form>

 

 

2.3 <ruby>, <rt>, <rp>: annotation (Chinese phonetic or character)

<Ruby>: annotation (Chinese phonetic alphabet or character ). <Details>

<Rt>: Used in the <ruby> element to define the interpretation or pronunciation of a character (Chinese phonetic alphabet or character. <Details>

<Rp>: Used in <ruby> elements to define the content displayed by browsers that do not support ruby elements. <Details>

Minimum browser version: IE 5, Chrome 5

Use Cases: Chinese pinyin and Japanese Kana.

Example:

<H5> Chinese pinyin 

 

2.4 <time>: date or time

Minimum browser version: IE 9, Chrome 33

Use Cases: The posting date of news and blogs.

Details: Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

Example:

Creation date: <time datetime = "2016-04-15T12: 30"> </time>

Attribute:

Datetime {datetime}: set the date and time of this element. <Time> elements may display different formats of date and time. For the same time, some texts are displayed before X minutes, and some are English months, but the actual date and time only need to be saved in this attribute.

Example:

<P> creation date: <time datetime = ""> </time> </p> <p> creation date: <time datetime = ""> 30 minutes ago </time> </p> <p> creation date: <time datetime = ""> limit L 15 </time> </p>

 

3. IE does not support

Elements not supported by IE are also supported in Chrome.

Including: <bdi>, <details>, <summary>, and <wbr>.

3.1 <bdi>: indicates a piece of content that is separated from the text direction of the parent element. The default text direction is used.

Minimum browser version: Not supported by IE, Chrome 16

Use Cases: Arabic, Persian, and other words read from the right to the left.

Details: Https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/bdi

<P> div display text direction: rtl </p> <div dir = "rtl"> <p> the Chinese capital is Beijing! </P> <bdi> the capital of China is Beijing! </Bdi> </p> </div>

3.2 <summary> and <details>: specify the content blocks that can be expanded or closed.

<Details>: used to describe the details of a document. <Details>

<Summary>: indicates the title that contains the <details> element. <Details>

Minimum browser version: Not supported by IE, Chrome 12

Use Cases: Product details and document details.

Example:

<Summary> weather conditions <details> <p> clear to cloudy </p> <p> 13 ~ 25 ° </p> </details> </summary>

3.3 <wbr>: Wrap a word when it cannot be fully stored in the subsequent space.

Minimum browser version: Not supported by IE, Chrome 1

Use Cases: A long English word.

Details: Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Example:

<H5> wbr elements not included: 

====================================== Series of articles ==============================================

This article: 6.3 HTML5 semantic elements (2) Text Content

Web development path Series

 

Related Article

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.