What are HTML semantic tags? A complete list of common HTML semantic tags

1. What are HTML semantic tags?

Semantic tags are designed to give tags their own meaning.

<p>一行文字</p><span>一行文字</span>

As shown in the above code, one of the differences between the p tag and the span tag is that the meaning of the p tag is: paragraph. The span tag has no unique meaning.

2. Advantages of semantic tags

1. The code structure is clear, easy to read, and conducive to team development.

2. Conveniently parsed by other devices (such as screen readers, blind readers, mobile devices) to render web pages in a semantic manner.

3. Good for search engine optimization (SEO).

3. Common semantic tags

Therefore, when writing the page structure, we should try to use semantic HTML tags

• b2386ffb911b14667cb8f0f91ea547a7: The main content of the page.

• b35601808ee30eac9a0f11ecc3d2c015: h1~h6, hierarchical titles, coordination of 4a249f0d628e2318394fd9b75b4636b1 and b2386ffb911b14667cb8f0f91ea547a7 is beneficial to search engine optimization.

• ff6d136ddc5fdfeffaf53ff6ee95f185: Unordered list.

• 25edfb22a4f469ecb59f1190150159c6: ordered list.

• 1aa9e5d373740b65a0cc8f0a02150c53: The header usually includes the website logo, main navigation, site-wide links, and search box.

• c787b9a589a3ece771e842a6176cf8e9: mark navigation, only used for important link groups in the document.

• 61b85035edf2b42260fdb5632dc5728a: The main content of the page, which can only be used once on a page. If it is a web application, surround its main functions.

• 23c3de37f2f9ebcb477c4a90aac6fffd: Defines external content that is independent of the rest of the document.

• 2f8332c8dcfd5c7dec030a070bf652c3: Define sections (sections, sections) in the document. Such as chapters, headers, footers, or other parts of the document.

• 15221ee8cba27fc1d7a26c47a001eb9b: Defines content beyond the content it is in. Such as sidebar, a set of links to the article, advertisements, friendly links, related product lists, etc.

• c37f8231a37e88427e62669260f0074d: Footer, only when the parent is body, it is the footer of the entire page.

• d015d241ae6d34c34210679b5204fe85: Display small font effect, specify details, enter disclaimer, annotation, signature, and copyright.

• 8e99a69fbe029cd4e2b854e244eab143: Like the em tag, it is used to emphasize text, but it emphasizes the text more strongly.

• 907fae80ddef53131f3292ee4f81644b: Express the text as emphasized content, expressed in italics.

• f920514e6447cf1d171079d1371f007f: Use yellow to highlight part of the text.

• 24203f2f45e6606542ba09fd2181843a: Specifies independent flow content (images, charts, photos, code, etc.) (default margin is about 40px).

• 614eb9dc63b3fb809437a716aa228d24: Defines the title of the figure element, which should be placed at the position of the first or last child element of the figure element.

• f3a85e1241a187c5ac462d886e9a968b: Indicates that the contained text refers to a reference, such as the title of a book or magazine.

• fa57c8becaf0b8746ebae103568d6733: Define block references, which have their own space.

• 1244aa79a84dea840d8e55c52dc97869: Short quote (cross-browser issues, try to avoid using it).

• 46dd80ba616c57a652514755c74c4211: The datetime attribute follows a specific format. If this attribute is ignored, the text content must be in a legal date or time format.

• 8a7974376be5f6c00c121222b727adb9: Abbreviation or abbreviation.

• 7f9d788ef50b059a7f76f3d2e4ccc9d1: Definition term element, which must be immediately adjacent to the definition, and can be used in the description list dl element.

• 208700f394e4cf40a7aa505373e0130b: Contact information (email address, link to contact page) for the author, relevant person or organization.

• 823db3943044a0a9a620ada8d4b1d965: Removed content.

• 426be984ffbbb815d7d88e3543a85d91: Added content.

• ffbe95d20f3893062224282accb13e8f: tag code.

• 49c6123c49c6be380cb91db06cd3bfa9: Defines a scalar measurement within a known range or fractional value. (Internet Explorer does not support the meter tag)

• 6ecb87e5318a36c03c59e25d55f43372: Defines the running progress (process).

For more related tutorials, please visit Html5 video tutorial