Home > Web Front-end > H5 Tutorial > body text

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

PHPz
Release: 2018-10-12 17:04:27
forward
2126 people have browsed it

<strong>1. What are HTML semantic tags?

Semantic tags are designed to give tags their own meaning.

<p>一行文字</p><span>一行文字</span>
Copy after login

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 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).

<h1>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

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template