All geek questions in one place

<main> inside <article> in HTML5

Plot: When creating a coupons website, I understand that they can be content that is not unique to the page, but should be used inside the <main><article> ..here..</article></main> .

Problem: Just because w3schools:

The content inside the element must be unique to the document. It should not contain any content that is repeated through documents.

But I have content that will be inside the article. Like every time, for example, A coupon can be used by entering its code but a deal can only be activated by going to landing page. This will be repeated on every “coupon” post that I publish. So now I tried to use.

 <main><article><main>Unique content</main> <aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>

But then again:

  Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendent of an <article>, <aside>, <footer>, <header>, or <nav> element.

So what is the best way to format UN-UNIQUE content inside a <main> and / or <article> .

+5
source share
4 answers

The main tag should be used to group these article and aside elements.

 <main> <article> The unique document content. </article> <aside> Related content for that document. </aside> </main>
+2
source

tl; dr - use your common sense :)

This w3 site article has a good overview of what should go there. General structure:

 <body> <header> <!-- header content goes in here --> </header> <nav> <!-- navigation menu goes in here --> </nav> <section id="sidebar1"> <!-- sidebar content goes in here --> </section> <main> <!-- main page content goes in here --> </main> <aside> <!-- aside content goes in here --> </aside> <footer> <!-- footer content goes in here --> </footer> </body>

Option 1 - <section> s

They further say that <section> s can obviously contain several <articles> , but you can also place <section> inside <article> , for example, to define an introduction or summary:

 <article> <section id="introduction"> </section> <section id="content"> </section> <section id="summary"> </section> </article>

So one option is to place <section id="content"> and <section id="terms"> inside your article.

Option 2 - <footer> s

It seems that <footer> used for this type of content. You said that this is only for the author, date, category, but w3 states in its spec for <footer> :

The footer usually contains information about its section, for example, who wrote it, links to related documents, copyright information, etc.

Your text is the terms of the coupon, which can be considered semantically similar to copyright data. I think this is a judgment.

Option 3 - <div> and others ...

As an output, in the first link they also talk about <div> s :

You should use [div] if there is no other suitable element to group the content area ...

So, if it’s really not clear what to use, another possibility might be:

 <article> Blah blah <div class="terms"></div> </article>

Summary

Honestly, after all this, there seems to be no final answer, and sites are unlikely to become super-rigid in how they semantically parse documents for some time, because they know that there are legions of people who will do this completely wrong. If you simply insert a <p> with the same terms at the end of each article, this probably will not make any real difference, because the main text is unique.

I personally think that as long as you use your common sense and choose something that does not completely contradict the recommendations, you cannot be wrong.

+1
source

I would say something like this:

 <main> <div class='article'> <article>Unique content</article> <footer>This coupon can be used only once..</footer> </div> <div class='article'> <article>Unique content</article> <footer>This coupon can be used only once..</footer> </div> </main>

In any case, I believe that having multiple <main> tags is worse than having unique content in the <article> .

You can also take Schema.org into account to properly display your content with additional attributes ( itemprop ...)

0
source

According to the WHATWG (Living Document Standard HTML informal group) there is no problem using the main element inside the article . The HTML Living Document says:

There are no restrictions on the number of key elements in a document. Indeed, there are many cases where it makes sense to have several basic elements. For example, a page with multiple article elements may need to indicate the dominant content of each such element.

Therefore, you can write

 <body> <header>My Page Header</header> <main> <article><h1>My First Article</h1> <main>My first article content...</main> <aside>A sidebar</aside> </article> <article><h1>My Second Article</h1> <main>My second article content...</main> <aside>Another sidebar</aside> </article> </main> </body>

However, the W3C HTML 5.3 draft prohibits this and states: "The document must have no more than one visible main element."

This is an interesting case of disagreement over the central HTML element. Amazing It seems that there is again a split between the authors of W3C and the professional web developers behind WHATWG. In that case, I would go with WHATWG.

0
source

Source: https://habr.com/ru/post/1208119/

More articles:


All Articles