Which is more semantic for a sidebar of widgets?

StackOverflow https://stackoverflow.com/questions/23418109

  •  13-07-2023
  •  | 
  •  

문제

In the following example html5 page structure, which of the following is more semantic in respect to the sidebar of widgets (elements which appear in the sidebar are elements which appear on multiple pages and do not necessarily, directly, nor particularly relate to this page of content):

<body>
    <header id="site-header">
        ...
    </header>

    <section id="page-body">
        <main>
            <header></header>
            <article></article>
            <footer></footer>
        </main>
        <aside class="sidebar" id="sidebar-a">
            <section id="search-widget">
                ...search field, etc...
            </section>
            <section id="recent-articles-widget">
                ...articles list...
            </section>
        </aside>

        <aside class="sidebar" id="sidebar-b">
            <section id="cloud-tag-widget">
                ...search field, etc...
            </section>
            <section id="recent-articles-widget">
                ...articles list...
            </section>
        </aside>
    </section>
    <footer id="site-footer"> ... </footer>
</body>

or...

<body>
    <header id="site-header">
        ...
    </header>

    <section id="page-body">
        <main>
            <header></header>
            <article></article>
            <footer></footer>
        </main>
        <section class="sidebar" id="sidebar-a">
            <aside id="search-widget">
                ...search field, etc...
            </aside>
            <aside id="recent-articles-widget">
                ...articles list...
            </aside>
        </section>
        <section class="sidebar" id="sidebar-b">
            <aside id="cloud-tag-widget">
                ...tag list...
            </aside>
            <aside id="popular-articles-widget">
                ...articles list...
            </aside>
        </section>
    </section>
    <footer id="site-footer"> ... </footer>
</body>

AKA - Is it more semantic or in any way more appropriate to put multiple asides within a section, or include multiple sections within an aside to create a sidebar of widgets? Should they instead be simple divs within a div? Or divs within a section? Divs within an aside? Why? Which is easier for screen readers or search engines? Why?

도움이 되었습니까?

해결책

The aside is "tangentially related to the content around" it.

Currently, it doesn’t seem to be defined what "around" means exactly. Assuming that it’s (at least) the content of the parent sectioning content element, then this would mean for your examples:

  • <body> <section> <aside></aside> </section> </body>
    The aside is related to the content of the section.
  • <body> <aside> <section></section> </aside> </body>
    The aside is related to the content of the body (i.e., of the whole document).

So in your case, you’ll probably want to have aside as descendant of body (and of no other sectioning content element).

The next thing to decide would be: one aside with several sub-sections vs. several aside. I’d go with a separate aside for each "sidebar block", unless you can logically group (*) these blocks.

* I.e., if there is a natural heading that could be used (it doesn’t matter if you actually use it) to group several sidebar blocks, use one aside with section childs for these.

다른 팁

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top