Semantic tag:

In order to make our website better by the search engine capture included, more natural access to higher traffic, the semantic site tag is particularly important. The semantic meaning of label is the meaning of index sign.

Advantages of semantic:

  • Make the page present good content structure without CSS;
  • It is beneficial to SEO. Crawlers rely on tags to determine the weight of keywords, so they can establish good communication with search engines and help crawlers capture more effective information.
  • Improve user experience;
  • Easy for team development and maintenance, semantic makes code more readable;
  • Easy parsing by other devices to render web pages in a meaningful way;

Common semantic tags:

< h1 > ~ < h6 > tags:

Define the page title;

< H1 > First level title </ H1 > <h2> Second level title </h2>...... </ H6 >Copy the code

The < header > tag:

The presentation area used to define a page, usually including the site logo, main navigation, site-wide links, and a search box. It is also good for marking up a set of introductory or navigational content within a page.

< header > < h1 > title < / h1 > < nav > < ul > < li > < / li > < li > < / li > < li > < / li > < / ul > < nav > < header >Copy the code

<nav>The element

Define the navigation link section of the page, used to define the main navigation section of the page;

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>
Copy the code

<main>The element

Define the main content of a page. You can only use a page once. If it’s a Web application, cover its main functions.

<main> <h1> Title </h1> <p> Content </p> <p> Content </p> </p> </main>Copy the code

<article>The element

Define page-independent content, which can have its own headers, footers, sections, etc., for blog posts, newspaper articles, or web articles focused on a single topic. An article can be nested with an article, as long as the inside article and the outside article are part and whole.

<article>
    <header>
        <h3>
            <a href=""></a>
        </h3>
    </header>
    <section>
        <p></p>
    </section>
    <footer>
        <small>
            <time datetime=""></time> 
            <a href=""></a>
        </small>
    </footer>
</article>
Copy the code

<section>The element

The element is used to tag parts of a document, such as a chapter or main section of a long form article.

<section>
    <h2></h3>
    <p></p>
</section>
Copy the code

< value > element

Define a block of content related to the main content. Usually shown as a sidebar.

<aside>
     <h1></h1>
     <p></p>
</aside>
Copy the code

<footer>The element

Defines the bottom area of the document, usually containing the author of the document, copyright information, terms of use for links, contact information, etc

<footer> Bottom content </footer>Copy the code

< small > element

Define small fonts for less important content. If the enclosed font is already the minimum size supported by the font model, the tag will have no effect.

<p></p>
<small> 
   <time datetime=""></time>
   <a href=""></a>
</small>
Copy the code

< strong > element

Define text as more emphatic content to indicate the importance of the content.

The content of the < strong > < / strong >Copy the code

<em>The element

The markup content is focused (largely used to enhance the semantics of paragraph text) and is usually rendered in italics.

The content of the < em > < / em >Copy the code

The < blockquote > element

To define a block reference, the browser adds a line break before and after the blockQuote element and adds a margin. The cite attribute can be used to specify the source of a reference

</blockquote> </blockquote>Copy the code

<abbr>The element

Explain abbreviations. Use the title attribute to provide the full name, which is ok only when it appears for the first time.

<abbr title=""> contents </abbr>Copy the code