3rd Chapter Text Elements

Learning Essentials:

1. Summary of text elements

2. Text element parsing

Keynote Teacher: Li Tinghui

This chapter mainly discusses the text elements in HTML5, so-called text elements, that is, to set a text to match the structure and meaning.

A Summary of text elements

The HTML5 specification states that the use of elements should be based entirely on the semantics of the elements. But because of the legacy of history and the principle of user supremacy, this semantics is much looser.

Element name	Description
A	To generate a hyperlink
Br	Force line break
Wbr	can be safely wrapped.
B	Mark a piece of text but not emphasize
Strong	Represents an important
I	To represent a foreign language or scientific term
Em	expressed emphasis
Code	Represents the computer code
Var	Indicates program output
Samp	Represents a variable
Kdb	Represents user input
Abbr	Represents abbreviations
Cite	A title that represents another work
Del	The text that is deleted
S	Indicates that the text is no longer confirmed
Dfn	Represents a term definition
Mark	Represents content that is related to another context
Q	Indicate what is quoted elsewhere

Rp	Used in conjunction with Ruby elements, marking parentheses
Rt	Used in conjunction with Ruby elements, marking parentheses
Ruby	Indicates a phonetic symbol located above or to the right of the ideographs
bdo	Control the direction of text
Small	Represents the small font content
Sub	Indicates subscript font
Sup	Indicates superscript font
Time	Indicate time or date
U	Mark a piece of text but not emphasize
Span	generic element, without any semantics. Generally with CSS adornments.

From the table above, we find that the text element is still very much. But in fact, in real-world applications, the real common is that a few, mostly for English.

Two Text element parsing

1.<b> denotes keywords and product names

< b > HTML5</b>

Explaining the actual effect of the:<b> element is bold. Semantically, it is the marking of a piece of text, but not special emphasis or importance. For example: Some keywords in a text or the name of a product.

2.<strong> means important words.

< Strong > HTML5</strong>

Explaining that the:<strong> element actually functions as a <b> is bold. In terms of semantics, it is the emphasis on an important text.

3.<br> Force line break, <wbr> safe line wrapping

< BR > THISABC < WBR >dkedkslakdj<wbr>fkdlsakd is Apple.

Explanation: Typing <br> in any text position will be wrapped, and using <wbr> when the English word is too long will switch rows according to the width of the browser.

4.<i> denotes foreign words or technical terms

< I > HTML5</i>

Explaining that the:<i> element actually works is to tilt. Semantically, it is not special emphasis or importance to differentiate the surrounding content.

5.<em> to be emphasized

< em > HTML5</em>

The interpretation of the:<em> element is the same as the <i>, which is the tilt; semantically, it represents an emphasis on a piece of text.

6.<s> indicates inaccuracies or corrections

< s > HTML5</s>

Explaining the actual effect of the:<s> element is to delete the line, which, semantically, represents an inaccurate deletion.

7.<del> means delete text

< del > HTML5</del>

The interpretation of the:<del> element is the same as the <s>, which is the deletion of the line and, semantically, the deletion of the relevant text.

8.<u> indicates that the text is underlined

< u > HTML5</u>

Explaining the actual effect of the:<u> element is to add an underscore, which, semantically, does not emphasize this paragraph of text.

9.<ins> add a paragraph of text

< ins > HTML5</ins>

Explain that the:<ins> element actually acts as a <u>, adding an underscore, which, semantically, adds a piece of text and plays a role of emphasis.

10.<small> Adding small Fonts

< Small > HTML5</small>

Explaining that the:<small> element actually works is to put the text one number smaller. Semantically, used for disclaimers and clarification statements.

11.<sub><sup> adding superscript and subscript

< Sub >5</sub><sup>5</ sup >

Explaining the practical role of:<sub> and <sup> elements is mathematical superscript and subscript. The same is true of semantics.

12.<code>, etc. represent inputs and outputs

<Code>HTML5</Code><var>HTML5</var><Samp>HTML5</Samp><KDB>HTML5</KDB>

Explanation:<code> represents a computer code fragment;<var> represents a variable in a programming language;<samp> represents the output of a program or computer;<kdb> represents the input of a user. As this belongs to the English category, the lang= "en" must be translated into English to reflect the effect.

13.<abbr> = abbreviation

< abbr > HTML5</abbr>

Explaining the:<abbr> element has no practical effect; semantically, it is an abbreviation of a text.

14.<dfn> means defining terms

< DFN > HTML5</dfn>

The explanation of the:<dfn> element is a general inclination; semantically, a paragraph of text that interprets a word or phrase.

15.<q> referencing content from elsewhere

< Q > HTML5</q>

Explaining that the:<q> element actually works is to add a pair of double quotes. Semantically, it means referencing content from somewhere else.

16.<cite> references to other works titles

< cite > HTML5</cite>

Explaining the actual effect of the:<cite> element is bold. Semantically, it represents a title that references other works.

17.<ruby> language elements

<Ruby>foodies<RP>(</RP><RT>Tāo</RT><RP>)</RP>voracious<RP>(</RP><RT>Tiè</RT><RP>)</RP> </Ruby>

Explanation:<ruby> is used to provide support for non-Western languages. <rp><rt> is used to help readers master the correct pronunciation of ideographic language. For example: Hanyu Pinyin is above the text. However, Firefox does not support this feature at this time.

18.<bdo> setting Text Direction

<dir= "RTL">HTML5</bdo>

Explanation:<bdo> must use the attribute dir to set, altogether two values: RTL (right-to-left) and Ltr (left-to-right). The general default is ltr. There is also a <bdi> element is also the processing direction, because it is special language special effect, and the majority of browsers do not support, ignore.

19.<mark> highlighting text

< Mark > HTML5</mark>

Explaining the actual effect of:<mark> is to add a yellow background, black words, semantically, contextual and prominent text, used for notation.

20.<time> represents the date and time

<  Time >2015-10-10</time>

Interpreting the:<time> element has no practical effect; semantically, it represents the date and time.

21.<span> represents generic Text

< span > HTML5</span>

The explanation of the:<span> element has no practical effect; it is semantically expressed as a piece of text, which we often use to set up CSS and other operations.

3rd Chapter Text Elements