inside
in HTML5

Question

Plot: When building a coupons website I realize that their 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 state :

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

But i have content which will be inside 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 in every 'coupon' post I will publish. So now what I tried to use was.

<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 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 the UN-UNIQUE content inside <main> and/or <article>.

feeela · Accepted Answer

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

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

Rhumborl · Answer

tl;dr - use your common sense :)

This article on the actual w3 site has a good overview of what should go where. The overall structure is:

<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 go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:

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

  <section id="content">
  </section>

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

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

Option 2 - <footer>s

It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.

Option 3 - <div>s et al...

As a get-out, in the first link they do also say about <div>s:

You should use [a div] when there is no other more suitable element available for grouping an area of content...

So if it really isn't clear what to use, another possibility could be:

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

Summary

To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.

I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.

<main> inside <article> in HTML5

Tags:

html

IdidntKnewIt

2 Answers

feeela

Rhumborl

Recent Activity

Donate For Us