The structure of a page deletes upon its template. The template is select via the theme. Currently there are only two templates and they are very similar. There is a default and one for mobile devices or small screens. The explanation of the page structure is give for the default and only differences are differences are listed for the mobile.
Knowing the page layout matters because only then can CSS be written that controls it. The structure of the page contetnt is the responsibility of the content author.
large screen
The page body for example page with URL "/aaa/bbb/". Hover of the lines to see a pop-up explanation.
<body>
<div class="aaa">
<div class="bbb">
<h1 id="title">title</h1>
<div id="menu">
span title="menu is an unordered list (ul)"><ul>
<li><a href="/">home</a></li>
<li><a href="/aaa/">aaa</a>
<li><a href="/aaa/bbb/">bbb</a></li>
</li>
<ul>
</div>
<div id="trail">
<ul><li><a href="/">home</a></li>
<li><a href="/aaa/">aaa</a></li>
<li><a href="/aaa/bbb/">bbb</a></li>
</ul>
</div>
<div id="content">
...page content...
</div>
</div>
</div>
</body>
In this example the URL is "/aaa/bbb" so the page is wrapped in two nested divs "aaa" and "bbb". To control the style on pages use the CSS classes:
div .aaa .bbb { /*style for page /aaa/bbb/ */ }
or for a tree of page address just the parent class:
div .aaa { /*style for pages prefix /aaa/ */ }
The home page has no path word, its URL is just "/". For this reason the class for the home page div wrapper is give the special name "_home_". The home page does not wrap its children. The site-wide style can use the body tag or add home page to the sub page in a list:
div .aaa, div ._home_ { ...
mobile
The mobile scheme is the same as the "large screen" with the following exceptions.
The menu consists of two links, "home" and "menu". This is is designed to fit on any small screen, the full menu being estimated to be to large. The home page link is name after the menu value for the home page and is is link to "/". "menu" is a link to a special set of pages with the URL prefix "_menu_". [It could use a suffix "menu.html" but then it can't be excluded by prefix using robots.txt.] These pages show a pre expanded menu that replace the normal page content, changing page becomes a two stage operation to economise on screen space. The "/_menu_/..." pages are always available but only the mobile template has links to them.
Forms are in nested div pairs not table rows. This facilitates a vertical flow better suited to a narrow screen.
Libraries have reduced columns to better fit narrow screens.
Galleries TBD