The following two pieces of code have any problem from the perspective of semantic HTML view?

<!-- 示例1 -->
<label>作者: <input type="author" texture="deep pile"></label>
<!-- 示例2 -->
<body>
  <h1>【深度】扒开V8引擎的源码，我找到了你们想要的前端算法</h1>
  <h2>下次面试官再问算法，用它怼回去！</h2>
  ...

Readers can first try the above example code semantic, look at the answers at the end of the text.

HTML semantic (in accordance with the W3C specification label elements and the proper use of their property, hereinafter referred to as "semantic", refers to HTML HTML5) mentioned many articles, but most of the content is to publicize the need for semantic, and then persuade the reader in development multi using semantic tags.

This article does not publicize necessity, not harder recommended for most readers to write semantic code, only the semantics of the status quo to explore, and gives practical semantic operation.

Status semantic

We abuse of non-semantic tags as an example to look at the current level of semantic web.

Non-semantic tags in fact only two div and span, would have these two labels only as the default labels of supplements, but the reality is their frequency of use is far more than other semantic tags.

Here is a statistical number of tags js script, it can use the statistics of the number and proportion of individual labels on the page.

Open the browser console, execute the following code to get the results.

var total = 0
var obj = Array.prototype.reduce.call(document.querySelectorAll('*'), (acc, cur) => {
  let tag = cur.tagName.toLowerCase()
  acc[tag]= acc[tag] || 0
  acc[tag]++
  total++
  return acc
}, {})
var list = []
for(let k in obj) list.push({tag: k, times: obj[k], ratio: (obj[k] * 100 / total).toFixed(2) + '%'})
console.clear()
console.table(list.sort((a, b) => b.times - a.times))

We take a look at the most frequently used search engine page, semantic degree of 67.5% .
{% Asset_img baidu.jpg%}

Best achieve semantic page than the page article posts and the like, but a blog site pages extent semantic 61.29% .
{% Asset_img jianshu.jpg%}

An electricity supplier website page and then look at the forefront of the market capitalization of the world ranking, semantic degree of 43.19% .
{% Asset_img taobao.jpg%}

More statistical data is not posted, the overall situation is very low degree of semantics.

Why Semantic so not to be seen?

Semantic obstacles

Let's see how the scene is real development step by step towards the engineers on the road no semantic.

Semantic costs

HTML defines more than 100 labels, if we want to remember them all, does have some difficulty.

Even classification memory, there are a dozen categories, if coupled with a different label for each property, and not a small amount of memory.

So use the time you may also need to check documents.

On the development of efficiency is not as good as the direct use div and span to achieve the function.

Semantic earnings

The use of a technology, first consider its earnings, or it can solve any problem, then the semantics of what can bring it?

Enhance code readability.
Conducive to SEO.
Care for visually impaired users.
...

Having said that, in fact, be summed up in just one thing: to enhance recognizability .

Recognition of the importance of self-evident, there is no recognition like the movie "The Wind Whispers curse" in the village a lot of people called Wang Fugui, a cry Wealthy people back.

That being said semantic imperative?

Definitely ~

Semantic HTML is not the only means to achieve identifiable, tags id, property, style name can be.

Write a CSS style classes, the way to put the recognition of the problem has been solved (Imagine, if you can not custom style, or style can only use class selectors, who can not semantic?), And then repeated by the style class or attribute id be identified.

And this in several ways compared to earlier, there is no obvious semantic use of proceeds.

Non semantic loss

From the developer's point of view to consider, if you do not use semantic label what harm it?

Unfortunately, almost no ~

On the readability of the code, semantic HTML is not able to solve, and moreover id and css style class is almost resolved.
On SEO, there are other means: to write meta tags, multi-link. Of course, money is certainly the most indirectly.
As far as the visually impaired user, the priority of this demand would not have to explain too much, are they small and medium sized companies will not be considered.

Since the bottom of the developer does not semantic power, then the manager whether it is possible to promote semantic rule it?

I "three common types of code standards," mentioned earlier, if you want to perform ground rules, people rely on self-discipline is difficult to achieve, by human to realize his law efficiency is too low, so the establishment of an automated check mechanism, the human discipline as a supplement, is the effective solution.

Many times we will use code checking tool such as eslint, tslint, HTML checking tool there are a few, but these tools can only check the syntax-checked, not semantic check.

For example, with a hump naming you can check out parent_nodethis variable name does not meet specifications, but the call is for a variable aor call the userinspection tool is powerless.

So mandatory semantic this road also leads to nowhere.

