Some understandings about HTML semantics_html/css_WEB-ITnose

I think everyone has seen the word semantics countless times, especially in some job advertisements.

In fact, I am the same, but every time I see it, I feel that it is copied by recruitment companies. In fact, they can’t tell what semantics is, and they don’t value it at all.

So I never took this thing seriously.

However, when I saw this word again recently, I thought I should think about this issue carefully. Just write a blog to record it.

1. What is semantics?

Before explaining this concept, we should first explain "structure-performance-behavior".

If decoupling is the high state of code, then the principle of "structure-performance-behavior" is the benchmark for the front desk.

As the front-end code becomes larger and larger, it becomes more and more important for each part of the code to perform its own role.

As we all know, the front-end code is implemented by HTML CSS JS. They correspond to being responsible for "structure-performance-behavior".

HTML takes care of the structure.

What is the structure? To simply understand, the structure is the hierarchy, nesting relationship, etc. of HTML nodes. For example,

<header>      <h1></h1></header><section></section><footer></footer>

The above code shows that the document structure is that header, section, and footer are of the same level. Then h1 is the direct child node of the header. In other words, there is only one level of nesting between them.

However, there is a problem, look at the code below

<div>     <span style="font-size:16px;font-weight:bold;"></span></div><div></div><div></div>

Doesn’t this code also show the structure? Moreover, the display effect is no different from the above one (here I assume that H1 defaults to 16px, bold style), so what are the advantages of the above code compared with this paragraph?

The advantage lies in semantics.

The first piece of code not only shows the structure, but also tells us that it is the head, area block, tail sibling, and there is a big title in the head. And can the second piece of code reflect this?

So, to give you a conclusion? Semanticization is to make the meaning of the tag consistent with the content it wraps.

2. Why is semanticization necessary?

I have summarized 3 points and divided them into

1. Make it easier for machines to understand the code, which is beneficial to SEO

Also Take the above two pieces of code as an example. The second piece of code, let alone a machine, even humans cannot understand what it expresses. The first piece of code can be understood by both humans and machines.

When search engine crawlers understand your code, your website ranking will naturally increase.

2. The code is simpler and more reusable. Using appropriate tags can save a lot of css or js.

Cleaner code: This one is obvious. The second paragraph of code has more style definitions, but the first paragraph does not.

Higher reusability: If this HTML structure is used in many places, then the first paragraph has more applicable scenarios. For example, the second piece of code has a fixed 16-pixel boldness, but the first piece of code only indicates that this is an h1. If you don't rewrite it, use the h1 style. If you rewrite the h1, then use yours.

Write less css: I mentioned it in the code conciseness section, so I won’t repeat it.

Write less js: You can talk about this, for example, look at the following code

<!-- 语义化的form --><form>    <input type="submit" /></form><!-- 非语义化的form --><form>    <a href="javascript:document.forms[0].submit()" >submit</a></form>

In the non-semantic form code, use a tag and js to implement Submit function. However, I wrote more js code. Secondly, in the semantic form, you can press Enter to submit, but if you use the a tag, you cannot press Enter to submit. Of course, you can write a lot more js to achieve perfect simulation, but what's the point?

3. Better accessibility

This is mainly for screen readers or other browsers that do not understand CSS well. Semantic HTML can be read without CSS, but non-semantic HTML is difficult.

3. How to make your code semantic?

The w3c verification cannot verify whether your code is semantic, and there is no tool to test whether your code is semantic.

What does this mean? This shows that you cannot solve the problem of code semantics by learning a language.

Regarding how to make your code semantic, I think there is a way to do it

First of all, you need to master commonly used tags, including the meanings of the tags. You can refer to here

Secondly, when you write HTML, always think about whether this writing meets the semantic requirements.

Finally, I often look at the websites of some big companies (especially new sites) and open source project codes. I know everyone does this, but whenever you look at how they write css and how they write js, Please take a moment to look at how they write HTML and think about why they write it this way.

In this way, I believe that your HTML code semantics will gradually become better and better.

In short, semantic HTML coding is not a problem that can never be solved, but a problem of continuous improvement. It is not worth spending a lot of energy to learn at once, but it is a skill that needs to be accumulated a little every day to improve.

Finally, I believe the first reaction of many people after reading this article is... "Oh, it turns out that the HTML writing method I have been using is called semantics!"

Reprint Please indicate the author and source of articles on this site Qi Pa Duo Duo? http://www.cnblogs.com/season-huang/, please do not use it for any commercial purposes