If your HTML is full of Divs, be careful

Students who do front-end development know that the basic components of a web page are HTML, JavaScript, and CSS. Developers usually pay more attention to JavaScript and CSS, and practice various language specifications and design patterns. They pay less attention to HTML. As long as they can produce the interface drawn by the designer, everything will be fine. They don't care whether the HTML is standardized and reasonable. As a result, the following situation can be seen everywhere:

• Buttons use clickable <div> elements instead of <button> elements
• The title uses a <div> instead of a heading element (<h1>, <h2>, etc.)
• The corresponding text tag of <input> uses <div> instead of <label>
• The input box also uses a <div> bound to the keyboard event instead of <input>

See? One <div> does it all! Is there a problem with this? It seems that there is no big problem. After all, the page looks as designed and can be interacted with normally. But have you ever thought about it, if <div> can solve everything, why do we need dozens or hundreds of other tags? This is what we have to say about the semantics of HTML.

1 What is semantics?

Semantics means that HTML elements have corresponding meanings. They are used to describe the content of an element or its relationship with other elements. In HTML, except for <div> and <span>, most of the elements are semantic.

The degree of semantics of tag names also varies. For example, <section> is more vague than <article> in describing the content. <section> is also semantic because it indicates that the content should belong to a group. <article> not only indicates that its content belongs to a group, but also indicates that it is an article.

To further illustrate the importance of semantics, let’s use title and button elements as examples.

Title Elements

<h1> is the title of the page, and together with the <h2> below it, it forms the hierarchical structure of the page.

 <! -- h1, first level title -->   
 
 <h1>When your HTML is full of divs, maybe it’s time to rethink it</h1> 
 
 <! -- h2 Second level heading -->   
 
 <h2>What is semantics</h2> 
 
 <! -- h3 level 3 heading -->   
 
 <h3>Title element</h3>

In many rich text editors, using the appropriate heading structure, the table of contents can be automatically generated. For example, the directory structure of this article is as follows:

As you can see, HTML itself conveys the structural information of the entire article. On the contrary, if all <div> is used, it will become like this:

• <div>: When your HTML is full of divs, maybe it’s time to rethink
• <div>: What is semantics
• <div>: title element
• <div>: button
• <div>: non-semantic element
• <div>: Summary

Since <div> has no meaning attached to it, it is a flat structure. As long as the correct HTML tags are used, the DOM will become clear and structured.

Button

The function of a button is to submit a form or change the state of an element. By definition, a button has the following characteristics:

• Focusable
• Can be activated by pressing the space bar or the enter key
• Can be activated by mouse click

When you use <div> to bind click events to simulate buttons, you cannot use the semantic interaction features that <button> naturally comes with. You also need to implement these features manually:

• Focus state
• Keyboard interaction
• Mouse Interaction

Not only that, when a screen reader encounters the <button>Submit</button> element, it will recognize the semantics and tell the user that this is a submit button. If it was just a <div>, the screen reader would not think it was a button.

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

2 Non-semantic elements

As mentioned before, <div> and <span> are non-semantic elements. <div> does not add any meaning to the content, it is just a <div>. Of course, this is not entirely accurate, because there are still some slight differences between <div> and <span>:

• <div> is a block-level element
• <span> is an inline element and should be placed inside other elements, such as <p><span class="dropcap">Inline elements</p>

If you really can't find a corresponding HTML element to represent the content, you can use <div> or <span>. Since <div> and <span> are designed, they naturally have their uses. After all, not every HTML element needs additional semantics.

The general principle is to use the corresponding semantic elements to represent the content first. As a second choice, use tags with less clear meanings. Finally, consider using <div> and <span>.

3 Summary

Although using semantic HTML elements will not bring obvious benefits to your project, I still recommend you to do so. At least, semantic HTML pages can bring better SEO rankings, are more friendly to screen readers, and have higher code readability. If you are an aspiring coder, I believe you will agree with me.

This article is reprinted from the WeChat public account "1024 Translation Station", which can be followed through the following QR code. To reprint this article, please contact the 1024 Translation Station public account.