HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

HTML5 sectioning for my design

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewstackoverflowhtml5domhtml
designhtml5forsectioning

Problem

I've designed my new website:

Now I want to build up my HTML as semantic as possible.

Here's my first attempt / set-up:

```


...




Home
Het park
...






Log in
Register
Forum
Contact



...




Hommage aan Los Piratas

Zondag 2 september 2012, omstreeks 18u. Voor de laatste keer...



... slide 2 ...


... slide 3 ...


... slide 4 ...







Hommage aan Los Piratas

Lorem ipsum...

Lees meer




Meer dan 100 postkaarten

Lorem ipsum...

Lees meer




Onride: Het Zoemende Ei

Lorem ipsum...

Lees meer






Halloween in Bellewaerde Park, een totaalbeleving voor de hele familie
Persbericht
Dinsdag 15 oktober 2016

Lorem ipsum

Solution

My review will be nowhere complete. Here are some points I would change:

With a doctype of ` all browsers will recognize the document as HTML5.

All images should have an alt attribute to aid assistive technologies. Use an empty attribute for only presentational images like the logo. Some software will output the file name otherwise.

Add a datetime attribute to all your elements. If you do so the date will be machine readable for search engines and tools (not sure if there are such tools in practice).

Use h1 to h6 headings. While HTML allows you to only use h1 many tools will still be confused. If the only content of a header element is the h1 you should leave it out.

I would restructure the footer a bit. The 'Vandag', 'Morgen' and 'Login' sections are all part of the footer I think. So wrap them and and the copyright line in a . They are probably also no articles but either sections or plain old divs. I'd use a ` tag for the copyright line since it is intended for "side-comments and small print including copyright and legal text, independent of its styled presentation." The links should definitely use an unordered list instead of Unicode bullet points (CSS will format the list as in the screenshot). The title attribute is not necessary if it contains the same content as the anchor element. 


        BellewaerdeFun © 2016
        
            sitemap
            disclaimer
            contact


Finally I recommend you to use the W3C validator.

Overall this is really nice semantic HTML with the mentioned glitches.

Code Snippets

<small>
        BellewaerdeFun &copy; 2016
        <ul>
            <a href="#">sitemap</a>
            <a href="#">disclaimer</a>
            <a href="#">contact</a>
        </ul>
    </small>

Context

StackExchange Code Review Q#126573, answer score: 5

Revisions (0)

No revisions yet.