Search code examples
html

<aside> vs <section>: Which one should be used for a bibliography/reference section?

Not an Opinion-Based Question

For people who would vote to close this question as opinion-based: This question is not opinion-based. It requires basing the answer on a standard. If this question is an opinion-based, then virtually all programming questions that request a code snippet to accomplish a task is opinion-based. Because the nature of these types of questions are the same: Give a solution based on a standard, but the solution is not unique.

If you plan to vote to close this question as opinion-based, please compare this question with the following question: How to sort an array or integers in JavaScript? Both questions request answers based on an industry standard (HTML vs ECMAScript), and both questions request a concrete but non-unique solution.

Question

Let's say I have an article like the following:

A dog usually has 4 legs [1].

References

[1] some wikipedia link

Based on the HTML standard, should I put the "Reference" section in a <section> or <aside>?

Please base your answer on the HTML standard and explain why.

Further Clarification

Regarding <section>, the HTML standard says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Regarding <aside>, the HTML standard says:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

It is unclear to me whether the "Reference" section in the example above should be seen as a generic section of the article, or tangentially related and considered separate from the rest of the article.

Solution

  • A bibliography or reference section is not tangentially related to the main content but is an essential part of it, providing sources and further reading directly related to the document's content. Therefore, the <section> element is the appropriate choice.

    Here is how you might structure it in HTML :

    <article>
  <p>A dog usually has 4 legs <a href="#ref1">[1]</a>.</p>

  <section>
    <h2>References</h2>
    <ol>
      <li id="ref1"><a href="https://en.wikipedia.org/wiki/Dog">some wikipedia link</a></li>
    </ol>
  </section>
</article>

    Using <section> here provides a clear, semantic way to group the references as an integral part of the document structure.