In HTML5, there is a feature of semantic tags. I believe that most people like me have a habit of learning and growing in their work, but they tend to focus on Javascript, CSS3, ES6, Vue3.0 and other directions. This includes Typescript, which has been hot for a while, and very few people tend to focus on HTML5 anymore.

preface

After all, you might have been so numb to div + CSS that you thought you could go through the whole project, but this kind of page structure is relatively bad for SEO, code reading, and performance optimization. Writing the right label can also make your project shine.

Of course, if you are strongly concerned about compatibility with IE, then this chapter is not a good place to study.

define

The right labels do the right things

benefits

Generally since learning, first of all to understand its benefits, this way will learn meaningful, its benefits mainly have the following three points:

  • HTML semantics make the content of the page structured, clearer structure, easy to browser, search engine parsing; It is displayed in a document format even without styling CSS and is easy to read

  • Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO.

  • Make it easier for people reading the source code to divide the site into chunks for team development and maintenance

HTML5 pure semantic tags are commonly used

It is a purely semantic tag used to mark what the current content block is mainly written about.

<article>

The

tag, as the name suggests, defines the parts of the article.

Use environment:

  • BBS posts
  • Blog posts
  • News stories
  • comments

<aside>

The

Use environment:

  • directory
  • The index

<address>

The

tag is used to provide personal or organizational information such as address or contact information.

Use environment:

  • Shipping address
  • Copyright information
  • Contact us

<header>

The

tag represents the header information for the web page.

Use environment:

Wrap top navigation bar.

<footer>

The

tag represents either the chapter content or the footer in the root node element.

Use environment:

Wrap the copyright information bar at the bottom of the page.

<hgroup>

The

tag mainly assembles the child elements between

and

, so it is called

.

Use environment:

A multilevel directory to which document sections belong.

<nav>

The

Use environment:

The navigation bar

<section>

The

tag represents a separate part contained in an HTML document that has no more specific semantic element to represent it.

Use environment:

A separate part that is not represented by a more specific semantic element.

<label>

The

Use cases:

<label for="name">The name</label> 
<input type="text" name="name" id="name" />
Copy the code

<caption>

The tag is used to define the table’s title.

Use environment:

Form.

HTML5 semantic tags are commonly used

It refers to having a semantic function while having its own unique function, such as having a unique style or function.

<noscript>

The

Use environment:

Basically all use, also calculate a compatibility configuration.

Usage plan:

<noscript>Sorry, your browser does not support JavaScript!</noscript>
Copy the code

<base>

The tag specifies the default URL and default destination for all links on the page, except that it is similar to the
tag, which is written in the header of the document.

Use cases:

<base href="https://www.cooldream.fun/home" target="_blank">
Copy the code

<del> & <ins>

The tag basically means delete, that is, delete a part.

The tag basically means insert, which is a complement to delete, and it also has two attributes

  • cite

    The value of the cite attribute points to the URL of a document that explains why the text was inserted or modified. (This property is not currently supported by major browsers.)

  • datetime

    This property indicates the time and date on which this modification occurred, and the value of this property must be a valid date or time string

Therefore, the two tags are generally used in pairs, but can also be used separately.

Use environment:

Document update iteration, or activity price, etc.

Use case

<del>
  <p>"V2.6.10"</p>
</del>
<ins cite=".. /howtobeawizard.html" datetime="The 2018-05">
  <p>"V3.0.0"</p>
</ins>
Copy the code

The effect is as follows:

<figure> & <figcaption>

The

tag represents a single piece of content and is often used with the caption

Use environment:

  • Need images, tables, code snippets, etc. with text description

Use cases:

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>
Copy the code

The effect is as follows:

<summary> & <detail>

The

tag creates a widget that displays the contained information only when it is switched to the expanded state.

The

tag is usually used in conjunction with the

tag as a summary, title, or legend of the content of a

element.

Use environment:

A quick brain turn, an interview question, or a technical explanation of a personal blog.

Use cases:

<details>
  <summary>Guess how old I am</summary>
  <p>A boy is always eighteen</p>
</details>
Copy the code

The effect is as follows:

<sub> & <sup>

indicates the subscript

indicates the superscript

Use environment:

is generally used for squares, cubes, etc.

<progress>

The TAB represents the progress bar. It has a Max attribute to set the maximum value of the progress bar, and a value attribute to indicate the current value.

Use cases:

<progress id="file" max="100" value="70"> 70% </progress>
Copy the code

The effect is shown below: