Text label

Text label

Historically, the main function of web pages was text display. Therefore, HTML provides a large number of text processing tags.

<div>

<div> is a general tag that represents a division. It has no semantics. If the web page needs a block-level element container and there is no other suitable tag, this tag can be used.

Its most common use is to provide CSS hooks to specify various styles. So in the early days, <div> wrapped in layers underneath was very common.

<div class="main">
  <div class="article">
    <div class="title">
      <h1>Article title</h1>
    </div>
  </div>
</div>

The above code is very laborious to read because it has no semantics. Later, HTML 5 proposed semantic tags and improved the above code.

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
  </article>
</main>

<div> is a block-level element with no semantics. The following example uses <div> to combine images and text to form a warning block.

<div>
  <img src="warning.jpg" alt="warning" />
  <p>Be careful</p>
</div>

As long as the style requires multiple block-level elements to be combined together, you can use <div>. However, this should be the last measure. Semantic block-level tags (such as <article>, <section>, <aside>, <nav>, etc.) should always be used first, when and You can use <div> only when no other semantic elements are suitable.

<p>

The <p> tag is a block-level element, representing a paragraph of the article. Not only text, but any content that you want to display in paragraphs, such as pictures and form items, can be placed in the <p> element.

<p>hello world</p>

The above code is a simple paragraph.

<span>

<span> is a general purpose inline tag (that is, no line breaks), without any semantics. It is usually used as a hook for CSS styles. If you need to specify styles for certain in-line content, you can place them in <span>.

<p>This is a <span>important</span> sentence.</p>

In the above code, the part that needs to be emphasized in the sentence can be placed in <span>.

<br>, <wbr>

<br> Let the web page produce a line break effect. The label is used alone, there is no closing label.

hello<br />world

When the browser renders the above code, it will be divided into two lines, hello and world each occupying one line.

<br> is very useful for wrapping poems and addresses.

<p>
  There is moonlight in front of the bed,<br />
  Suspected of frost on the ground. <br />
  Look up at the bright moon,<br />
  Look down and think of hometown.
</p>

If the above code does not use <br>, it will be displayed in one line.

Note that the interval of block-level elements should not be generated by <br>, but specified by CSS.

<p>First paragraph</p>
<br />
<br />
<p>Second paragraph</p>

The above code expects two line breaks between paragraphs. In this case, <br> should not be used, but CSS should be used.

The <wbr> tag is very similar to <br>, indicating an optional line break. If the width of a line is enough, it will continue to line; if the width is not enough, the line needs to be broken, just break the line at the position of <wbr>. It is to prevent the browser from breaking lines incorrectly or continuously in the middle of a long word, so mark the position where the line can be broken in advance. It is mainly used for European languages ​​with long words or URL breaks.

<p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>

The above code is a very long German word. To prevent incorrect line breaking, use <wbr> to tell the browser in advance that you can choose where to break the line.

<hr>

<hr> is used to separate two different topics in an article, and the browser will render it as a horizontal line. The label is used alone, there is no closing label.

<p>First topic</p>
<hr />
<p>Second topic</p>

The rendering result of the above code is that a horizontal line will appear between the two paragraphs.

This label is left over from history, it is recommended to avoid using it as much as possible. You can use <section> to separate the topics. If you want a horizontal line effect, you can use CSS.

<pre>

<pre> is a block-level element, which means to keep the original format (preformatted), that is, the browser will keep the original line breaks and spaces inside the tag. The browser displays the label content in a monospace font by default.

<pre>
hello

   world</pre
>

In the above code, line breaks and continuous spaces will be preserved due to the <pre> tag, and the browser will output it as it is.

Note that HTML tags still work in <pre>. <pre> only retains spaces and line breaks, not HTML tags.

<pre><strong>hello world</strong></pre>

In the above code, the content of the <pre> tag will be displayed in bold.

<strong>, <b>

<strong> is an inline element, which means that the content it contains is of great importance and needs attention. The browser will display the content in bold.

<p>The meeting time is <strong>two o'clock in the afternoon</strong>.</p>

<b> is very similar to <strong>, which also means that the content it contains requires attention, and the browser will display it in bold. It is an abbreviation of Boldface.

<p>The meeting time is <b>two o'clock in the afternoon</b>.</p>

