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
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
Use environment:
Wrap top navigation bar.
<footer>
The
Use environment:
Wrap the copyright information bar at the bottom of the page.
<hgroup>
The
tag mainly assembles the child elements betweenand
, so it is called
.
Use environment:
A multilevel directory to which document sections belong.
<nav>
The
Use environment:
The navigation bar
<section>
The
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, 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
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 as a summary, title, or legend of the content of a
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
Use cases:
<progress id="file" max="100" value="70"> 70% </progress>
Copy the code
The effect is shown below: