Return to Answer

HTML5 has really bolstered the semantic meaning behind elements. I would really look into articles that go into detail about why the tags should be used and where. Here are a few articles to look into:

Quick note: to answer one of your comments, using div's exactly how you have is actually the purpose of div's. Since they have no semantic value you can use them solely for stylistic purposes as you have. In some cases you didn't have too, but you didn't do it incorrectly.

HTML5 has really bolstered the semantic meaning behind elements. I would really look into articles that go into detail about why the tags should be used and where. Here are a few articles to look into:

Also, look into WAI-ARIA http://www.webteacher.ws/2010/12/29/how-to-make-html5-semantic-elements-more-accessible/ and other means of accessibility. The use of role="" and aria-labelledby="" etc. can really boost semantic levels and has no effect on browsers that lack support.

Also, look into WAI-ARIA http://www.webteacher.ws/2010/12/29/how-to-make-html5-semantic-elements-more-accessible/ and other means of accessibility. The use of role="" and aria-labelledby="" etc. can really boost semantic levels and has no effect on browsers that lack support. You have it a little, but you could add <nav role="navigation">, <h1 role="heading">, <ul role="list">, <li role="listitem">, <a role="link"> <main role="main"> among other things.

Your page could be much more simple and semantic, especially for something of this size. On a smaller site like this you could literally use all pseudo elements and have zero classes on any element. However, that is very difficult to maintain on a larger scale, so I'd suggest looking into SMACSS (www.smacss.com) which will really help you build a better knowledge of how to setup your css structure. I have too many grips on your css to mention here so just read into SMACSS and other style resources and it will help immensely.

Your page could be much more simple and semantic, especially for something of this size. On a smaller site like this you could literally use all pseudo elements and have zero classes on any element. However, that is very difficult to maintain on a larger scale, so I'd suggest looking into SMACSS (www.smacss.com) which will really help you build a better knowledge of how to setup your css structure. I have too many grips on your css to mention here so just read into SMACSS and other style resources and it will help immensely. I will say that normalize.css is amazing; However, you should really work it into your code instead of just plugging it in separately (http://nicolasgallagher.com/about-normalize-css/)

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.