What’s wrong with the following two pieces of code from the perspective of HTML semantics?

<! Example 1 --> <label> Author: <inputtype="author" texture="deep pile"></label> <! </h1> <h2> </h1> </h1> </h1> </h2> ...Copy the code

Try semantically interpreting the code in the example above and see the answer at the end of this article.

Semantic HTML (the correct use of tag elements and their attributes in accordance with the W3C specification, “semantic”, HTML refers to HTML5) has been mentioned in a number of articles, but most of the articles first promote the need for semantic, and then persuade readers to use semantic tags in their development.

This article does not preach the necessity, nor does it recommend that most readers can write semantically. Instead, it explores the current state of semantically and presents a feasible way to do it.

The state of semantics

Let’s take the abuse of non-semantic tags as an example to see how semantic the web is today.

There are only two div and SPAN tags that are not semantic. These two tags are supposed to supplement the default tags, but they are used far more often than other semantic tags.

The following is a section of statistics label number JS script, it can be counted out on the web page each label number and proportion.

Open the browser console and execute the following code to get the result.

var total = 0
var obj = Array.prototype.reduce.call(document.querySelectorAll(The '*'), (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) + The '%'})
console.clear()
console.table(list.sort((a, b) => b.times - a.times))
Copy the code

Let’s take a look at our most frequently used search engine pages, which are semantic at 67.5%.

It is better to realize semantic pages than the pages of articles and posts, but the semantic degree of a blog website page is 61.29%.

Take a look at the market value ranking of the world’s top e-commerce website page, semantic degree is 43.19%.

More statistics are not posted, but the overall picture is very semantic.

Why is semantics so unpopular?

Semantic barriers

Let’s take a look at how real development scenarios step by step push engineers down the path of semantically free.

The cost of semantics

HTML defines more than 100 tags, and it can be difficult to remember them all.

Even if the classification memory, there are more than ten categories, if the different attributes of each label, the memory is not small.

So you might need to check the documentation when you use it.

In terms of development efficiency, it is better to use div and SPAN directly.

Semantic benefits

When using a technology, first consider its benefits, or what problems it solves, what does semantematization bring?

  • Code readability improved.
  • Good for SEO.
  • Care for visually impaired users.
  • .

All of this boils down to one thing: enhanced visibility.

The importance of identification is self-evident. Without identification, many people in the village are called Wang Fugui in the movie “Wind Language Mantra”. Just call Wang Fugui and turn back.

So semantics is imperative?

No ~

HTML semantematization is not the only way to achieve recognition; tag ids, attributes, and style names can do the trick.

Write a CSS style class that solves the recognition problem (imagine if you can’t customize the style, or if the style can only use the class selector, who can’t be semantic?). The style class is repeatedly identified by attribute or ID.

Compared to the previous approaches, semantization has no significant usage benefits.

The loss of non-semantics

From a developer’s perspective, what’s the harm in not using semantic tags?

Unfortunately, there is hardly any

  • The readability of code can’t be solved by HTML semantics, and id and CSS style classes can almost be solved as well.
  • Other tools for SEO include: write good meta tags and use links. Of course, spending money is definitely the most direct effect.
  • As far as visually impaired users are concerned, the priority of this requirement is not explained too much, and small and medium sized companies don’t consider it at all.

Since there is no incentive for semantic semantics at the bottom of the developer hierarchy, can managers push semantic semantics through rules?

As I mentioned in 3 Common Code Specification Types, it is difficult to implement rules by human self-discipline alone, and it is too inefficient to implement rules by human labor. Therefore, it is an efficient solution to establish an automatic verification mechanism supplemented by human labor labor.

Most of the time we use code checking tools such as ESLint and TSLint, and there are several HTML checking tools, but they can only do syntactic checking, not semantic checking.

For example, using the hump naming rule can check that a variable name like parent_node is not in compliance with the specification, but the tool can’t check whether a variable should be called a or user.

So forced semantematization is a dead end.

Does semantics really have to be abandoned?

