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

<strong>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 <code>p tag and the <code>span tag is that the meaning of the <code>p tag is: paragraph. The <code>span tag has no unique meaning.

2. Advantages of semantic tags

<li>

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

<li>

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

<li>

Good for search engine optimization (SEO).

3. Common semantic tags

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

<li>

<code><title>: The main content of the page.

<li>

<code><hn>: h1~h6, hierarchical titles, coordination of <code><h1> and <code><title> is beneficial to search engine optimization.

<li>

<code><ul>: Unordered list.

<li>

<code><li>: ordered list.

<li>

<code><header>: The header usually includes the website logo, main navigation, site-wide links, and search box.

<li>

<code><nav>: mark navigation, only used for important link groups in the document.

<li>

<code><main>: 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.

<li>

<code><article>: Defines external content that is independent of the rest of the document.

<li>

<code><section>: Define sections (sections, sections) in the document. Such as chapters, headers, footers, or other parts of the document.

<li>

<code><aside>: 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.

<li>

<code><footer>: Footer, only when the parent is body, it is the footer of the entire page.

<li>

<code><small>: Display small font effect, specify details, enter disclaimer, annotation, signature, and copyright.

<li>

<code><strong>: Like the <code>em tag, it is used to emphasize text, but it emphasizes the text more strongly.

<li>

<code><em>: Express the text as emphasized content, expressed in italics.

<li>

<code><mark>: Use yellow to highlight part of the text.

<li>

<code><figure>: Specifies independent flow content (images, charts, photos, code, etc.) (default margin is about 40px).

<li>

<code><figcaption>: Defines the title of the <code>figure element, which should be placed at the position of the first or last child element of the <code>figure element.

<li>

<code><cite>: Indicates that the contained text refers to a reference, such as the title of a book or magazine.

<li>

<code><blockquoto>: Define block references, which have their own space.

<li>

<code><q>: Short quote (cross-browser issues, try to avoid using it).

<li>

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

<li>

<code><abbr>: Abbreviation or abbreviation.

<li>

<code><dfn>: Definition term element, which must be immediately adjacent to the definition, and can be used in the description list dl element.

<li>

<code><address>: Contact information (email address, link to contact page) for the author, relevant person or organization.

<li>

<code><del>: Removed content.

<li>

<code><ins>: Added content.

<li>

<code><code>: tag code.

<li>

<code><meter>: Defines a scalar measurement within a known range or fractional value. (Internet Explorer does not support the meter tag)

<li>

<code><progress>: Defines the running progress (process).

For more related tutorials, please visit Html5 video tutorial