Search code examples
htmlsemanticsrelated-content

HTML5 semantics: Similar articles, inside article tag

When you are reading blog post, on almost all blogs, there is a "sidebar" with similar articles, latest comments, etc. In the layout I'm going to implement, I've got a huge article header (with photo, and trailer) with the 100% width. After that, I've got article body, with described sidebar, and after that, I've got (once again 100% width) author information, and comments.

In that case, I cannot escape with the "sidebar" out of the main article tag. Minimal example:

<article>

    <!-- ARTICLE HEADER -->
    <header style="width: 100vw; height: 100vh">
        <h1>title</h1>
        <p>trailer</p>
        <time>...</time>
    </header>

    <!-- ARTICLE BODY -->
    <h2>...</h2><p>...</p><ul>...</ul> x few

    <!-- SIDEBAR - PROBLEM -->
    <div id="sidebar">
        <h2>Similar articles</h2><ul>...</ul>
        <h2>Latest comments</h2><ul>...</ul>
    </div>

    <!-- ARTICLE FOOTER -->
    <footer id="author" style="width: 100vw; height: 100vh">
        <h1>Details</h1>
        <section>
            <h1>Author</h1>
            <address>...</address>
        </section>
        <section>
            <h1>Comments</h1>
            <ul>...</ul>
        </section>
    </footer>

</article>

The problem is with div#sidebar and what kind of element it sohuld be in.

  • This of course is not the part of article (so it cannot be div)
  • This is probably not aside (aside inside of article is highly related to article, but can be ommited while reading, and this sidebar is auto generated and not related to article at all)
  • This is probably a section, but of course should not be inside of article tag
  • There is no chance, to make this element out of article, and make is simple section, because the positioning (absolute, or flex) will be to difficult to manage, because of the full screen footer and header.

Any help?

I've got a solution using jquery, I can cut the element out of the "flow", and paste it somewhere else, but maybe there is a semantic solution using HTML5 only?

Solution

  • Why not put the article body in <article> and give it like a 75% width and the related links in an <aside> with a 25% width and float them both? The <aside> tag is used for content that is somewhat related, but separate from the content itself. Related links are def. a fit for <aside>.

    codepen

    W3C information on <aside>