For a while now, sensible naming conventions and semantics have been confused. Things such as class="left" or class="clear" have been deemed insemantic, whereas in reality, semantics really doesn’t stretch that far… Let me illustrate with some code examples:
Insemantic code
The following code is just plain wrong, it’s insemantic, using the wrong elements for the wrong job:
<div class="nav-link"><a href="/">Home</a></div>
<div class="nav-link"><a href="/about/">About</a></div>
<div class="page-title">About</div>
<div>This is some page text about some stuff...</div>Insensible code
This code is perfectly semantic, it just uses some silly classes:
<div class="border">
<h2 class="red">This is a heading</h2>
</div>Semantics concerns itself with elements…
…and not the names assigned to them. Using the correct element for the correct job is as far as semantics goes. Standards concerning naming of those elements is all about sensibility.
Semantics sets a standard from which it is very difficult to stray. Headings are marked up with a <h1–6>, a list with <ul/ol/dl> and so on. You cannot, however, define a convention for naming the IDs and classes of these. <div id="contact">, <div id="kontact"> and <div id="contact-info"> all bear different names, but are all equally as semantic. All three are examples of semantic and sensible code.
However, take the following examples: <div id="bottom">, <div id="lower-area"> and <div id="b">. These examples exhibit semantic code, but with insensible namings.
Be sensible, for our sake
Semantics should be adhered no matter what—web standards are good. Naming however is totally down to you, you can call your elements whatever you wish. <div id="a">, <div id="b"> and <div id="c"> are all possible, but not sensible.
“Always code like you’re working in a team, even when you’re not.”
I have actually seen markup like this, and the developer’s reasoning was ‘I like to keep my markup as lean as possible, and I know what
.a, b and c do’
While this is all correct, and passable, it’s not really very sensible. He might know what a, b and c do, but what about the person who inherits the project? For all his justification of code bloat was somewhat advanced (really decreasing markup size), the impression the next guy to see his code will have will be ‘WTF was this guy thinking?!’
Always code like you’re working in a team, even when you’re not.
Final word
“An ID/class should be as short as possible but as long as necessary.—Jens Meiert
Semantics and sensibility are not the same. Anyone who tells you that class="left" is insemantic is wrong. Be semantic and be sensible. Pick names which are descriptive. An ID/class should be as short as possible but as long as necessary.
By Harry Roberts on Monday, August 9th, 2010 in Web Development. Tags: HTML, Markup, Semantics | 8 Comments »
+
Anthony Mann said on 14 August, 2010 at 11:27 am
I do agree with your point, however i think it would be worthwhile distinguishing between Semantic Web, Semantic Markup and Semantics as a theory. They are not one and the same.
Semantic naming conventions are valid, e.g this article from Antonio Lupetti http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html
The term semantics is a general theory, it is only when applied to a field that its meaning becomes filtered (e.g Semantic Web, Semantic Markup, Semantic Classes).
Semantics = ‘The study of how language conveys meaning’
Semantic Web/Semantic Markup = ‘The act of writing markup/code that conveys meaning to machines’
Therefore:
Semantic Class Names = ‘The act of writing classes that convey an elements meaning/context’
Class names have no need to be machine readable, their semanticism lies in their conveyed meaning to the intended recipients. Us.
I think we have gotten lost in semantics here.
Laust Deleuran said on 16 August, 2010 at 8:17 am
Hm, valid points, Harry, but I must agree with Anthony on this one. There is such a thing as semantic class names, if only because semantics apply to other things than markup.
Furthermore, semantics is our number one way of extending HTML. In fact, that’s how many of the new HTML5 elements was named – from frequently used, semantic class names. So where the semantics of HTML itself fail, I think classes are the first tool to use to extend the language and bridge the gaps that HTML has and HTML5 will have.
I’m not entirely disagreeing with your main point – just arguing that writing sensible code in many ways is the same as writing semantic class names – and that the latter is a valid course of action.
Jacob Rask said on 16 August, 2010 at 1:48 pm
class="left"might be sensible for some projects, but not for ones where you’re considering right-to-left localization..left { float: right; }isn’t very sensible imho, something like.post img { float: right; }makes more sense.Adam Westbrook said on 21 August, 2010 at 6:07 pm
As above will have to agree with Anthony and Laust, sematic markup by definition is markup that is readable to who or whatever need to read it whether that be man or machine. These ideas and techniques should go hand in hand and anally separating them into two different definitions just confuses matters for those new to them.
Gemma said on 21 August, 2010 at 7:12 pm
I agree with the article really. I never use insemantic markup and I never use classes or IDs that describe the colour or the position of an element for example. I despair when I see web designers disregarding semantic markup and sensible IDs and classes in their code.
Greg Fridholm said on 22 August, 2010 at 1:53 pm
It would be useful to some of us if for every example of insemantic or insensible code there also existed an example proposing reasonably semantic or sensible code.
Web Designer said on 26 August, 2010 at 3:50 am
Where does the HTML5 part come in?
Nurul Imam said on 1 March, 2011 at 9:26 pm
Semantics to HTML5 ?