Strict and clean HTML and CSS for teaching website

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)

```




Eos Café









Menu
Bestil
Arrangementer
Kontakt





Forretter
Hovedretter
Desserter
Salater
Supper
Vine
Drikke




Madforkælelse

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): `

You could specify width/height attributes for the img. (Thanks, @darcher)

Instead of you could use the shorter HTML5 variant:

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).

StackExchange Code Review Q#28261, answer score: 5