The difference between it and <strong> is that, due to historical reasons, it has no semantics and is a pure style tag, which violates the principle of separation of semantics and styles. Therefore, it is not recommended to use it, and the <strong> tag should be used first.

<em>, <i>

<em> is an inline tag, which means emphasis (emphasize), and the browser will display the content it contains in italics.

<p>We have <em>already</em> discussed this matter.</p>

Although browsers usually display <em> in italics, there is no guarantee that this will be the case, so it is better to specify the style of this tag with CSS.

The <i> tag is similar to <em>, and it also means that it is different from other places. The browser will display it in italics. It is an abbreviation of Italic.

<p>I thought to myself, is this <i>really</i>?</p>

The semantics of the <i> tag is not strong, and it is closer to a pure style tag. It is recommended to use the <em> tag instead.

<sub>, <sup>, <var>

The <sub> tag turns the content into a subscript, and the <sup> tag turns the content into a superscript. They are all in-line elements, mainly used in mathematical formulas, molecular formulas, etc.

<p>The water molecule is H<sub>2</sub>O.</p>

The <var> tag represents the variable of the code or mathematical formula.

<p>
  The Pythagorean theorem is <var>a</var><sup>2</sup> + <var>b</var
  ><sup>2</sup> = <var>c</var><sup>2</sup> .
</p>

<u>, <s>

The <u> tag is an inline element, which means to provide some kind of comment to the content to remind the user that there may be a problem here. It is basically only used to indicate a spelling error. The browser renders content underlined by default.

<p>
  An idiom that is easy to make mistakes is to write
  <em>safeguarding oneself</em> as <u>safeguarding oneself</u>.
</p>

In the above code, <u> prompts the user that this is a spelling error, and there will be an underscore under "Anfen Shouji".

Note that <u> will be underlined. Since links are also underlined by default, you must use the <u> tag very carefully to avoid users mistakenly thinking that they can be clicked. In case it is necessary to use it, it is best to use CSS to change the default style of <u>.

The <s> tag is an inline element with strikethrough.

<p>Today’s special offer: <s>Salmon</s> (sold out)</p>

In the above code, "Salmon" will have a strikethrough.

<blockquote>, <cite>, <q>

<blockquote> is a block-level tag that means quoting others. The browser will display the style differently from the normal text.

<blockquote cite="https://quote.example.com">
  <p>Genius is 1% talent and 99% sweat.</p>
</blockquote>

The <blockquote> tag has a cite attribute, and its value is a URL, which indicates the source of the quote and will not be displayed on the web page.

The <cite> tag indicates the source or author of the introduction, and the browser displays this part in italics by default.

<blockquote cite="https://quote.example.com">
  <p>Genius is 1% talent and 99% sweat.</p>
</blockquote>
<cite>-- Edison</cite>

<cite> is not necessarily used with <blockquote>. If the source of the material is mentioned in the article, it can also be used alone.

<p>For more information, please see <cite>Wikipedia</cite>.</p>

<q> is an inline tag, which also means a quote. The difference between it and <blockquote> is that it does not produce line breaks.

<p>
  Shakespeare’s "Hamlet" has a famous line:
  <q cite="https://quote.example.com">Alive or dead, this is a question. </q>
</p>

In the above example, the introduction part and the previous description part are on the same line.

In addition, like <blockquote>, <q> also has a cite attribute, which indicates the source URL of the introduction.

Note that the browser will display the content of <q> in italics by default, and will automatically add half-width double quotation marks. Therefore, be careful when citing Chinese content.

<code>

The <code> tag is an inline element, indicating that the content of the tag is computer code, and the browser will display it in a monospace font by default.

The function of <code>alert()</code> is to make a prompt box pop up on the web
page.

If you want to express multiple lines of code, the <code> tag must be placed inside the <pre>. <code> itself only represents a line of code.

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

<kbd>, <samp>

The <kbd> tag is an inline element. The original intent was what the user entered from the keyboard. Now it has been expanded to a variety of inputs, including voice input. The browser displays the label content in a monospace font by default.

<p>
  Windows can be restarted by pressing <kbd>Ctrl</kbd> + <kbd>Shift</kbd> +
  <kbd>Del</kbd>.
</p>

<kbd> can be nested to make it easy to specify styles.

<p>
  Windows can press
  <kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd>
  Reboot.