Semantic can only really give up?

For most engineers, I'm afraid so.

Write semantics of the code does not directly bring development to enhance efficiency, we would not have merited leadership appreciation and promotion and pay rise ......

But for engineers to pursue the technology, not!

They know that doing the right thing is more important than doing an easy task!

Semantic road

If you have decided to embark on the semantics of the road, I believe the following three steps can help you.

1. Use properly labeled property

For the engineers have some experience in the development of non-semantic programming habits is a long form, we need to get rid of all one breath before programming habits die hard.

Not recommended for breath all the labels all down, and then rewrite the previous page down, the overall semantic technology.

Time-consuming and labor-intensive, it is easy to generate frustration and give up.

Therefore, the recommended way is to gradually achieve semantic, even a label from a property begins. Specific examples See Example 1

This stage is important is to develop semantic habits.

In many cases able to stick with it a habit to have half the battle.

2. Understand the structure of the document

After habit you can consider semantics of a page from the structure.

Non-semantic main problem is div and span tags abuse.

Do not use div and span is not realistic, after all, these two labels were invented also have use value.

First, it is possible to identify some areas likely to be abused so that we can greatly increase the degree of semantic page.

The first consideration is to reduce unnecessary div and span tags, and only then consider instead using the appropriate semantic tag.

For example, the daily content and development related to the text more, consider using h1 ~ h6, p, q, b ... these labels to replace the div and span.

Even the layout can also use some structural tags, such as: main, section, footer, aside, header instead div. Specific examples see Example 2

3. Classification memory

If you want to be completely semantic, you can also use the tool.

Below is a flowchart html5, for reference purposes only.

{% asset_img flowchart.png %}

W3C also gives a classification, it is the image, the animation is as follows:

{% asset_img categories.gif %}

Specific effects can view this site

Refer to the above two pictures, I put together a more operational version.

First, we do not need some basic tags into account, especially in the development of single-page application, we consider the major labels may be used when developing components.

!DOCTYPE,html,head,meta,base,link,style,body,script,noscript,

And then the rest of dozens of label classification, may not be entirely appropriate, but easy to remember and use.

{% asset_img flow.jpg %}

Of course, no matter which way, the premise still remember the meaning and properties of these labels.

Play the role of this tool is only when we write a page, to help us quickly and accurately determine which label to use.

to sum up

Semantic like a stone on the front-end growth path, seems to have lost every pebble will not be affected, but only to gather more stones paved the way for longer -

To prepare skilled semantic page and not directly help you become a senior front-end engineer, but was able to reflect the semantics of the front-end engineers work habits and technology literacy.

<!-- 示例1语义化 -->
<!-- type值修改为浏览器可识别的值 -->
<!-- 自定义属性使用data前缀 --> 
<label>作者: <input type="text" class="author" data-texture="deep pile"></label>

<!-- 示例2语义化 -->
<!-- 当出现主标题和子标题时，应使用hgroup标签作为父元素 -->
<body>
  <hgroup>
    <h1>【深度】扒开V8引擎的源码，我找到了你们想要的前端算法</h1>
    <h2>下次面试官再问算法，用它怼回去！</h2>
  </hgroup>
  ...

At the same time give the reader left a thinking accompanied answer questions:

<!-- 可点击的图标 -->
<div class="lazy avatar avatar loaded immediate"></div>
<!-- 点击后弹出的菜单 -->
<ul class="nav-menu user-dropdown-list">
  <div class="nav-menu-item-group">
    <li class="nav-menu-item">
      <a href="/user/592447fb44d904006ce996f8" class="link-icon">
        <i class="fengwei fw-person"></i>
        <span>我的主页</span>
      </a>
    </li>
    <li class="nav-menu-item">
      <a href="/user/592447fb44d904006ce996f8/likes">
        <img src="https://b-gold-cdn.xitu.io/v3/static/img/zan.e9d7698.svg" class="zan">
        <span>我赞过的</span>
      </a>
    </li>
    <li class="nav-menu-item">
      <a href="/user/592447fb44d904006ce996f8/collections">
        <img src="https://b-gold-cdn.xitu.io/v3/static/img/collect.02e2979.svg" class="collect">
        <span>我的收藏集</span>
      </a>
    </li>
  </div>
  <div class="nav-menu-item-group">
    <li class="nav-menu-item">
      <a>
        <i class="fengwei fw-logout"></i>
        <span>登出</span>
      </a>
    </li>
  </div>
</ul>

reference:

Most front-end engineers to understand, but not good at HTML semantics