10
\$\begingroup\$

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 illustrating

  • recommended methods in coding the different parts as well as
  • best practice and
  • recommended ways of organising the code, and the site should contain
  • typical 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>Madforkælelse</h1>

                <div id="text">
                    <div id="manchet">
                        <img src="images/coffeecup.jpg" alt="">
                        <p>Velkommen til Eos Café. Vi har de lækre 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">Caféens åbningstider</th>
                            <th colspan="2">Køkkenets å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-lør</td>
                            <td>11.00-22.00</td>
                            <td>Fre-lør</td>
                            <td>11.00-22.00</td>
                        </tr>
                        <tr>
                            <td>Søn</td>
                            <td>17.00-21.30</td>
                            <td>Søn</td>
                            <td>17.00-21.30</td>
                        </tr>
                    </table>

                </div>

                <div id="address">
                    <h4>Her bor vi</h4>
                    Adresse:<br>
                    Engsvinget 45<br>
                    3400 Hillerød<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 grønne æ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 grønne æ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 grønne æ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">Caféens åbningstider</th>
                            <th colspan="2">Køkkenets å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-lør</td>
                            <td>11.00-22.00</td>
                            <td>Fre-lør</td>
                            <td>11.00-22.00</td>
                        </tr>
                        <tr>
                            <td>Søn</td>
                            <td>17.00-21.30</td>
                            <td>Søn</td>
                            <td>17.00-21.30</td>
                        </tr>
                    </table>

                </div>

                <div id="address">
                    <h4>Her bor vi</h4>
                    Adresse:<br>
                    Engsvinget 45<br>
                    3400 Hillerød<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, frontpage

Screenshot, subpage:

Screenshot, subpage

Screenshot of the page on a larger screen:

Screenshot, larger screen

\$\endgroup\$
5
\$\begingroup\$

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 don’t have to) be in a ul (which is very common). If you don’t 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).

Don’t 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 don’t 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:

It’s because of the document outline (note that the behaviour changed in the Editor’s Draft, but we’d have to wait to see what happens to it in the future; it’s 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 don’t explicitly provide one. If you don’t, you’ll get an implied heading (→ "untitled" section in the document outline). Practically that means, if you use sectioning elements correctly everywhere, you wouldn’t have to provide a heading at all, and you’d 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: Madforkælelse (the h1 in the section)
  • 2: Her bor vi (the h4 in the footer)

This is of course wrong. The page heading shouldn’t be "Åbningstider" nor "Her bor vi".

If we’d enclose the sections (introduced by the h4s) in the footer in sectioning elements, we’d 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: Madforkælelse (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. Let’s 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 can’t 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).

\$\endgroup\$
  • \$\begingroup\$ Why should h1 be the site title? The h1 should be the page title imo, which it is in the question's code. \$\endgroup\$ – Znarkus Jul 10 '13 at 9:44
  • \$\begingroup\$ @Znarkus: I edited my answer. Please comment again if anything is still unclear. \$\endgroup\$ – unor Jul 10 '13 at 11:14
  • \$\begingroup\$ I understood what you meant, but think it's wrong :) Every page on the site could be thought of as a document, and the h1 is the document title. So for the contact page the h1 would be "Contact us". \$\endgroup\$ – Znarkus Jul 10 '13 at 19:59
  • \$\begingroup\$ @Znarkus: Yes, the h1 (or whatever level, they don’t really matter if you use sectioning elements) of the main content would be "Contact us". But do you think the main navigation (containing links to the about page, the front page etc.) could be described by the heading "Contact us"? "Contact us" only describes a section of the page (→ the main content), but not everything on the page (→ the site-wide navigation, the site-wide footer, sidebars etc.). (By using HTML5, it can be automatically extracted which is the main content.) \$\endgroup\$ – unor Jul 11 '13 at 6:38
  • \$\begingroup\$ @Znarkus: Also: the h1 is not the document title. That would be the title element. In a HTML5 document using sectioning elements everywhere where needed, you could use only h1, if you like. The sectioning elements describe the nesting level, not the h1-h6 elements. Now there are typically two headings that could be considered most important: the main content heading, and the page heading. They are (typically) not the same! \$\endgroup\$ – unor Jul 11 '13 at 6:45
3
\$\begingroup\$

As this site is for teaching purposes and since I am a student, I would suggest you include every possible HTML tag and CSS property. I noticed HTML tags like <b>, <i>, <em>, etc. are not used. I know such tags are not of much importance when we are using CSS, but it will be very helpful to readers. Also, include a page for making a simple form on the website. Forms are widely used on websites, and it would greatly help the readers and beginners.

Rather than only making them prepare an external CSS stylesheet, include some internal and inline CSS code to explain the difference between each and their execution.

These were just some suggestions on my part. I hope I could help you.

\$\endgroup\$
  • 2
    \$\begingroup\$ The use of <b> and <i> should only be used as a last resort in HTML5 but I would expect <strong>, <em> and <form> elements in a project like this. \$\endgroup\$ – BlueEel Mar 25 '14 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.