<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.
<h1>2. Advantages of semantic tagsThe 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).
Therefore, when writing the page structure, we should try to use semantic HTML tags
<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