Article or section, without a title, which is more correct?

Question

HTML

There is a landing page and one of the sections of the landing page looks like this, as

I





understand that the article is an independent part on the site page, and the section is a dependent element of some larger element.
those. in this case, I understand what needs to be done like here

i.e. article > section*3 {h + p etc.}
( I rely on this source )
but if I do it like section > article*3 then at the output it is a section that depends on something, but for me it is an independent "section" and it can be placed anywhere on the site.
by doing article > section*3 {h + p etc.}
I get

: no express heading (even using section>article*3 would be the same)

the documentation also says about headings:


and also that you don’t need to sculpt section as a wrapper, it’s better to use divs for this, so I decide that the section> article * 3 or section> div * 3 approach is not correct, about which but this source says
if you do div>article*3 or div>section*3 then it will be:

i.e. this section is not highlighted in any way, in fact it turns out to be 3 different sections, but in fact it is one section with 3 subsections,
now the question is:
1. is it correct to use article>section? Based on the article and documentation, I understand that this is the right approach but maybe i'm wrong
These sections:

I would have laid it out as article*4 > ..... (can be section inside)
not section*3> .....(can be article inside)
2. how to solve the issue with the unrevealed section title? one of the options is to make it there and just hide it with styles, then semantically everything seems to be readable, but is this true?
PS Please do not scold me for my "Russian" and do not write in the style of "oh yes, no one needs this", etc.

Answer 1

Section headings should be in any case. You also need to think about the accessibility of the site. Screen readers need to clearly see the structure of the site. There are different ways: aria-label, aria-labeledby, visually-hidden pattern ( https://htmlacademy.ru/blog/useful/css/short-12). Read more about these methods in the article on css-tricks https://css-tricks.com/how-to-section-your-html/#a...
And the markup in your example will be something like this

<section class="page-section advantages">
  <h2 class="visually-hidden">Наши преимущества<h2>
  <div class="container advantages__container">
    <div class="advantages__item">advantage1</div>
    <div class="advantages__item">advantage2</div>
    <div class="advantages__item">advantage3</div>
  </div>
</section>

Answer 2

IMHO it is more correct to make section>article*4, since section defines a section of a document and can be used for a news block. ( htmlbook.ru/html/section)
And article sets the content of the site like news, articles, blog entries ( htmlbook.ru/html/article)
Although the w3 validator accepts both options without errors.
Both section and article should have headings. Although this is not critical. The same validator throws a Warning, not an error.
You don't need to hide the header. The page should be the same for users and search engines.

Answer 3

1. True. All such sections on the page (other than main) can be nested within each other. To be more precise, in the specs there is a special field for such significant sections, I already forgot what they are called - I have been reading the spec for a long time. But - it is possible. An article can also have a footer.
2. If there is no title, it can be omitted. The section and article may or may not have a heading. But if it exists, you can add it. It is better not to hide with styles, for this, atyatya can do it.

Answer 4

I somehow doubt that these things
are articles or sections.
Perhaps they should be wrapped in something completely different, like dl dt, or even just divs.
Leave articles for content.

Answer 5

1 question:
Scalletta , in general, re-reading the differences between these tags again, it turns out that in your case, there should be div(a wrapper with a background), inside which there are articlethree section, which have a title (for example, 1-8 min) and the actual content .
Why is that?
div- just a wrapper for our block, by setting the class of which we can decorate our block.
article- allows you to pull out a block from the page, contains self-sufficient information - "Benefits". By adding this block to any other page, it will be clear what it is about.
section- just related content - there is a title (1-8 people) and there is text related to the title.
Another question is the site design - did the designer think about the accessibility of the site? (after all, one could add an article title - and then everything would be semantically correct)
no, you shouldn’t do that, why load the page with blocks that will never be reflected on it? After all, this at least increases the weight and speed of loading the page.