How to learn to divide the site into blocks when making up?

Question

Layout

Hello.

How to learn how to divide the layout into blocks correctly when layout?

At first I thought that it might be possible to thoroughly study the sites through the inspector, but somehow it turns out that everyone seems to do things differently. I almost never see sites based on pure semantic html5 tags. Plus, who knows who made up the site and is everything done well in terms of block naming?

If I mark up the layout myself, then there will probably be a lot of jambs that I won’t even know about.

Maybe you need to find a person who will tell you how to do it right? What do you advise?

PSY, did I mark up this layout correctly or not?)

Answer 1

How to learn to divide the layout into blocks correctly when layout

With experience, or take courses\for someone to teach.

everyone does it differently.

And there is. There is no single correct one. There are some requirements, there are recommendations. But business requirements/project specifics can cause many of them to be violated, as they are not needed. For example: there is a requirement for no more than one h1 per page. On the main page of Yandex there are one for each section. Because the main page of Yandex does not care about indexing in search engines.

If I mark up the layout myself, then there will probably be a lot of jambs

Yes, it will. But the one who does nothing is not mistaken.

did I mark up this layout correctly or not

Generally ok. Only aside - not aside. Don't let the title of the tag fool you. It's not for side menus.

An HTML element is a portion of a document whose content is only tangentially related to the main content of the document. Most often presented in the form of a sidebar, footnotes or labels.

The key word is indirect .
Is the balance indirectly related to the rest of the content? It seems not.
Quick links are directly related, as is the form.
Well, you still have a division only into macro entities. Further, each of them is divided into micro entities - blocks. And blocks into elements.

Answer 2

Practice, practice, practice, the only way you will make mistakes, you will learn, everything is simple!
And by the fact that you divided it, it looks like ok, but that's not all, there are also blocks inside, read about BEM (BEM), maybe it will remove some questions

Answer 3

And it should also be remembered that all sorts of navigation headers there are not only in the form of a strip, but also in the form of the letter G, for example, in other words, the site header can be both on top and on the side.
"Create semantic markup from layout" google from htmlacademy