Web semantics-monkey ape

Talking about web semantics-on the frontend programming road of monkey ape, I once heard people tell me what to write front-end, so pay attention to the structure semantics of html. What I did at the time was ignore...

I think the front-end is okay as long as you make cool effects and write awesome JavaScript code. P + css is invincible. Why should we use other labels.

Ah, think about how much cabbage you had at that time...

As mentioned above, p + css can achieve all the effects, and the user experience is great.

However,Please understand that p has no semantics. We can understand it, but what about search engines? The web pages we present require computers to connect to the Internet and communicate with others. The computers responsible for the transfer cannot view the content of the web pages like people, so we need to make them semantic.

For example, if I want to bold a font, we can write the following methods:

1. css:

SEO

2. B label:SEO

3. strong labels:SEO

In fact, the results are similar to everyone. However, they have different meanings.

The first and second methods only show the content in bold form and cannot be known by search engines. The third method is the semantic meaning of the strong tag, which indicates the emphasis. Therefore, if you want to emphasize it, you can choose the third method to conform to the semantics. If you just want to display the effect, you can just try it.

In fact, web semantics not only makes search engines understand, but also developers.

If we get a piece of html code and don't run it, are we blind at the beginning? We don't know the meaning of the Code. However, if we use semantic-based coding, the document structure will be much clearer.

A long time ago, I thought about what headers and nav tokens in html5. When I went to the interview, someone asked me if I knew about html5. I have learned about it. He said, let's talk about the understanding of the headers and nav tags. I wrote twice at the time that it was similar to p, but it was just a box. Ah, an ignorant teenager...

Here are some semantic tags:

Html Tag	Semantics
Title	Webpage title
H1 ~ H6	Outline level title
Caption	Table title, specifying the table description
Legend	Form Element Title, form description
P	Section
Ul	Unordered list
Ol	Ordered list
Dl	Custom list
Em	Partial emphasis.
Strong	This article emphasizes more

I am tired of maintaining others' bugs at work today.

Sleep, good night, everyon ~