For most engineers, I’m afraid so.

Writing semantic code does not directly lead to productivity gains, nor does it lead to promotions and raises……

But for engineers with a technical bent, no!

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

The road to semantics

If you’ve decided to go down the semantic path, here are three steps that can help you.

1. Use attributes correctly for labels

For engineers with certain development experience, non-semantic programming habits are formed for a long time, and it is difficult to change all the previous programming habits at one go.

It is not recommended to write down all the tabs in one sitting and then rewrite the previous page to semantic implementation.

It’s time consuming and it’s easy to get frustrated and give up.

So the recommended approach is to semantics step by step, starting with a tag or even an attribute. See Example 1 for an example

At this stage it is important to form the habit of semantics.

In many cases sticking to a habit is half the battle.

2. Understand the document structure

Once you get into the habit of structurally thinking about semantic pages.

The main problem with desemanization is the misuse of div and SPAN tags.

It’s not practical not to use div and SPAN at all, since they were invented to be useful.

By identifying areas that are vulnerable to abuse first, you can greatly increase the semanticalization of your page.

The first thing to consider is reducing unnecessary div and SPAN tags, and then consider replacing them with appropriate semantic tags.

For example, if there is a lot of text related content in daily development, consider using H1 ~ H6, P, q, B… These tags replace div and SPAN.

Even layout can use structural tags such as main, Section, footer, aside, header instead of divs. See Example 2 for an example

3. Categorizing memory

If you want to be fully semantic, you can also leverage tools.

The following is a flow chart of HTML5 usage for reference only.

W3C also gives a classification method, which is very vivid, as shown in the animation below:

See this website for details

With reference to the above two figures, I have compiled a more practical version.

First of all, there are some basic tags that we don’t need to consider, especially when developing a single page application. We mainly consider the tags that might be used when developing components.

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

The remaining dozens of tags are then sorted into categories that are not necessarily accurate, but easy to remember and use.

Either way, remember the meaning and attributes of these tags.

The purpose of this tool is to help us quickly and accurately determine which TAB to use when we write a page.

conclusion

Semantic is like a stone on the road of growth in the front. Losing each stone seems to have no impact, but only by gathering more stones can we pave a longer road

The purpose of this article is not to be a weak cry for “semantics” because, as mentioned above, it does not provide much practical benefit. It is up to the reader to decide whether to focus on immediate benefits, as most engineers do, or on work habits and technical literacy, as craftsmen do.

The true meaning of this is given in the language story “Socrates and Plato shed their hands”.

<! -- Example 1 Semantic --> <! --typeChange the value to a browser-recognized value --> <! -- Custom attributes use the data prefix --> <label> author: <inputtype="text" class="author" data-texture="deep pile"></label> <! -- Example 2 Semantic --> <! <body> <hgroup> <h1> <hgroup> <hgroup> <h1> </h2> </hgroup> ...Copy the code

Add the answer and leave the reader with a question to ponder:

<! Clickable icon --> <div class="lazy avatar avatar loaded immediate"></div> <! -- Click the pop-up menu --> <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://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/zan.e9d7698.svg~tplv-t2oaga2asx-image.image" class="zan"<span> </span> </a> </li> <li class="nav-menu-item">
      <a href="/user/592447fb44d904006ce996f8/collections">
        <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/collect.02e2979.svg~tplv-t2oaga2asx-image.image " class="collect"> < span > my collection < / span > < / a > < / li > < / div > < div class ="nav-menu-item-group">
    <li class="nav-menu-item">
      <a>
        <i class="fengwei fw-logout"</span> </a> </li> </div> </ul>Copy the code

Reference:

  • HTML5 Element Selection Flowchart
  • A11Y 101: Writing HTML with Accessibility in mind
  • How to design web accessibility? What should I pay attention to when making a web page for the blind?
  • HTML Living Standard

Original link: tech.gtxlab.com/html-tag.ht…

Author information: Zhu Delong, Renhe Future Senior front End Engineer.