Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I would like to remedy some of <a href="https://stackoverflow.com/users/571593/myles-gray">Myles</a>'s assumptions which appears incorrect to me.</p> <p>At first, there is no general rule how a webpage content should be structured. New HTML5 semantic elements just give an author a tool to mark up the parts the author consider related, (un)important, descriptive, carrying some specific meaning and so forth.</p> <p>Your choice of elements should be based more on whether a specific content is wrapped because of styling/scripting purposes (<code>&lt;div&gt;</code>) or semantic/thematic separation purposes (<code>&lt;section&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;nav&gt;</code> and other new HTML5 <strong><a href="http://oli.jp/2009/html5-structure3/#outlines" rel="nofollow noreferrer">sectioning content</a></strong> elements). In many cases sectioning content elements (mostly <code>&lt;section&gt;</code>) will replace now frequently used <code>&lt;div&gt;</code> which has a very little semantic meaning. <code>&lt;section&gt;</code> element can be used in place of chapters, <em>but also as</em> a page layout separation element if the parts wrapped in are related together (and ideally accompanied with an heading, but <em>not necessarily</em>).</p> <p><code>&lt;header&gt;</code> element can be used, what's more, <em>is recommended for</em> page headers containing logos, search bar, navigation and maybe sliders if you think they convey an important introductory information. Though there is one important rule: <code>&lt;header&gt;</code> (the same applies to <code>&lt;footer&gt;</code>) can't contain <code>&lt;header&gt;</code> or <code>&lt;footer&gt;</code> as descendants, but still can contain <code>&lt;section&gt;</code>s, <code>&lt;nav&gt;</code>s, <code>&lt;h1&gt;-&lt;h6&gt;</code> etc. An appropriate use of <code>&lt;header&gt;</code> is when more introductory and navigational "header" information is stated for a section (e.g. author name and post date in the case of header of an article). However, when there is just <code>&lt;h1&gt;</code> immediately followed by <code>&lt;p&gt;</code>, there is no need for encapsulating the standalone <code>&lt;h1&gt;</code> in <code>&lt;header&gt;</code> ("<a href="http://www.w3.org/TR/html5/sections.html#the-header-element" rel="nofollow noreferrer">The header element represents <em>a group</em> of introductory or navigational aids</a>"), but it can contribute a bit to readability and unity of the code.</p> <hr> <p>Here is my draft for HTML5 structure of your website. Consider it rather as an inspiration - an author should know best how to assign meaning and structure to his document.</p> <pre><code>&lt;body&gt; &lt;header&gt; &lt;div id="masthead"&gt;&lt;!-- // this wrapper &lt;div&gt; is needless --&gt; &lt;div id="branding" role="banner"&gt; &lt;div id="topbar" role="banner"&gt; &lt;h1 id="site-title"&gt;&lt;a href="#"&gt;&lt;img src="images/logo.jpg" width="180" height="65" alt="Xmedia"&gt;&lt;/a&gt;&lt;/h1&gt; &lt;p id="site-description"&gt;Enterprise Solutions&lt;/p&gt; &lt;nav role="navigation"&gt; &lt;div class="skip-link screen-reader-text"&gt;&lt;a href="#content" title="Skip to content"&gt;Skip to content&lt;/a&gt;&lt;/div&gt; &lt;ul id="dropmenu" class="menu"&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt;&lt;!-- #topbar --&gt; &lt;section id="slider"&gt; &lt;div class="slide1"&gt;&lt;/div&gt; &lt;div class="slide2"&gt;&lt;/div&gt; &lt;div class="slide3"&gt;&lt;/div&gt; &lt;/section&gt;&lt;!-- #slider --&gt; &lt;/div&gt;&lt;!-- #branding --&gt; &lt;/div&gt;&lt;!-- #masthead --&gt; &lt;!-- // ⇩ The following part ⇩ still introduces the page (actually the whole brand) and includes some important quick links, I would leave that in &lt;header&gt; --&gt; &lt;section id="home_header"&gt;&lt;!-- // in some cases, &lt;aside&gt; could be used instead, but here this section conveys one of the main messages of the page – a description of the brand --&gt; &lt;blockquote&gt; Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect. &lt;/blockquote&gt; &lt;footer&gt; &lt;p class="signature"&gt;-John Selena CEO xMedia&lt;/p&gt; &lt;/footer&gt; &lt;/section&gt;&lt;!-- #home header --&gt; &lt;section id="home_header_right"&gt;&lt;!-- // could be &lt;aside&gt; too, but I guess the links are not expendable and form a part of the major navigation--&gt; &lt;nav role="navigation"&gt; &lt;a href="#"&gt;&lt;img src="" alt="image" width="154" height="50" /&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="" alt="image" width="154" height="50" /&gt;&lt;/a&gt; &lt;nav&gt; &lt;/section&gt;&lt;!-- #home_header_right --&gt; &lt;!-- // ⇧ ------------------ ⇧ --&gt; &lt;/header&gt; &lt;section id="main"&gt; ... &lt;/section&gt;&lt;!-- #main --&gt; &lt;footer&gt; ... &lt;/footer&gt; &lt;/body&gt; </code></pre> <p>If you think about it, even various examples in W3C specification don't strictly stick with one rule for describing similar document examples - in fact, it gives a lot of freedom to the author. A good way of thinking when choosing appropriate elements is to consider the resultant heading/section structure of the document and the ability of the document to serve the relevant content upon a request of e.g. screen readers.</p> <p><strong>EDIT:</strong> I have removed the <code>&lt;hgroup&gt;</code> element as it creates <a href="http://html5doctor.com/the-hgroup-hokey-cokey/" rel="nofollow noreferrer">more harm than good</a> (read the comments there – <a href="http://html5doctor.com/the-hgroup-hokey-cokey/#comment-14948" rel="nofollow noreferrer">this one</a> is the most substantiated and convincing to me – or check out this <a href="http://www.w3.org/html/wg/wiki/ChangeProposals/dropHgroup" rel="nofollow noreferrer">summary of problems regarding <code>&lt;hgroup&gt;</code></a>) and is likely to be finally dropped from the specification.</p> <hr> <p><em>For more information, I have found a <a href="http://oli.jp/2009/html5-structure1/" rel="nofollow noreferrer">great article about html5 structure</a> and <a href="http://oli.jp/2009/html5-structure2/" rel="nofollow noreferrer">about headings</a> that I think have caught the meaning of the specification quite accurately (also take a look at other related articles on this blog). Anyway, for up-to-date and the best understanding of sectioning the content I recommend to read through <a href="http://www.w3.org/TR/html5/sections.html#headings-and-sections" rel="nofollow noreferrer">this part of W3C specification</a> and examples below specification of particular elements.</em></p>
    singulars
    1. This table or related slice is empty.
    1. POHTML5 - header, masthead, branding, slider
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USAdam
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is a very good answer. It helped me a lot.
      singulars
      1. PO
      1. USDmytro Shevchenko
    2. COFirst time I have seen slides as a `section`
      singulars
      1. PO
      1. USJohn Magnolia
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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