Use <Section> tag inside a <aside>

Asked

Viewed 1,209 times

7

My appointment is as follows:

<aside>
    <div class="last-news">
        Conteudo
    </div>
     <div class="social">
        Conteudo
    </div>
     <div class="links">
        Conteudo
    </div>
</aside>

What would be more appropriate in the case: <div> or <section>?

Utilise <section> within a <aside> would be semantically incorrect?

html5 semantics

2 answers

6


You could yes use <section> inside <aside>, the point is you have to see if it makes sense.

Eventually, you can sweat up more tags <aside> instead make your proposal.

From now on, the main problem I see in your code is that it has no element of the type <h1>, <h3>, <h3>... , and that means you’re not really improving your semantic structure.

The least you need to know

First, create your page and use a tool that shows you her Outline. It can be the http://www.w3.org/2003/12/semantic-extractor.html or http://gsnedders.html5.org/outliner/.

In the current code

<aside>
    <div class="last-news">
        Conteudo
    </div>
     <div class="social">
        Conteudo
    </div>
     <div class="links">
        Conteudo
    </div>
</aside>

The Outline is

1. Untitled Section
   2. Untitled Section

Untitled Section is bad. Semantically tends to be even better to use only direct headers than simply adding randomly new HTML5 elements

In a semantic structure to allow aside you would have to have at least the following:

<aside>
    <h1>Lateral</h1>
    <div class="last-news">
        Conteudo
    </div>
     <div class="social">
        Conteudo
    </div>
     <div class="links">
        Conteudo
    </div>
</aside>

The Outline is

1. Untitled Section ### Ignore, como não estou colocando o HTML inteiro
                    ### aparece isso. Precisaria ter um h1 na raiz do site
   2. Lateral

In the above situation, you in hypothesis could not use any other sectioning element in place of Divs, because it would be a mistake.

However, if inside your Ivs you have at least one header, in which case you could use <section> or any other element that makes sense in the specific context. Most new tags that generate a semantic context require it to have at least one header.

So, answering your question: if you don’t use headers, you can’t use sectional elements, and if you use headers, could use sectional elements if it is worth creating a new context where the information has a different meaning to the parent section.

  • Does not include the headers in the code, for doubt even the use or not of <Section>, thank you for the answer.

  • Denis, you must specify which headers you will use, or you will not be able to answer your question. The way it is, no headlines, you couldn’t even use <section>. Stop for a while and test your code on one of the external tools I spent until she gets outline correct.

  • Thank you for the reply, complete and well explained, besides offering links of references that I did not know yet, sanou my doubt.

1

Of specification:

Examples of sections would be Chapters, the Various tabbed pages in a tabbed dialog box, or the Numbered sections of a thesis. A Web site’s home page could be split into sections for an Introduction, news items, and contact information.

As it is dividing sections of code is correct to use, even better if you use headers within these sections, as the specification recommends.

It would be incorrect for you to use <section> for other uses than separating sections, such as styling a part of the page or creating columns: use <div> to do so, and if creating a sidebar or giving information related to the previous content, <aside>.

Browser other questions tagged html5 semantics

You are not signed in. Login or sign up in order to post.