Semantic HTMLWhat is? What’s the point?

Semantic HTML represents the programmer’s thoughts and ideas at the code level and describes the structure of a web page:

  1. Communicate with fellow human programmers to help them quickly master current code. You can actually do this with comments, but useSemantic HTMLMore or less can save comments, haha.
  2. Communicate with other code building systems, such as disabled readers and search engine crawlers, to help them achieve their goals quickly and accurately. Because such systems are so limited compared to human intelligence, they need to agree on how to communicate, andW3CThe resolution ofSemantic HTMLThe standard.

When filling up the front end foundation recently, encounter this knowledge point, discover the information on the market is mixed and disorderly mostly, and often can only mean and can’t talk, it is very difficult to find what practical value among them, therefore feature this article, not in vain comprehensive analysis, only practical supremacy.

Document chapter class HTML tag

Document chapter HTML tags reflect the structure of a web page, so they have the most semantic HTML tags.

<article> / <section>

These two tags are semantically similar in that they represent a separate area of the document (a separate unit) that can also be structurally broken down into

/

and so on. The

tag is one level larger than the

tag:
  1. <article>Can contain<section>For example, a blog post usually has a list of “related posts” at the bottom or side of it, so this whole HTML can be used<article>Wrap it up, while the “related articles” piece of HTML can be usedsectionTo represent; For example, “copyright information” for an article can also be usedsectionTo represent.
  2. <article>Can be included in the<article>For example, for an article and user comments on that article, the whole HTML can be used<article>User comments logically belong to this article and can therefore be used<article>Wrap up and file into the article<article>Under.
  3. <section>You can’t put it down again<section>This means that this is the smallest level of independent cell tag.
  4. <article>Generally used for “details”, so usually a page contains only one top-level<article>. But on the contrary,<section>For a wider range of purposes, except for “details”<section>To carry parcels, such as: website home page, can be used<section>To display a list of articles in different categories/columns.

<header> / <footer>

These two labels are similar in nature, so put them together for comparison: one for the head, one for the bottom. At first glance, you might think that these two tags are the header of a web page (usually containing the LOGO, BANNER, top navigation, etc.) and the bottom of the page (information about the site itself, including copyright information, contact information, etc.), but in fact, these two tags are much more than that. It can be used as part of a separate unit (

/

/

For an article, use

for title/author/publication date, and

for copyright information, reference articles, etc.

<main>

/


.

is the main part of the page. Unlike

/

, a page can have only one

, not separate units.

contains only the core content of a page, such as an article, and the rest of the content, such as the search bar, menu, etc., should not be included.




<aside>

<nav>

<h1> - <h6>

< H1 > – < H6 > represents the title. There are 6 levels in total, among which < H1 > has the highest weight, < H6 > has the lowest weight, and the others decrease successively. Generally,

should be assigned to the site name /LOGO. If a secondary domain name is set, it can also be assigned to the site name /LOGO of the sub-site. For search engines,

–

is an important way to understand the web page, so be sure to allocate appropriately, for example: < H2 > for the title of the article, < H3 > for the sub-headings in the article.

Text-level semantic HTML tags

There are plenty of text-level semantic HTML tags, but I don’t think many are of practical value.

<a>

represents an entry point to another page or other location on the current page. This is a long-standing semantic tag and the foundation of search engines, so we won’t go into details here.

<p>

represents a paragraph, which is also an old tag. Semantically, I prefer to use

to represent a piece of plain text rather than

to render a style.

<em> / <strong>

Both of these tags are used to emphasize a particular word/sentence. It is said that these tags are used to semantically replace < I > and . So what’s the difference between and < I >? The answer is that < I > is no longer used to indicate emphasis, but merely to distinguish proper nouns (names, titles, etc.) from ordinary words. is similar to < I > in that it is no longer emphasized, and in some ways has lost its semantics and is only used as an auxiliary tag to complete CSS styles.

<time>

Combined HTML tags

<figure>

A

is a piece of rich text. It can be an illustration of an article, a piece of code, or a table. It is usually accompanied by a < Figcaption > to describe the rich text. A typical use of

comes to mind, though, is the waterfall block:

Structured data

This is a very important area in SEO, and you can clearly identify the attributes of a page body according to some rules that have been drawn up so far. For example: a product details page, with ordinary semantic representation, probably only the name of the product can enter the search engine eye; But with structured data, you can specify the price, the supplier, the picture, and so on, with certain tags and attributes; After the search engine has obtained each attribute of the product page, it will be directly presented on the search results page, and there will be some emphasis on the ranking. There is a lot of content in this area, it is recommended to refer to the optimization guide of the major search engines, after all, each search engine supports different levels of structured data. Here’s the Google-enabled structured data website: http://schema.org/