HTML text-level elements,

HTML text-level elements,
Directory [1] highlights important [2] Text interval [3] inaccurate text [4] highlight [5] secondary comment [6] Glossary [7] reference [8] line feed [9] subscripts [10] Text deletion and modification [11] specific time [12] phonetic mark [13] Text Direction [14] computer code example to demonstrate the previous

There are many types of elements used to mark text in paragraphs and other content groups. These text-level elements are simply classified for ease of organization and memory.

 

Text elements emphasize importance

Although the browser usually uses italic and bold to display em and strong, these elements should not be bold or italic. These two elements are used to increase the emphasis and importance of the content.

<Em> emphasize

<Strong> indicates important

<p>I am <em>very</em> worried!</p><strong>warning</strong>

 

Text Interval

Elements I and B have always been used to display bold and italic fonts, but in HTML5, they have new semantics.

<I>

[1] texts that indicate different emotions or sounds, such as inner dialogs

<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>

[2] foreign languages, classification names, and Technical Terms

<i lang="fr">Oh la la!</i>    

 

<B>

[1] used to separate text

<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>

[2] Introduction for articles or stories

<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>

 

Inaccurate text

<S> In HTML5, It is redefined as incorrect, outdated, and unrecommended text, which is often used to indicate price changes.

<P> price <s> $1298 </s> $998! </P> <s> 37 degrees </s> <strong> 41 degrees </strong> </p>

 

Highlight

<Mark> indicates the highlighted text or text marked for reference.

<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>

 

Secondary comment

<Small> it indicates a side note. It can be used in situations where a small font is required, such as disclaimer, Terms of Use, and copyright information.

<Small> The images are for reference only. Refer to The actual objects. </small> <small> Chris Elhorn | The city Press </small>

 

Term Processing

<Dfn> used to define terms

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>

 

<Abbr> acronyms can be used together with <dfn> to define terms

<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>

 

Reference

<Cite> it indicates a reference to the title of a work, which can be a book, photo, audio, and image.

<P> my favorite movie is <cite> qianxun </cite> </p>

 

<Q> short references are commonly used to reference what others say. quotation marks can be used to express equivalent semantics.

<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>

 

Line feed

<Br> line feed

[Note] <br> A label is a text-level semantic element. You can set the Row Height and font size, but the width and height are invalid.

<p>    <b>The City Press</b><br />    123 General Street <br />    Springfield, OH 45501</p>

　

<Wbr> specify the position where the word can be wrapped when necessary

<i>Irrigation<wbr /> Direct</i>

 

Superscript

These two labels are very useful in mathematical equations, scientific symbols, and chemical formulas.

<Sup> indicates the upper mark

<p>    a<sup>2</sup>    +    b<sup>2</sup>    =    c<sup>2</sup></p>

 

<Sub> subscript

<p>    H<sub>2</sub>    SO<sub>4</sub></p>

 

Text deletion and Modification

If you want to add, delete, modify, and delete a document, use the ins and del labels.

<Ins> content inserted in the document

<Del> deleted content in the document

[Note] <ins> and <del> can nest any element.

<Attribute>

[1] datetime: used to indicate the edited date and the optional time

[2] cite: Specifies the URL of the document to be edited.

<P> A dozen of <del datetime = "2015-12-30T00: 00Z" cite = "edit.html"> 20 </del> <ins> 12 </ins> files are available. </P>

 

Specific time

<Time> indicates the date or time.

<Attribute>

[1] datatime indicates the exact time. The format is YYYY-MM-DDThh: mm: ssTZD, indicating the year-month-day-delimiter T-hour-minute-second-time zone.

[2] pubdate indicates that the date or time in the <time> element is the document release date.

<P> we start business every morning at <time> </time>. </P> <p> I have an appointment on <time datetime = "2008-02-14"> Valentine's Day </time>. </P> <small> Posted <time datetime = "2015-12-30T00: 00: 00UTC + 08:00"> </time> </small>

 

Phonetic Alphabet

The ruby tag defines the phonetic mark, which is mostly used in CJK text. CJK refers to the unified Chinese-Japanese and Japanese ideographic texts (Chinese, Japanese, and Korean)

<Ruby> indicates the ruby mark.

<Rt> indicates ruby markup text

<Rp> indicates ruby marking brackets

<Ruby> runtime <rt> runtime environment </rt> </ruby>

<Ruby> Han <rp> (</rp> <rt> hà n </rt> <rp>) </rp> language <rp> (</rp> <rt> y release </rt> <rp>) </rp> </ruby>

 

Text direction

<Bdi> ignore text in the surrounding text direction
<Bdo> overwrite the settings in both directions. You can explicitly set the direction and overwrite all other current directions.

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>

 

Computer code

<Code> indicates the computer code.
<Kbd> define the keyboard code
<Samp> define the computer example code
<Tt> define typewriter code
<Var> define variables

<p>    <code>Computer code</code>    <br />    <kbd>Keyboard input</kbd>    <br />    <tt>Teletype text</tt>    <br />    <samp>Sample text</samp>    <br />    <var>Computer variable</var>    <br /></p>

 

Example

<Demo Box> click the corresponding tag name below to demonstrate