Semantic meaning of HTML tags, difference between i and em, b and strong tags

05.07.18 IT / Html 12022

HTML was designed in such a way that almost every element in it contains semantic meaning. The semantic meaning of tags - this means that each tag not only sets one or another appearance of the interface on the page, but also informs about why this tag is, explains the meaning and purpose of the tag.

Tags are not necessarily intended to create the look and feel of an interface, although they are currently designed to do just that. The appearance of tags can be interpreted and rendered as you like, on different engines and operating systems they may differ externally. But the semantic meaning of the tags is always the same, as clearly stated in the specification.

Novice users, as a rule, do not think at all about the meaning of tags, they only need to get the desired appearance. But this is the wrong approach, you need to use tags meaningfully. What is it for? All kinds of search engines and services use semantic rules to retrieve the necessary information, which means that if the page is properly designed using suitable tags, then it will be much more valuable for these search engines and services. This is an important factor in website promotion.

For example, you can often come across questions, which tag to use , one or the other, when they look exactly the same. The i tag and the em tag are just such tags. Outwardly, they do not differ in anything, but the semantic meaning is different. The first i tag just makes the text italic, while the second em tag gives the text inside it a special meaning. Text becomes more important on the page. That is, if you do not look at the external result, then the em tag gives a semantic highlight, but the i tag does not. When you look at the results in a browser, they look the same, but the text in the em tag has a special meaning. Thus, the difference between i and em is established.

Another similar example, the b and strong tags. Here, even from the name, you can understand that the second tag is much more significant. Indeed, b just makes the text bold, and strong bold and gives semantic meaning to the text placed in this tag. Especially important for search engines, the text in strong plays a big role in the search results. So the difference between b and strong is also established.

Thus, you need to be able to correctly understand how to apply tags in a given situation. Indeed, the success of website promotion in modern search engines depends on the correct application. The semantic meaning of HTML is easy enough to understand, especially for newer HTML5 tags. For example, they allow you to clearly define the structure of the page, thanks to the latest tags. But to cover this topic, you will need to write a whole article, more on that later.