Web Design: Semantic HTML tags

Semantic labeling:

In order for our website to be better captured by search engines, and to obtain higher traffic more naturally, the semantics of website tags is particularly important. The so-called semantic labeling refers to the meaning of labels.

The advantages of semantics:

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

Commonly used semantic tags:

<h1>~<h6>Tags :

Define the title of the page;

<h1>标题</h1>

<header>Tags :

Used to define the presentation area of ​​the page, usually including the website logo, main navigation, site-wide links, and search box. It is also suitable for marking a set of introductory or navigational content inside the page.

<header> 
   <h1>标题</h1>    
<nav>       
   <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>    
</nav>
</header>

<nav>element

Define the navigation link part area of ​​the page, which is used to define the main navigation part of the page;

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

<main>element

Define the main content of the page, a page can only be used once. If it is a web application, surround its main functions.

<main>
    <h1>标题</h1>
    <p>内容</p>
</main>

<article>element

Define the independent content of the page. It can have its own header, footer, sections, etc., focusing on a single topic blog post, newspaper article or web page article. Articles can be nested in articles, as long as the inside article and the outside 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>

<section>element

Elements are used to mark various parts of a document, such as chapters or main parts of a long form article.

<section>
    <h2></h3>
    <p></p>
</section>

<aside>element

Define content blocks related to the main content. Usually displayed as a sidebar.

<aside>
     <h1></h1>
     <p></p>
</aside>

<footer>element

Define the bottom area of ​​the document, which usually contains the author of the document, copyright information, terms of use of the link, contact information, etc.

<footer>
      底部内容
</footer>

<small>element

Define small fonts for less important content. If the font is already surrounded by the support of a minimum font size model, then the label will have no effect.

<p></p>
<small> 
   <time datetime=""></time>
   <a href=""></a>
</small>

<strong>element

Define the text as more emphasized content to express the importance of the content.

<strong>内容</strong>

<em>element

The content of the markup is focused (mostly used to enhance the semantics of the paragraph text) and is usually rendered as italic text.

<em>内容</em>

<blockquote>element

To define a block quote, the browser will add a line break before and after the blockquote element and increase the margin. The cite attribute can be used to specify the source of the reference

<blockquote cite="">内容</blockquote>

<abbr>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="">内容</abbr>