2016-06-24 49 views
5

Diciamo che l'elemento aside include "Oh, tra l'altro ..." contenuto come suggerimenti di lettura, annunci pubblicitari o vendite incrociate.Devo lasciare da parte l'esterno o l'interno dell'elemento principale?

  1. Va semanticamente bene avere aside al di fuori di main?
  2. Se sì, ha qualche vantaggio sull'accessibilità se tengomain, ad esempio il comando "salta al contenuto principale"?
  3. Ultimo ma non meno importante, vorrei sapere se c'è qualche impatto SEO se includo il tag aside all'esterno o all'interno di main.
+0

Si prega di notare che chiedere " Impatto SEO "è fuori tema su Stack Overflow. Tali domande possono essere poste su [webmasters.se]. – unor

+0

Grazie a @unor! Terrò questo nella mia mente per domande future. –

risposta

5

Se il <aside> è direttamente correlata al contenuto in te <main> quindi vorrei lasciarlo in <main>. Ora, ciò che viene detto ...

  1. Sì, è semanticamente ok per avere <aside> di fuori di un <main> (come in, è valida, ma sul suo sito web potrebbe giustificare in altro modo).
  2. Non capisco come stai pensando che il collegamento salta sia in gioco qui, ma altrimenti <aside> all'esterno di <main> non ha alcun danno né beneficio per l'accessibilità. Se segui una buona struttura e un margine valido, dovresti stare bene.
  3. Non ne sono a conoscenza. Ho <aside> s al di fuori <main> sul mio sito, e aveva <aside> s all'interno di <main> pure, e non ho visto alcuna differenza nella mia classifica. Dato che i motori di ricerca sono generalmente opachi su bit specifici come questo, prenderei in considerazione alcuni test A/B se sei preoccupato.

materiali correlati da HTML5 Dottore, che è stato scritto da uno degli editori spec HTML5:

2

In HTML5 E 'definita solo aside è "correlato al contenuto intorno al aside elemento ".

In HTML 5.1 (CR) la definizione became more specific, come oggi si dice che aside è "correlata al contenuto della genitorialità sezionamento contenuti".

In seguito alla definizione più recente, l'elemento aside deve trovarsi all'interno dell'elemento di sezione a cui è correlato. L'elemento main è non un elemento di taglio (elementi come article, section, body, figure ecc sono). Ovviamente è possibile posizionare ancora aside in main, ma sarà correlato al più vicino elemento di sezione principale di main.

Questo significa che non v'è alcuna differenza semantica (per aside) in questi due esempi:

<body> 
    <main></main> 
    <aside><!-- related to the body --></aside> 
</body> 
<body> 
    <main><aside><!-- related to the body --></aside></main> 
</body> 

esempio che mostra alcuni casi differenti:

<body> 

    <main> 

    <article> 

     <aside><!-- related to the article --></aside> 

     <section> 

     <aside><!-- related to the section --></aside> 

     <blockquote> 
      <aside><!-- related to the blockquote (not to the section!) --></aside> 
     </blockquote> 

     <div> 
      <aside><!-- related to the section (not to the div!) --></aside> 
     </div> 

     </section> 

    </article> 

    <aside><!-- related to the body (not to the main!) --></aside> 

    </main> 

    <aside> 
    <!-- related to the body --> 
    <aside><!-- related to the (parent) aside --></aside> 
    </aside> 

    <nav> 
    <aside><!-- related to the nav --></aside> 
    </nav> 

    <footer> 
    <aside><!-- related to the body (not to the footer!) --></aside> 
    </footer> 

</body>