Databases
StackOverflow2013
Postsdbo
POHTML5 semantics & outlines
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 semantics & outlines
    text
    copied!<p>I just recently discovered the whole HTML outline thing and found this great online <a href="http://gsnedders.html5.org/outliner/" rel="nofollow">HTML5 outliner tool</a>. Now I'm trying to accomplish a semantically proper simple HTML page with outline that should look like this:</p> <ol> <li>Page <ol> <li>Nav</li> <li>Main</li> <li>Sub <ol> <li>Aside</li> </ol></li> <li>Footer</li> </ol></li> </ol> <p>And render a page like this: </p> <pre><code>| --- NAV ----------------- | | content | | --- MAIN ---------------- | | content | | --- SUB ----------------- | | content | aside | | --- FOOTER -------------- | | content | </code></pre> <p>The HTML looks as follows:</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="page"&gt; &lt;header class="page--header"&gt; &lt;hgroup&gt; &lt;h1&gt;page&lt;/h1&gt; &lt;h2&gt;subtitle&lt;/h2&gt; &lt;/hgroup&gt; &lt;nav&gt; &lt;h1&gt;Nav&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;link 1&lt;/li&gt; &lt;li&gt;link 2&lt;/li&gt; &lt;li&gt;link 3&lt;/li&gt; &lt;li&gt;link 4&lt;/li&gt; &lt;li&gt;link 5&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt;&lt;!-- .page-header --&gt; &lt;section class="page--main"&gt; &lt;h1&gt;Main&lt;/h1&gt; &lt;/section&gt;&lt;!-- .page-main --&gt; &lt;section class="page--sub"&gt; &lt;h1&gt;Sub&lt;/h1&gt; &lt;aside&gt; &lt;h1&gt;Aside&lt;/h1&gt; &lt;p&gt;Advertisement block&lt;/p&gt; &lt;/aside&gt;&lt;!-- aside --&gt; &lt;/section&gt;&lt;!-- .page-sub --&gt; &lt;footer&gt; &lt;h1&gt;Footer&lt;/h1&gt; &lt;/footer&gt;&lt;!-- footer --&gt; &lt;/div&gt;&lt;!-- .page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>That makes the outline look like this: </p> <ol> <li>Page <ol> <li>Nav</li> <li>Main</li> <li>Sub <ol> <li>Aside</li> </ol></li> </ol></li> <li>Footer</li> </ol> <p>How should I alter the HTML to keep it semantically correct while getting the outline mentioned above? How come <code>footer</code> is not outlined on same level as those top-level section elements (ie. main &amp; sub) even when they all are siblings with same heading-level?</p> <p>Confused, and any help, criticism or suggestions are welcome, thanks!</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