HTML5 semantic element (2) text content,

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