</p>

The <samp> tag is an inline element that represents an example of the output content of a computer program. The browser displays in monospace font by default.

<p>
  If you use undefined variables, the browser will report an error:
  <samp>Uncaught ReferenceError: foo is not defined</samp>.
</p>

<mark>

<mark> is an inline tag, which indicates the highlighted content. By default, Chrome will display the content of the label with a bright yellow background.

<p>
  We decided after discussion that
  <mark>the operation will be held next Wednesday</mark>.
</p>

<mark> is very suitable for marking the sentences that need attention in the quoted content (<q> or <blockquote>).

<blockquote>
  The moonlight in front of the bed, suspected to be frost on the ground.
  <mark>
    Raise your head to look at the bright moon, and bow your head to think of
    hometown.
  </mark>
</blockquote>

In addition to marking the text of interest, <mark> can also be used to mark matching keywords in the search results.

Note, don't use this tag just for the highlighting effect, because the browser's processing method cannot be guaranteed. If you want to ensure highlighting, you still have to use CSS styles.

<small>

<small> is an inline tag. The browser will display the content it contains in a font size one size smaller, without using CSS styles. It is usually used for copyright information or legal information attached to an article.

<p>Article body</p>
<p><small>The above content uses a Creative Commons license. </small></p>

<time>, <data>

<time> is an inline tag that provides a machine-readable format for time-related content.

<p>
  The sports meeting is scheduled to be held
  <time datetime="2015-06-10">next Wednesday</time>.
</p>

In the above code, <time> indicates the specific date of next Wednesday. This is convenient for search engines to crawl, or other processing in the next step.

The datetime attribute of <time> is used to specify a machine-readable date, which can have multiple formats.

-Effective year: 2011 -Effective month: 2011-11 -Effective date: 2011-11-18 -Date without year: 11-18 -Week of the year: 2011-W47 -Effective time: 14:54, 14:54:39, 14:54:39.929 -Date and time: 2011-11-18T14:54:39.929

<p>
  The concert starts at <time datetime="20:00">8 o’clock in the evening</time>.
</p>

The <data> tag is similar to <time>, and also provides machine-readable content, but is used for non-time occasions.

<p>The first place in this marathon is <data value="39">Zhang San</data></p>
.

In the above code, the player's machine-readable data is placed in the value attribute of the <data> tag.

<address>

The <address> tag is a block-level element that represents the contact information of a person or an organization.

<p>Author’s contact information:</p>

<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

There are several points to note about this label.

(1) If it is the address mentioned in the article (such as the address before moving) instead of contact information, do not use the <address> tag.

(2) The content of <address> must not contain non-contact information, such as the release date.

(3) <address> cannot be nested, and there can be no title tags (<h1>~<h6>), and no <article>, <aside>, <section >, <nav>, <header>, <footer> and other tags.

(4) Usually, <address> will be placed in <footer>, the following is an example.

<footer>
  <address>
    For questions about the article, please contact
    <a href="mailto:zhangsan@example.com">Zhang San McClure</a>.
  </address>
</footer>

<abbr>

The <abbr> tag is an inline element, indicating that the content of the tag is an abbreviation. Its title attribute gives the full form of the abbreviation, or a description of the abbreviation. When the mouse hovers over the element, the value of the title attribute will be displayed as a reminder.

<abbr title="HyperText Markup Language">HTML</abbr>

Note that some browsers may provide a dot underline for this label.

<ins>, <del>

The <ins> tag is an in-line element that represents the content of the original document to add (insert). <del> is similar to it, which means to delete the content. They are usually used to show the deletion of documents.

<del><p>The meeting is scheduled for May 8.</p></del>
<ins><p>The meeting is scheduled for May 9.</p></ins>

The browser defaults to strikethrough the content of the <del> tag, and underline the content of the <ins> tag.

Both tags have the following attributes.

-cite: The value of this attribute is a URL, which means that the URL can explain this deletion. -datetime: indicates the time when the deletion occurred.

<ins cite="./why.html" datetime="2018-05">
  <p>The project ended two weeks earlier than originally scheduled.</p>
</ins>

<dfn>

<dfn> is an inline element, which means that the tag content is a term (definition), and this paragraph or sentence contains its definition.

