Semantic vs client XHTML/CSS
by oneafrikan
I’ve had a question posed today by a client where the problem was something like this:
(I’ve added space to the html so that WordPress doesn’t render as html code for the page)
< p class="classname" >< strong >This is a sample highlighted body text < / strong >
Now, the class in question just changed the font color from the default paragraph colour, to the new improved colour (this was the first paragraph in a page of three or more paragraphs), so it needed to be highlighted as the synopsis or abstract for the page. So we have a diff. colour, and a bolding of the text to highlight it. All fine.
Now, the client wanted to remove the < strong > tags and put that styling into the css, leaving the code sans strong tags, like so:
< p class="classname" >This is a sample highlighted body text
My argument was that sematically, if you strip out the css, you’ll still be left with a paragraph that is highlighted (if you keep the strong tags), and therefore of value to the user. If not, you’re left with paragraphs that all look the same.
Now, I know this is an eeeeny weeeeny tiny issue, but I was wondering what you think? Am I smoking my socks here, or do I get the point of semantic XHTML?
The pair of you are nuts. I’ll include me in that too, as I’m answering. Go and look up “opportunity cost” in an economics reference.
I can see this being controversial but I’d look at it like this.
The Strong tag isn’t semantic. Semantic refers to what things _are_, not how they should be rendered. I’m sure most readers here will know that.
So the question I’d ask is, “Why is this thing being rendered strongly? What is it about this thing that means it should be treated in this way?” The answer, presumably, is something like “Because it’s the first sentence of a page”.
The “if you strip out the CSS” bit is suspicious but leads us to the underlying problem. The whole point of CSS is that you can abstract content from presentation. It’s designed to be stripped out.
XHTML isn’t really semantic at all. The default rendering styles for the native XHTML elements are just that – defaults. They’re not set in stone and crucially, don’t really mean anything. On one page, h1 might be a news story headline. On another, the name of a user. On a third, the name of a product. h1 is really telling us nothing here semantically about what the content _is_, only about how it relates to other page elements (more important, less important). But really, this is just a holdover from pre-CSS days when there was no separation of content and presentation at all. HTML was a purely presentational markup system. Note also that (X)HTML makes no attempt to enforce the nested outline structure of heading elements. It’s a joke. Compare that to how an outline structure might be enforced in a valid XML document according to a specific DTD. It wouldn’t surprise me if the XHTML committee considered strictly enforcing the heading outline structure it but decided it wasn’t worth the argument.
So if you want to be semantically pedantic, the answer is to remove the Strong tags and replace them with a nested span that’s classed or id’d according to the meaning of the element. Then, just use CSS to render that however you like (for this medium), even if that’s just font-weight: bold; Someone reading your XHTML source will then know, explicitly, why you’re handling that bit of content differently from the others.