Good day. With the release of HTML5, a variety of additional tags and much more have appeared. And I want to use them correctly and properly. I studied several articles on the Internet ( for example ). But I want to clarify some nuances just in case.
Planned page that displays a list of products of a particular category. On the page there will be: the main menu for navigating the site, sitebar with filters, product cards. I imagine the markup in general as follows:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <nav>Основная навигация по всему сайту</nav> <main> <h1>Название категории товара</h1> <aside>Фильтр</aside> <h2>Название товара</h2> <h2>Название товара</h2> <h2>Название товара</h2> <h2>Название товара</h2> <h2>Название товара</h2> </main> </body> </html> I have doubts about the <main> tag. Perhaps it is worth choosing <article> ( <content> out of date)? As for the goods card, they are all in separate divs, etc. - I dropped them for clarity.
If you put the code in HTML 5 Outliner , it turns out that <nav> , which is not included in <main> taken into account in the structure and must have a header (because it does not exist, it is displayed as Untitled Section ). There is a similar situation with <aside> - it should have a title. Those. since they must have headers, are these blocks somehow taken into account? And maybe replace them with regular divs? Or something else?
Hence the questions: did I choose the right way to mark the document for the page with product cards? Is the reporting procedure correct? Do I use correct tags for markup? How to deal with the headings of <nav> and <aside> ? How it all affects SEO, etc. etc.? Are there any additional recommendations?
The question of micromarking of each product stands apart. Now in the priority (if I am not mistaken) JSON for Linking Data . There is, of course, schema.org , but it seems that the same Google already prefers not this technology, but JSON for Linking Data. It is clear - it is much more convenient to work . Has anyone worked with this technology in the key of the page description with product cards, and not one single product?
upd. As a result, I came to the structure of the document of the form:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <nav>Основная навигация по всему сайту</nav> <aside>Фильтр</aside> <article> <h1>Название категории товара</h1> <section><h2>Название товара</h2></section> <section><h2>Название товара</h2></section> <section><h2>Название товара</h2></section> <section><h2>Название товара</h2></section> <section><h2>Название товара</h2></section> </article> </body> </html> upd2.
<!DOCTYPE html> <html> <head> <title>Сайт</title> </head> <body> <header> <h1>Название сайта</h1> <nav><h2>Навигация по сайту</h2></nav> </header> <article> <h2>Название категории товара 1</h2> <aside><h3>Фильтр</h3></aside> <section><h3>Название товара 1</h3></section> <section><h3>Название товара 2</h3></section> <section><h3>Название товара 3</h3></section> <section><h3>Название товара 4</h3></section> </article> </body> </html> It looks like: 
However, the questions are still relevant. Help to understand, please.
