Discussions about the semantics of HTML code with examples. Discussions about the semantics of HTML code with examples Semantically correct code

The semantics of HTML code is always a hot topic. Some developers try to always write semantic code. Others criticize dogmatic adherents. And some even have no idea what it is and why it is needed. Semantics are defined in HTML in tags, classes, IDs, and attributes that describe the purpose but do not specify the exact content they contain. That is, we are talking about separating content and its format.

Let's start with an obvious example.

Bad code semantics

Article title
And the author
Inko Gnito.

Good code semantics

Article title

The text of an article that was written by someone. Inko Gnito- its author.

Whether you think HTML5 is ready for use or not, the use of the

in this case it will be more attractive than usual
indicating the class. The title of the article becomes the title, the table of contents becomes the paragraph, and the bold text becomes the tag. .

But not everything is represented so clearly by HTML5 tags. Let's look at a set of class names and see if they meet the semantic requirements.

Not semantic code. This is a classic example. Every CSS grid workbench uses these types of class names to define grid elements. Whether it's "yui-b", "grid-4", or "spanHalf" - such names are closer to specifying markup than to describing content. However, their use is unavoidable in most cases when working with modular grid templates.

Semantic code. The footer has gained a strong meaning in web design. This is the bottom part of the page, which contains elements such as repeating navigation, usage rights, author information, and so on. This class defines a group for all these elements without describing them.

If you have switched to using HTML5, then it is better to use the element

in such cases. The note also applies to all other parts of the web page (the header should be
, side panel -

Publications on the topic