Why is my page semantically incorrect HTML and incorrect use of CSS?

I had a task to create a responsive HTML5/CSS3 page based on PSD layout. I got rejected and when asked for details I got these comments:

• semantically incorrect HTML

• incorrect use of ID selectors in CSS

• incorrect general way of solving given CSS problems

The link is here

HTML:

```


Lorem ipsum

































Toll Free Number: 0800 00 00 00

Locate me
My Profile










Home
Page Link 1
Page Link 2
Page Link 3






































17.04.2014.
Typi non habent claritatem insitam

čćžšđ ČĆŽŠĐ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...

















02.12.2013.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

Several things that would cause me to reject this:

-
Nearly every element on the page is a `.

is semantically void. It says nothing about the structure of the document, other than that "there's a block here". (Except that they're not quite even that, cause you've repurposed a few of them as table cells.)

A huge number of those divs could be replaced with elements that are more semantically correct.



• Those could be s.






• For lists of links (like in your header)...note how i said "list". :P would work too.






• could be a .




You also have "container" elements that by design only contain one element -- which itself is a container. I tend to consider that broken, except in very rare cases.

-
Your use of IDs and class names is broken.

-
I can almost forgive giving nearly every freaking element in the page an ID and/or class. Not quite, but almost. In my opinion, there should be a reason to distinguish these elements. Don't give stuff an ID or class just because you can. It adds noise.

And the performance argument is an example of premature optimization. You're mucking up the HTML over a couple of milliseconds at best. Was your page slow without all those IDs? (Hint: No.) Don't "optimize" for the sake of doing so, or because some schmuck online said this is how $BIG_COMPANY does it, or whatever. Do it because you've determined it matters in your case. When it matters.

The whole point of separating content from presentation, though, is so that the two don't get intertwined. HTML structures the document, CSS determines how it looks, and either one can change independently of the other.

And with this code:

-
The class names are often presentational. underline? Really? So if i don't want links to be underlined, i have to edit that class name out of the HTML?

The problem here is that you're embedding assumptions about formatting. There is a reason you want these links underlined. Boil that reason down to a class name and use that instead.

-
What's worse, your IDs embed the actual element names in them. So if i ever do go to make this less of a semantic mess, now i have to go and edit the CSS too.

You've largely tossed that separation out the window. Now, any significant change -- to either the structure or the layout -- will probably have to be made in two places.

(By the way, Cnt isn't much of an ID either. Don't abbreviate short single words.)

-
Those conditional chunks of HTML. In your header. I'm not going to say too much about that, cause you're at least trying to help the poor souls still using IE 6-8. But the header is for metadata, scripts, and stylesheets. There shouldn't be any visible content.

-
A minor quibble, because this is obviously a sample. But the logo -- which is solely text -- has no alt text. So a spider or blind person wouldn't even know the company name.

-
Those link-buttons. Let me get this out of the way: it seems broken to me to have a link with no content. Consider what happens if the stylesheet doesn't load, or the user is blind or is actually a search engine's spider. You know what they see? Not a whole lot.

As for the CSS...most of my issues with it are more with the HTML it's trying to style. But:

-
The page links have a hover effect that's not consistent with the rest of the page. Other links like that, you shade them. I was about to call that a bug, til i saw it was intentional. :P Keep it consistent.

-
You do a lot of fiddling around with margins and padding. That'd be OK if the numbers were consistent, or if the reason behind it were obvious, but it looks quite arbitrary -- to the point where in some places, in #divSliderMain for example, it seems like you just tweaked numbers til they fit. That hints to me that this design is quite temperamental, and is going to be a pain if i try to modify it in any significant way.

-
Take a look at the CSS for your header links. All of them share some common properties, and the two social-media icons are nearly identical (the only difference being their background images). Is there really not enough similarity there to come up with some common class?

-
height: auto is the default. If you don't override it elsewhere, then setting it doesn't make much sense. Same with display: block for block elements.

-
position: relative` doesn't make much sense in most of the places where you've used it. You should only need it when (1) you want absolute-positioned children to position themselves relative to that element, and/or (2) you want to position the element relative to its normal place in the flow.

-
As for the header links: You have three 30x60 images, one per link. The background repositions on hover, which implies you know about CSS sprites. So why make the user download three separate images?

StackExchange Code Review Q#48444, answer score: 12