<p>
  The global computer network connected by TCP/IP protocol is called
  <dfn>Internet</dfn>.
</p>

For the convenience of script operation, the definition of terms can be written into the title attribute of the <dfn> tag.

<p>
  A global computer network connected through the TCP/IP protocol is called
  <dfn title="Global Computer Network">Internet</dfn>.
</p>

In the above code, one function of the title attribute is that when the mouse is hovering, the explanation of the term will be displayed in the form of a prompt.

Sometimes, the term itself is an abbreviation, then <dfn> and <abbr> can be used in combination.

<p>
  <dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn>
  The full name is Acquired Immune Deficiency Syndrome.
</p>

<ruby>

The <ruby> tag represents the voice annotation of the text, which is mainly used for East Asian characters, such as Chinese Pinyin and Japanese Katakana. By default, it will display voice notes in small fonts above the text.

<ruby>
  Han <rp>(</rp><rt>han</rt><rp>)</rp> Word<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

The rendering result of the above code is that there is a small font of pinyin han zi above Chinese characters.

The <ruby> tag is an inline element and a container tag. If you want to use voice annotations, you must put the text and annotations in this label.

There are many matching tags inside <ruby>.

(1) <rp>

The purpose of the <rp> tag is to provide a compatible solution for browsers that do not support voice annotations. For those browsers that support voice annotations, the content of this tag is not displayed.

The <rp> tag is generally used to place parentheses. If an unsupported browser is encountered, the voice note will be displayed in the parentheses.

<ruby>
  Han <rp>(</rp><rt>han</rt><rp>)</rp> Word<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

The above code is rendered as Chinese (han) character (zi) ​​in a browser that does not support voice annotation. If you encounter a browser that supports voice annotations, the parentheses will not be displayed.

(2)<rt>

The <rt> tag is used to place voice notes.

(3) <rb>

The <rb> tag is used to divide text units and corresponds to voice notes one-to-one.

<ruby>
  <rb>Chinese</rb><rb>Words</rb>
  <rp>(</rp>
  <rt>han</rt>
  <rt>zi</rt>
  <rp>)</rp>
</ruby>

In the above example, the two characters Chinese characters are written together, and the <rb> tag is used to separate each word, corresponding to the <rt> tag one-to-one.

Note that the Chrome browser does not currently support this tag.

(4) <rbc>, <rtc>

The <rbc> tag represents a set of text, usually containing multiple <rb> elements. The <rtc> tag represents a group of voice notes, corresponding to <rbc>.

<ruby style="ruby-position: under;">
  <rbc>
    <rb>Chinese</rb><rp>(</rp><rt>han</rt><rp>)</rp>
    <rb>Word</rb><rp>(</rp><rt>zi</rt><rp>)</rp>
  </rbc>
  <rtc style="ruby-position: over;">
    <rp>(</rp><rt>Chinese</rt><rp>)</rp>
  </rtc>
</ruby>

In the above example, there are two sets of phonetic annotations for the two characters Chinese characters, which are Chinese Pinyin and English. One set of voice notes is placed in the <rbc> tag, and the other set of voice notes is placed in <rtc> to correspond to <rbc>. At the same time, use the style attributes to specify that Chinese Pinyin is displayed below the text and English is displayed above the text.

Note that the Chrome browser does not currently support these two tabs.

<bdo>, <bdi>

Most texts are read from left to right, but some texts are read from right to left, such as Arabic and Hebrew. The <bdo> tag is an inline element, indicating that the direction of the text is inconsistent with the direction of the main content of the webpage.

<p>
  The moon is shining in front of the bed, and
  <bdo dir="rtl">the snow on the ground is suspicious</bdo>.
</p>

In the above code, the text in the <bdo> tag will be rendered in the opposite direction, and the result will be "the moon is shining in front of the bed, suspected to be frost on the ground".

The dir attribute of <bdo> specifies the specific text direction. It has two values, ltr means from left to right, and rtl means from right to left.

The <bdi> tag is used when the direction of the text is uncertain. For example, there is a part of a web page that is input by the user, but the text direction of the input is not known. In this case, you can use the <bdi> tag to tell the browser that the direction of the text is uncertain, and the browser decides by itself.

<p>
  <bdi
    >The moon is shining in front of the bed, suspected to be frost on the
    ground.
  </bdi>
</p>