Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Yes, you may use <code>section</code> there.</p> <p>When you use headings, <a href="https://stackoverflow.com/a/18742247/1591669">you have "implicit" sections anyway</a>. By using <code>section</code>, you can make them explicit, which is <a href="https://stackoverflow.com/a/24987792/1591669">encouraged</a> (see last quote).</p> <p>These snippets are <strong>semantically equivalent</strong> (they have the same <a href="http://www.w3.org/TR/html5/sections.html#outlines" rel="nofollow noreferrer">outline</a>):</p> <pre><code>&lt;!-- using headings + div elements --&gt; &lt;aside class="example-1"&gt; &lt;h1&gt;Heading for this aside&lt;/h1&gt; &lt;div&gt; &lt;h2&gt;Latest news&lt;/h2&gt; &lt;p&gt;…&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Choose site theme&lt;/h2&gt; &lt;p&gt;…&lt;/p&gt; &lt;/div&gt; &lt;/aside&gt; &lt;!-- using headings only --&gt; &lt;aside class="example-2"&gt; &lt;h1&gt;Heading for this aside&lt;/h1&gt; &lt;h2&gt;Latest news&lt;/h2&gt; &lt;p&gt;…&lt;/p&gt; &lt;h2&gt;Choose site theme&lt;/h2&gt; &lt;p&gt;…&lt;/p&gt; &lt;/aside&gt; &lt;!-- using section elements --&gt; &lt;aside class="example-3"&gt; &lt;h1&gt;Heading for this aside&lt;/h1&gt; &lt;section&gt; &lt;h2&gt;Latest news&lt;/h2&gt; &lt;p&gt;…&lt;/p&gt; &lt;/section&gt; &lt;section&gt; &lt;h2&gt;Choose site theme&lt;/h2&gt; &lt;p&gt;…&lt;/p&gt; &lt;/section&gt; &lt;/aside&gt; </code></pre> <p>Note: if you <em>don’t</em> provide a heading for the <code>aside</code>, the document outline will be different when <code>section</code> is used. Which is not a bad thing; I guess that outline is what you typically want anyway. You can play around with gsnedders’ <a href="http://gsnedders.html5.org/outliner/" rel="nofollow noreferrer">online outliner</a>.</p> <p>Of course you can also have other sectioning elements instead of <code>section</code> inside of the <code>aside</code> (e.g. <code>nav</code> for the navigation of that <code>aside</code>, or <code>article</code> for a list of related posts, etc.).</p> <hr> <p>Side note: In your case, you might consider using several <code>aside</code> elements instead. This can’t be answered in general, it depends on the content, but a rule of thumb could be: Use one <code>aside</code> with several <code>sections</code>/headings inside, if all these sections are related somehow (i.e. if you could find a heading that describes all these sections). Use several <code>aside</code>, if not. </p> <p>So your example could look like:</p> <pre><code>&lt;aside class="widget"&gt; &lt;h2&gt;Latest news&lt;/h2&gt; &lt;ul&gt;…&lt;/ul&gt; &lt;a&gt;more news&lt;/a&gt; &lt;/aside&gt; &lt;aside class="widget"&gt; &lt;h2&gt;Choose site theme&lt;/h2&gt; &lt;input type="select" /&gt; &lt;/aside&gt; &lt;aside class="widget"&gt; &lt;h2&gt;Newsletter subscription&lt;/h2&gt; &lt;form&gt;…&lt;/form&gt; &lt;/aside&gt; &lt;aside class="widget"&gt; &lt;h2&gt;Related articles&lt;/h2&gt; &lt;ul&gt;…&lt;/ul&gt; &lt;/aside&gt; </code></pre> <p>(And use a container <code>div</code> for these, if you need one.)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload