We are in the process of creating a book with the purpose of teaching people the art of html and CSS to create a website from scratch. In our book the focal point, so to say, is that the reader is given a webdesign that he converts into a website by himself.The reader is given the webdesign for the website of a (fictive) restaurant. The website will, when finished by the reader, consist of just the front page and three almost identical  sub pages (only the text content will differ).To be sure of an ideal, down to Earth, basic and typical website we are asking for a code review of the HTML and CSS behind these pages that make up this website. We have strained our selves to keep the code short, simple, clean and strict.The reviewers should keep in mind that the site ought to be illustratingrecommended methods in coding the different parts as well asbest practice andrecommended ways of organising the code, and the site should containtypical standard parts for a website to be basic and fundamental for a students learning.Please ask any relevant questions to clarify things. Below you will see first the entire html for the front page, then the CSS and then the HTML for a sub page. In the bottom you will find a screenshot of both front page and sub page.(Note: The page is in Danish)We hope for some useful feedback and hope you like it.HTML (frontpage index.html)<!DOCTYPE html><html>    <head>        <meta http-equiv=Content-Type content=text/html; charset=utf-8>        <link rel=stylesheet type=text/css href=css/global.css>        <title>Eos Caf</title>    </head>    <body>        <div id=container>            <header>                <a href=/><img src=images/logo.jpg alt=Eos Caf id=logo></a>                <nav>                    <a href=#>Menu</a>                    <a href=#>Bestil</a>                    <a href=#>Arrangementer</a>                    <a href=#>Kontakt</a>                </nav>            </header>            <nav id=submenu>                <ul>                    <li><a href=menu/forretter.html>Forretter</a></li>                    <li><a href=menu/hovedretter.html>Hovedretter</a></li>                    <li><a href=menu/desserter.html>Desserter</a></li>                    <li><a href=#>Salater</a></li>                    <li><a href=#>Supper</a></li>                    <li><a href=#>Vine</a></li>                    <li><a href=#>Drikke</a></li>                </ul>            </nav>            <section id=content>                <h1>Madforklelse</h1>                <div id=text>                    <div id=manchet>                        <img src=images/coffeecup.jpg alt=>                        <p>Velkommen til Eos Caf. Vi har de lkre retter p bordet og den helt rigtige vin. Kom ind og oplev maden og stemningen! Velkommen til Eos Caf.</p>                    </div>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt.<br>                    Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales. Etiam tempus sollicitudin mauris ut eleifend. Duis aliquet lacus sit amet dolor blandit fermentum. Cras iaculis metus quis odio <a href=#>auctor fringilla</a>. Nunc tristique quam mi, in interdum felis. Cras lobortis vehicula ligula, quis condimentum mauris porttitor at. Cras in augue ut leo blandit fringilla blandit eget mi.</p>                </div>                <img id=img1 src=images/dummy1.jpg alt=>                <img id=img2 src=images/dummy1.jpg alt=>                <img id=img3 src=images/dummy3.jpg alt=>            </section>            <footer>                <div id=openhours>                    <h4>bningstider</h4>                    <table cellspacing=0>                        <tr>                            <th colspan=2>Cafens bningstider</th>                            <th colspan=2>Kkkenets bningstider</th>                        </tr>                        <tr>                            <td>Man-tors</td>                            <td>11.00-21.00</td>                            <td>Man-tors</td>                            <td>11.00-21.00</td>                        </tr>                        <tr>                            <td>Fre-lr</td>                            <td>11.00-22.00</td>                            <td>Fre-lr</td>                            <td>11.00-22.00</td>                        </tr>                        <tr>                            <td>Sn</td>                            <td>17.00-21.30</td>                            <td>Sn</td>                            <td>17.00-21.30</td>                        </tr>                    </table>                </div>                <div id=address>                    <h4>Her bor vi</h4>                    Adresse:<br>                    Engsvinget 45<br>                    3400 Hillerd<br>                    Se kort                </div>                <div id=socialicons>                    <hr>                    &copy; Eos Caf                    <span>                        Hold dig opdateret:                        <img src=images/facebook.jpg alt=Facebook>                        <img src=images/google.jpg alt=Google+>                        <img src=images/twitter.jpg alt=Twitter>                        <img src=images/rss.jpg alt=RSS>                    </span>                </div>            </footer>        </div>    </body></html>CSS (global.css)* {margin: 0; padding: 0;}  /*Fjerne standardegenskaber*//*GENERELT*/section,header,footer {    position: relative;}body,html {    background-color: #929292;    margin: 0;    padding: 0;}#container {    background-color: #e6e6e6;    margin: 0 auto; /*Centrering*/    width: 1000px;}nav a { /*Generelt til navigation*/    font-family: verdana;    text-decoration: none;}/*SIDEHOVED*/header {    height: 160px;    background-color: white;    border-top: solid 3px #912124;    border-bottom: solid 1px #dad9d9;    padding: 20px 0 0 90px;}#logo {    width: 160px;}header nav { /*Topmenu*/    bottom: 20px;    height: 30px;    position: absolute;    right: 100px;}header nav a { /*Topmenu-links*/    color: #979696;    font-size: 14px;    margin: 0 10px;    padding-bottom: 5px;    text-transform: uppercase;}header nav a:hover {    border-bottom: solid 3px #912124;    color: #606060;}/*SIDEMENU*/#submenu {    float: left;    width: 200px;}#submenu ul {    float: right;    list-style: none;    margin-top: 50px;    text-align: center;}#submenu ul a {    color: #912124;    font-size: 12px;}#submenu ul a:hover {    color: black;}#submenu li {    margin: 10px 0;}/*INDHOLD*/section {    background-color: #ededed;    color: #1f1f1f;    float: right;    font-family: arial;    font-size: 12px;    padding: 50px 50px 50px 50px;    width: 650px;   /*750px minus padding*/}section p {    margin: 5px 0;}section h1 {    color: #525252;    font-size: 24px;    margin-bottom: 20px;    text-transform: uppercase;}section #manchet,h2 {    color: #912124;    font-family: georgia;    font-style: italic;    margin-bottom: 20px;}section #manchet img {    float: left;    margin-right: 10px;}section #text {    float: left;    padding: 0 20px 20px 0;    width: 400px;}section #img1 { height: 180px; float: right; }section #img2 { clear: left; height: 180px; float: left;}section #img3 { height: 180px; float: right; }section a {    color: #6ba6c1;}section a:hover {    text-decoration: none;}/*SIDEFOD*/footer, footer table {    color: white;    font-family: arial;    font-size: 12px;}footer {    background-color: #1f1f1f;    clear: both;    padding-top: 30px;}footer #openhours {    float: left;    padding-left: 300px;    width: 400px;}footer #address {    float: left;}footer th {    padding-right: 60px;}footer th,footer td {    line-height: 150%;}footer h4 {    font-size: 14px;    margin-bottom: 10px;    text-transform: uppercase;}footer hr {    border-bottom: solid 1px #292929;    border-left: none;    border-right: none;    border-top: solid 1px #030303;    margin-bottom: 20px;}footer #socialicons {    clear: both;    margin: 0 auto; /*Centrering*/    padding: 20px 80px;    position: relative;    text-align: center;    text-transform: uppercase;}footer #socialicons span {    position: absolute;    right: 80px;    top: 42px;}/*UNDERSIDER*/h2 {    font-size: 12px;    /*Overskriv standardegenskaber*/    font-weight: normal;}.dish {    position: relative;    height: 97px;}.dish img {    float: left;    margin-right: 44px;}hr {    clear: both;    border: none;    border-top: solid 1px #dad9d9;    margin: 12px 0;}.dish span {    position: absolute;    right: 10px;    top: 0;    font-style: italic;}HTML (subpage menu/forretter.html)<!DOCTYPE html><html>    <head>        <meta http-equiv=Content-Type content=text/html; charset=utf-8>        <link rel=stylesheet type=text/css href=/css/global.css>        <title>Eos Caf</title>    </head>    <body>        <div id=container>            <header>                <a href=/><img src=/images/logo.jpg alt=Eos Caf id=logo></a>                <nav>                    <a href=#>Menu</a>                    <a href=#>Bestil</a>                    <a href=#>Arrangementer</a>                    <a href=#>Kontakt</a>                </nav>            </header>            <nav id=submenu>                <ul>                    <li><a href=#>Forretter</a></li>                    <li><a href=#>Hovedretter</a></li>                    <li><a href=#>Desserter</a></li>                    <li><a href=#>Salater</a></li>                    <li><a href=#>Supper</a></li>                    <li><a href=#>Vine</a></li>                    <li><a href=#>Drikke</a></li>                </ul>            </nav>            <section id=content>                <hgroup>                    <h1>Forretter</h1>                    <h2>Menukort</h2>                </hgroup>                <div class=dish>                    <img src=/images/dummy2.jpg alt=#>                    <h3>Flamberet and</h3>                    <p>Med grnne bler og hvid sovs.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt. Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales.</p>                    <span>Pris: 199,-</span>                </div>                <hr>                <div class=dish>                    <img src=/images/dummy2.jpg alt=#>                    <h3>Flamberet and</h3>                    <p>Med grnne bler og hvid sovs.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt. Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales.</p>                    <span>Pris: 199,-</span>                </div>                <hr>                <div class=dish>                    <img src=/images/dummy2.jpg alt=#>                    <h3>Flamberet and</h3>                    <p>Med grnne bler og hvid sovs.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt. Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales.</p>                    <span>Pris: 199,-</span>                </div>                          </section>            <footer>                <div id=openhours>                    <h4>bningstider</h4>                    <table>                        <tr>                            <th colspan=2>Cafens bningstider</th>                            <th colspan=2>Kkkenets bningstider</th>                        </tr>                        <tr>                            <td>Man-tors</td>                            <td>11.00-21.00</td>                            <td>Man-tors</td>                            <td>11.00-21.00</td>                        </tr>                        <tr>                            <td>Fre-lr</td>                            <td>11.00-22.00</td>                            <td>Fre-lr</td>                            <td>11.00-22.00</td>                        </tr>                        <tr>                            <td>Sn</td>                            <td>17.00-21.30</td>                            <td>Sn</td>                            <td>17.00-21.30</td>                        </tr>                    </table>                </div>                <div id=address>                    <h4>Her bor vi</h4>                    Adresse:<br>                    Engsvinget 45<br>                    3400 Hillerd<br>                    Se kort                </div>                <div id=socialicons>                    <hr>                    &copy; Eos Caf                    <span>                        Hold dig opdateret:                        <img src=/images/facebook.jpg alt=Facebook>                        <img src=/images/google.jpg alt=Google+>                        <img src=/images/twitter.jpg alt=Twitter>                        <img src=/images/rss.jpg alt=RSS>                    </span>                </div>            </footer>        </div>    </body></html>Screenshot, frontpage:Screenshot, subpage:Screenshot of the page on a larger screen:
Strict and clean HTML and CSS for teaching website
html;css;html5
Your logo (resp. site title) should be in a h1. Otherwise your page ( body) got no heading a wrong heading in the outline (see explanation below): <h1><a href=/><img src=images/logo.jpg alt=Eos Caf id=logo></a></h1>You could specify width/height attributes for the img. (Thanks, @darcher)Instead of <meta http-equiv=Content-Type content=text/html; charset=utf-8> you could use the shorter HTML5 variant: <meta charset=utf-8>The links in the nav should (but dont have to) be in a ul (which is very common). If you dont want to use a list, you should at least use block elements around each link (div probably), otherwise the links will be listed in one line for users without CSS, making the navigation hard to use (because of no delimiters).Dont start with h4 in the footer. If you use h1 for the site title (see above), use h2. Or use section explicitly, then you could use h1 (or stay with h2).You could use the time element for the opening hours.hgroup is gone. As there is no real alternative yet, use a div (resp. p if applicable) for the subheading/tagline (and group both, the heading and the subline, in header).You could use the small element for © Eos Caf.I dont think that your uses of hr is correct here ([] a paragraph-level thematic break []).Znarkus asked in the comments, why the site title should be in a h1:Its because of the document outline (note that the behaviour changed in the Editors Draft, but wed have to wait to see what happens to it in the future; its discussed on the mailing list). I explained it some time ago on Stack Overflow, too (which might be easier to follow than this try here ;)).In HTML5, every sectioning element/root has an own heading, so to speak, even if you dont explicitly provide one. If you dont, youll get an implied heading ( untitled section in the document outline). Practically that means, if you use sectioning elements correctly everywhere, you wouldnt have to provide a heading at all, and youd still get a perfect outline (but of course this would be a bad practice).Now the problem in this example document is, that there are also headings that are not included in a sectioning element. As the body is a sectioning root, it longs for a heading. And it finds one: the h4 in the footer: bningstider, because it is the first heading that is not part of a sectioning element (section, article, nav, aside). That means that the document outline will look like:1: bningstider (the first h4 in the footer)    1.1: Untitled (the nav, missing a heading)1.2; Untitled  (the nav (submenu), missing a heading)1.3: Madforklelse (the h1 in the section)2: Her bor vi (the h4 in the footer)This is of course wrong. The page heading shouldnt be bningstider nor Her bor vi.If wed enclose the sections (introduced by the h4s) in the footer in sectioning elements, wed get the following outline:1: Untitled (the body, missing a heading)    1.1: Untitled (the nav, missing a heading)1.2: Untitled (the nav (submenu), missing a heading)1.3: Madforklelse (the h1 in the section)1.4: bningstider (the section in the footer)1.5: Her bor vi (the section in the footer)Now this outline is correct. But the untitled top-heading is, of course, ugly. Lets think about what the correct heading would be: It should be a heading that describes all sub-sections (1.1 to 1.5), that is, everything that is included in the page. There can only be one answer: The site title. It describes the site-wide navigation and the site-wide footer. You cant use the main content heading as page heading, because the site-wide navigation is not in scope of the main content. There is typically only one case where you can use the main content heading as the page heading: if there is no site, i.e. if there is no navigation/footer/sidebar (that would be a stand-alone document).