Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>CORRECTION:</p> <p>I stand corrected. The specs I linked to below don't include an example, however there is an example included <a href="http://www.w3.org/TR/html5/sections.html#the-section-element" rel="nofollow noreferrer">here</a>:</p> <pre><code>&lt;article&gt; &lt;header&gt; &lt;h1&gt;Apples&lt;/h1&gt; &lt;p&gt;Tasty, delicious fruit!&lt;/p&gt; &lt;/header&gt; &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt; &lt;section&gt; &lt;h1&gt;Red Delicious&lt;/h1&gt; &lt;p&gt;These bright red apples are the most common found in many supermarkets.&lt;/p&gt; &lt;/section&gt; ... &lt;/article&gt; </code></pre> <p>clearly showing that my original interpretation wasn't correct. <a href="https://stackoverflow.com/a/17935666/2488942">HT</a> @cilerler.</p> <p>To summarise, <code>section</code> can be used to subdivide e.g. parts following <code>h1</code> including <code>h1</code>.</p> <p>There is flexibility though according to this <a href="http://www.impressivewebs.com/html5-section/" rel="nofollow noreferrer">article</a>. A nice article which inludes do's and don'ts.</p> <p>Following is what made sense to me this morning:</p> <p>ORIGINAL:</p> <p>You need to close the <code>&lt;section&gt;</code> tags as well, i.e.:</p> <pre><code>&lt;section&gt; ..... &lt;/section&gt; </code></pre> <p>There are a few questions about this on SO:</p> <p>This one is very close to you question <a href="https://stackoverflow.com/questions/7183132/how-to-correctly-use-section-tag-in-html5">How to correctly use &quot;section&quot; tag in HTML5?</a></p> <p>This one explains the scenarios where the tag should be used <a href="https://stackoverflow.com/questions/6066689/in-what-scenarios-do-you-use-section-tag-of-html-5-in-place-of-div">In what scenarios do you use &lt;section&gt; tag of html 5, in place of &lt;div&gt;?</a></p> <p>Quote from there:</p> <blockquote> <p>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</p> <p>The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.</p> </blockquote> <p>So my understanding is that <code>section</code> marks high level parts, whereas e.g. the individual news items mentioned in the quote could be tagged as <code>articles</code>.</p> <p>EDIT: Ok from the official specs:</p> <p><a href="http://dev.w3.org/html5/html-author/#the-section-element" rel="nofollow noreferrer">http://dev.w3.org/html5/html-author/#the-section-element</a></p> <blockquote> <p>The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer.</p> </blockquote> <p><a href="http://dev.w3.org/html5/html-author/#the-article-element" rel="nofollow noreferrer">http://dev.w3.org/html5/html-author/#the-article-element</a></p> <blockquote> <p>The article element represents an independent section of a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.</p> </blockquote> <p>While this is far from totally clear to me at least, I would say that the intent is that <code>section</code> is higher level than <code>article</code>. This statement of mine is also partially based on how the official specs are structured with <code>section</code> sitting directly under body followed only later by <code>article</code>:</p> <pre><code>4.3.4 Sections 4.3.4.1 The body element 4.3.4.2 The section element 4.3.4.3 The nav element 4.3.4.4 The article element 4.3.4.5 The aside element 4.3.4.6 The h1, h2, h3, h4, h5, and h6 elements 4.3.4.7 The header element 4.3.4.8 The footer element 4.3.4.9 The address element 4.3.4.10 Headings and Sections </code></pre>
 

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