Deeply analyze the semantics of HTML and its related front-end frameworks

This article mainly introduces the in-depth analysis of HTML's semantics and the front-end framework related to it. Simple HTML also has great knowledge! Friends who need it can refer to the following questions about semantics

Semantics studies the relationship between signs and symbols and the meaning they represent. In linguistics, it mainly studies the meaning of these markers (such as words, phrases, or sounds) in language. In the field of front-end development, semantics mainly involve the meaning agreed upon by HTML elements, attributes and attribute values (including extensions like Microdata). These formal convention semantics commonly used in specifications can help programs (and those who later participate in the development) better understand information on all aspects of a website. However, even if the semantics of these elements, attributes and attribute values are formalized, they still have to be subject to the developer's adaptability and the results of their joint choice. This makes it possible for formal convention semantics to be modified in the future (and this is one of the principles of HTML design).

Abiding by the principle of writing semantic HTML is one of the foundations of modern professional front-end development. Most of the semantics are related to the current or expected content properties (such as: h1 element, lang attribute, email value of type attribute, Microdata).

However, not all semantics need to be content-oriented. Class names cannot be semantic. No matter what name it is, they must have meaning and purpose. The semantics of class names can be different from those HTML elements. We can use the global semantics of HTML elements, certain HTML attributes, Microdata, etc., and then use the local specific semantics of the website or application to distinguish them. These specific semantics are usually contained in the attribute value, such as the class attribute.

Although this assumed best practice is reiterated in the chapter on class properties of the HTML5 specification...

…Developers are encouraged to use class attribute values to describe the actual content, rather than describing what they expect to present.

...There is no inherent reason to do so. In fact, when this method is applied in large websites or applications, it often becomes a barrier.

HTML elements and other attributes already provide the content layer semantics

For machines or visitors, there is very little useful semantic information that the class name can reveal, or even no. Unless it is the small part of the name already agreed (also readable by the machine) - Mircoformats

The main purpose of class names is to be a hook for CSS and JavaScript. If you don't need to add performance and behavior to your page, then you may not have to add class names to your HTML

Class names should convey useful information to developers. When you read a DOM snippet, it will help understand the specific role of a certain class name. Especially in multi-person collaboration development teams, front-end developers are not only dealing with HTML components.

Let's give a very simple example: