Common HTML text elements,

Common HTML text elements,

This document is first published on the personal Public Account (xinjie-just ).

HTML is a hypertext markup language that provides the specific content of a webpage, including text, forms, images, tables, links, multimedia, and lists. The text is the most frequently displayed content. Correct use of text tags will make the page semantic and facilitate SEO.

Text labels mainly include abbr, address, strong, B, em, I, bdi, bdo, blockquote, cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q, sub, sup, time, span, var.

It is not always enough to use div and span on a webpage. Correct use of these text labels makes our pages well displayed without css. On the other hand, these labels are used to write code that can be viewed by others, not just by machines, but also by programming.

1. abbr

<Abbr title = "explain the abbreviation, explain the meaning of the abbreviation or show its full name"> abbr explain the abbreviation, when hovering over it, the title attribute value is displayed </abbr> <abbr title = "World Health Organization"> WHO </abbr>

 

2. address

<Address> address defines the contact information of the author, related person, or organization related to the html page and part of the page, it is usually located at the bottom of the page or in the relevant part (it is incorrect to mark the office location in "Contact Us" on the company website with address ), the font is italic </address> <address> Written by <a href = "mailto: webmaster@example.com"> Jon Doe </a>. <br> Visit us at: <br> Example.com <br> Box 564, Disneyland <br> USA </address>

 

3. strong

<Strong> strong emphasizes the importance (importance) of the content. The font is displayed in bold. </strong> <strong> stop and get out </strong>

 

4. B

<B> B indicates a piece of text that reminds readers of attention for practical purposes. It does not convey any additional importance or represent other voices and tone, keywords used in articles, product names in comments, article introductions, text-based instructions in interactive software </B> <p> his emotional <B> dull </ b> try a room with doors and windows closed </p>

 

5. em

<Em> em indicates the emphasis (uniqueness) of the content, and the font is displayed in italics </em> <em> I just love you </em>

 

6. I

<I> I indicates that a text is different from other texts, and has different voices or tone, or is different from the general character, used for example, technical names, technical terms, idioms in foreign languages, translated prose, ship names in Western words, etc </I> <I> HTML, refactoring, wow, solving worries grocery store, titanic </I>

 

7. bdi

<Bdi> bdi allows you to set a text segment to be separated from the text direction of its parent element. Currently, only Firefox and Chrome are supported. </bdi>

 

8. bdo

<Bdo dir = "ltr"> bdo defines the direction of the text. ltr (default direction from left to right) </bdo> <bdo dir = "ltr"> This text will go left-to-right. </bdo> <bdo dir = "rtl"> This text will go right-to-left. </bdo>

 

9. blockquote

<Blockquote> blockquote represents a separate quote (can be long or short) </blockquote> <blockquote cite = "http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. the worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

 

10. cite

<Cite> cite indicates a reference or reference to a content source. Such as drama, script, picture title, song, movie, photo, sculpture name, concert, concert, standard, newspaper, legal document (cannot be used as a reference to a person's name ), the font is displayed in italics. </cite> <p> you and I are both police directors. You are too polite and hypocritical! This is from the movie <cite> Cold War II </cite> </p>

 

11. code

<Code> code defines the computer code text </code> <code> This is a piece of computer code: alert ("here is the way to become a good guy again, here is the way to be a good person again. ") </code>

 

12. del

<Del> if you need to mark the editing of the page content after the previous version, or mark the text that is no longer accurate or irrelevant. Ins indicates the added content, del indicates the deleted content, and s indicates the content that is no longer accurate or irrelevant. The browser deletes the deleted content and underlines the added content, add strikethrough to the s Element </del> <p> My favorite color is <del> blue </del> red! </P>

 

13. ins

<Ins> if you need to edit the page content after the previous version, or mark text that is no longer accurate or relevant. Ins indicates the added content, del indicates the deleted content, and s indicates the content that is no longer accurate or irrelevant. The browser deletes the deleted content and underlines the added content, add strikethrough to the s Element </ins> <p> My favorite color is not blue, is <ins> red </ins>! </P>

 

14. s

<S> s if you need to edit the page content after the previous version, or mark text that is no longer accurate or irrelevant. Ins indicates the added content, del indicates the deleted content, and s indicates the content that is no longer accurate or irrelevant. The browser deletes the deleted content and underlines the added content, add strikethrough to the s Element </s> <p> <s> You think I love you! </S> </p> <p> As a matter of fact, I love her! </P>

 

15. dfn

<Dfn> dfn phrase tag defines a project. Make a semantic distinction between them, and use dfn to enclose the terms to be defined, rather than the definition of the surrounding </dfn> <p> There is a item, <dfn> txhy APP </dfn> </p>

 

16. mark

<Mark> mark refers to the reader's attention to a specific text segment and adds a yellow background to the text. You can add mark {background: yellow;} in the style sheet to make the browser achieve the same effect </mark> <p> Do not forget to buy <mark> milk </mark> today. </p>

 

17. small (very common and easy to use or directly disable)

<Small> small disclaimer, annotation, signature, copyright information, legal restrictions, etc. (Mark phrase, do not mark too long text), the font is displayed in a small font </small> <p> example: <small> No. 11000002000001 (Baidu ICP filing number) of Beijing Public Network Security </small> </p>

 

18. pre

<Pre> pre-defined pre-format text </pre> <pre> write to important users by hand. You must answer your questions carefully. </Pre>

 

19. q

<Q> q is used for short quotes </q> <p> WWF's goal is to: <q> Build a future where people live in harmony with nature. </q> We hope they succeed. </p>

 

20. sub

<Sub> Create Subscripts for sub. the subscript text is displayed below the baseline half of the character height in the current text stream, however, the font and font size of the text in the current text stream are the same </sub> <p> we know that, H <sub> 2 </sub> O decomposition generates H <sub> 2 </sub> and O <sub> 2 </sub> </p>

 

21. sup

<Sup> sup creates a superscript. The supermarked text is displayed above the baseline half of the character height in the current text stream, however, the font and font size of the text in the current text stream are the same </sup> <p> time is like water in the sponge, <sup> [1] </sup> </p>

 

22. time

<Time> time indicates the time, date, and time period. the tag defines the time (in 24-hour format) or date of the Gregorian calendar, time and time zone offset are optional </time> <p> We open at <time> </time> every morning. </p> <p> I have a date on <time datetime = "2008-02-14"> Valentines day </time>. </p>

 

23. span

<Span> A span is the same as a div. It has no semantics and is only suitable for words and phrases. You can separate documents and add appropriate styles. </Span> <p> <span style = "color: blue;"> just </span> subject to <span style = "color: darkolivegreen; "> cting </span> influences and makes life much more interesting </p>

 

24. var

<Var> define variable </var> <var> variable </var>