HTML Tags you Know but Don’t Use

As a front-end handsome guy/pretty girl, I always deal with HTML tags when developing. Today, I’m going to introduce some other HTML tags that have been around for a long time, but not many people (I don’t know many people who use them).

1. Pre label

The HTML

 element represents predefined formatted text. The text in this element is usually formatted as in the original file, in a typeface of equal width, and whitespace (such as Spaces and newlines) in the text is displayed.

Such as:

<pre>
    < Hello World >I just want to -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- disorderly seven eight by \ \ ^ __ ^ (oo) \... (__) \ \ / \ positioning write | | - w | | | | | ~</pre>
Copy the code

Effect:

2, Figure with the caption

The HTML

element represents a single piece of content and is often used with caption

<figure>
    <img style="width: 300px" src="https://github.com/quhongqiang/quhongqiang.github.io/blob/master/img/_posts/17.png?raw=true"
         alt="Elephant at sunset">
    <figcaption>This is my wechat official number, please scan the code to know me</figcaption>
</figure>
Copy the code

Effect:

3. Em and Strong labels

HTML emphasis elements () mark up content that needs to be read by the user. elements can be nested, and the deeper the nesting level, the more content they contain is considered to need to be read by the user.

The Strong element (< Strong >) indicates that the text is important and is usually shown in bold.

4. Del tag and INS tag

The tag of the HTML represents some text content that has been removed from the document. For example, you can use this tag when you need to display changes or source code differences.

<p><del>The text has been deleted.</del>, please browse other sections</p>
Copy the code

Effect:

The HTML < INS > element defines the text that has been inserted into the document.

<ins>This text is newly inserted into the document.</ins>
Copy the code

Effect:

5. Sub labels and sup labels

The HTML _{element defines a text area that, for typographical reasons, should be displayed lower and smaller than the main text.}

<p>The chemical formula for water: H<sub>2</sub>O</p>
Copy the code

Effect:

The HTML ^{element defines a text area where, for typographical reasons, content in} will be displayed at half the character height of the current text stream compared to the main text.

<p>2 + 3<sup>2</sup>= 11</p>
Copy the code

Effect:

6. Ruby tags

The HTML < Ruby > element is used to display east Asian phonetic or character annotations.

<ruby>
  曲 <rp>(</rp><rt>qu</rt><rp>)</rp>
  小 <rp>(</rp><rt>xiao</rt><rp>)</rp>
  强 <rp>(</rp><rt>qiang</rt><rp>)</rp>
</ruby>
Copy the code

Effect:

7. Bdo label

Specifies the text orientation of the child element, explicitly overriding the default text orientation.

The < bDO > element (HTML bidirectional overlay element) is used to override the orientation of the current text, which causes the characters to be aligned in a given direction.

<p>The text runs from left to right</p>
<p><bdo dir="rtl">The text runs from right to left</bdo></p>
Copy the code

Effect:

When you write a lot of styles in CSS, do you ever think that there is a tag that can replace a lot of style attributes?

Thanks for watching

HTML Tags you know but Don’t Use often (part 2)