Those of you who do front-end development know that the basic components of a web page are HTML, JavaScript and CSS. Developers tend to focus more on JavaScript and CSS, practicing various language specifications and design patterns. The attention to HTML is obviously less, as long as the designer can draw the interface is fine, do not care about HTML is reasonable. So here’s what happens everywhere:

  • Buttons are clickable<div>Rather than<button>The element
  • The title says<div>Instead of the title element (<h1>.<h2>Etc.)
  • <input>The corresponding text tag uses<div>Rather than<label>
  • The input field is also bound to keyboard events<div>Rather than<input>

See yet? A move

walk the world! Is that a problem? It doesn’t seem to be a big deal, as the page looks designed and interacts properly. But have you ever wondered, if

is everything, why do you need dozens or hundreds of other tags? This brings us to the semantics of HTML.

What is semantic

Semantically means that HTML elements have corresponding meanings. It describes the contents of an element or its relationship to other elements. In HTML, with the exception of

and
, almost all elements are semantic.

Tag names also vary in the degree to which they are denoted. For example,

is more ambiguous than

.

is also semantic because it indicates that content should belong to a group. And

not only means that its content belongs to a group, it is also an article.

To further illustrate the importance of semantics, the title and button elements are used as examples.

The title element

is the title of the page, plus

below to form the hierarchy of the page.

<! -- h1, the most important part --> <h1> When your HTML is full of divs, be careful </h1> <! "What is semantic" is the subheading of "When your HTML is full of divs, maybe it's time to rethink" --> <h2> What is semantic </h2> <! <h3> </h3> </h3>Copy the code

In many rich text editors, content directories can be generated automatically with the appropriate title structure. For example, the directory structure of this article looks like this:

  • <h1>When your HTML is full of divs, you have to be careful
    • <h2>: What is semantic
      • <h3>: Header element
      • <h3>Button:
    • <h2>: non-semantic elements
    • <h2>:

As you can see, the HTML itself conveys the structure of the entire article. Instead, if you use

for everything, it looks like this:
  • <div>When your HTML is full of divs, you have to be careful
  • <div>: What is semantic
  • <div>: Header element
  • <div>Button:
  • <div>: non-semantic elements
  • <div>:

Since

does not carry any meaning, it is a flat structure. With the right HTML, the DOM becomes clear and structured.

button

Buttons are used to submit a form or change the state of an element. By definition, buttons have the following characteristics:

  • Available focus
  • It can be activated by hitting the space bar or enter key
  • It can be activated by mouse click

When you use

to bind click events to simulate buttons, you can’t use the semantic interaction features that come naturally to
  • Focus state
  • Keyboard interaction
  • The mouse interaction

Not only that, but when the screen reader hits the element, it recognizes the semantics and tells the user that this is a submit button. If it’s just a

, the reader doesn’t think it’s a button.

When we use semantic HTML elements, we give meaning to the content, and the content comes to life.

Non-semantic elements

As mentioned earlier,

and
are non-semantic elements.

doesn’t attach any meaning to the content; it’s just a

. Of course, this is not entirely accurate, because there is a slight difference between

and
:

  •  <div>Are block-level elements
  • <span>It’s an inline element that should be inside other elements, like<p><span class="dropcap">I</span>nline elements</p>

If you can’t find an HTML element to represent your content, you can use

or
. Since

and
are designed, they have their uses. After all, not every HTML element requires additional semantics.

The general rule is to prioritize the use of corresponding semantic elements to represent content whenever possible. The next best thing is to use labels that are less clear.

and
are considered last.

conclusion

While using semantic HTML elements will not bring obvious benefits to your project, I recommend doing so. At the very least, semantic HTML pages lead to better SEO rankings, better screen reader friendliness, and more readable code. If you are an ambitious Coder, you will agree with me.

This article was originally posted on 1024 translation site