HTML text-level elements

Table of Contents [1] emphasizing importance [2] text interval [3] imprecise text [4] highlighting [5] minor comments [6] terminology processing [7] referencing [8] line wrapping [9] superscript subscript [10] text deletion [11] specific time [12] phonetic identification [13] text direction [14] Computer code example shows the previous Words

There are many types of elements used to mark text and other content groups in a paragraph, and these text-level elements are easily categorized for easy collation and memory

Text elementsemphasize important

Although browsers typically display em and strong in italics and bold, these elements should not be used as bold or italic. These two elements are used to enhance the degree of emphasis and importance of the inclusion content, respectively.

<em> Highlights

<strong> means important

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

Text interval

The I and B elements have historically been used to show bold and italic fonts, but in HTML5 they have new semantics

<i>

[1] text expressing different emotions or sounds, such as inner dialogue

<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 th e Garbage bag.</p>

[2] expression of foreign language, classification of scientific names and technical terms, etc.

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

<b>

[1] for separating text

<p>after bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b& Gt;</p>

[2] Introduction to an article or story

class="lede" for the upcoming week, prompting area farmers to install Irrigation systems.</b></p>

Imprecise text

<s> re-defined as erroneous, obsolete, deprecated text in HTML5, often used to indicate price changes, etc.

<p> Price <s>￥1298</s>￥998! </p><p><s>37 degree </s> <strong>41 degree </strong></p>    

Highlight Display

<mark> text that is highlighted or marked for reference

<p><mark>we're all hoping it rains soon</mark> some farmers has installed irrigation SYS TEMs, at <em>considerable</em> expense</p>

Minor comments

<small> represents a side note that can be used for scenarios requiring small fonts such as disclaimers, terms of use, and copyright information

<small> images are for reference only, please </small><small>chris Elhorn | The City press</small>

Terminology processing

<dfn> to define terminology

<p>the term <dfn>organic food</dfn> refers-food produced without synthetic chemicals</p>

<abbr> abbreviations, which can be used in conjunction with <dfn> definition terminology　　

<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> A reference to the title of a work, such as a book, movie, etc.　　

<p> My favorite movie is <cite> thousand and Chihiro </cite></p>

<q> represents a short reference, often used to refer to what others say, with quotation marks to express equivalence semantics　　

<p>the judge said <q>you can drink water form the fish tank</q> but advised against It.</p>

Line break

<br> line break

[Note that the]<br> tag is a text-level semantic element that can set the row height and font size, but setting the width height is invalid

<p>    <b>the city press</b><br/>    123 General Street <br/>      45501</p>

　

<wbr> specify where words can be wrapped when needed　　

<I>IRRIGATION<WBR/> direct</i>

Superscript subscript

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

<sup> indicate superscript　　

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

<sub> indicates subscript　　

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

Text deletion

You should use ins and del tags if you want to indicate document additions and deletions.

<ins> What is inserted in the document

<del> What's removed in the document

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

< properties >

[1]datetime: Used to indicate the date and optional time of the edit

[2]cite: The document URL used to specify the description edit

<p> a dozen have <del datetime="2015-12-30t00:00z" cite="edit.html "> 20 </del> <ins> 12 </ins> pieces. </p>

Specific time

<time> represents a date or time

< properties >

[1]datatime represents the exact time, follows the format Yyyy-mm-ddthh:mm:sstzd, represents the year-month-day-delimiter T-time-minute-second-time zone

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

<p> We are open every morning <time>9:xx</time> start. </p><p> I am in <time datetime="2008-02-14"> Valentine's Day </time> have an appointment. </p><small>posted <time datetime="2015-12-30t00:00:00utc+08:00"> </time></small>

Phonetic symbols

Ruby tags define phonetic symbols and are used in CJK text, CJK is a unified ideographs (Chinese, Japanese, Korean)

<ruby> represents Ruby markup

<rt> represents Ruby markup text

<rp> Ruby Markup Brackets

<ruby><rt>ㄏㄢˋ</rt></ruby>

<ruby>     han     <rp> (</rp>    <rt>hàn</rt>    <rp>) </rp>     language     <rp> (</rp>    <rt>yǔ</rt>    <rp>) </rp>    </ Ruby>

Text direction

<bdi> Ignore text in the direction of the surrounding text
<bdo> set in two directions, allows you to set the direction explicitly, and overrides all other current directions

<p>when rendered by a browser, <bdo dir="RTL"as'sdroweseht  '</p>

Computer code

<code> represents computer code
<kbd> define keyboard codes
<samp> Defining computer example code
<tt> defining the typewriter code
<var> Defining 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

< Demo box > click on the appropriate tag name below to demonstrate

HTML text-level elements