Semantics
I have sinned. I confess. I’ve had the div-itis.
But now I’m cured (I hope)!
What is semantics about then? Basically, it’s about using the correct elements for the corresponding purpose.
This means using H1 to H6 elements for headings, P elements for paragraphs of text, UL/OL combined with LI elements for all kinds of lists and so on.
What you should not do is using DIV or SPAN elements for it all and then just style it up in your CSS file.
For example, this is not semantically correct:
<div class="heading">Title</div> <div class="text-paragraph"> Some text in <span class="bold">a paragraph</span>... </div> <div class="list-container"> <div class="list-item">Item one</div> <div class="list-item">Item two</div> <div class="list-item">Item three</div> </div>
As opposed to this, that is semantically correct:
<h1>Title</h1> <p> Some text in <strong>a paragraph</strong>... </p> <ul> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul>
Some normal objections are a) “What’s the gain” and b) “But H1 elements don’t look good/have different margins in different web browsers”.
The answers:
a) The code will be easier to read when you can instantly see what the purpose of each element is. Another important factor is that for web browsers that don’t support CSS, it will still be readable, for instance, in PDAs, cell phones etc.
This leads to the point of being able to say that the web site will work in any web browser, instead of saying that the users have to have IE 5.0+, Firefox and so on.
Of course, this point only applies when the web site doesn’t require that kind of support for scripting and similar. Generally, what it’s all about is a question of accessibility. It should be possible to read and see the contents of web site, even if one’s web browser doesn’t support CSS.
b) That doesn’t matter at all. I’m not preaching that you have to/should use the default look of those elements. The display and layout of elements should be taken care of in CSS, not in HTML (at all). The HTML should only be about structure and data. A brilliant example of this is the css Zen Garden, where all the different designs use the same HTML file, and only apply different CSS to it.
Of course, no one can explain it as good as Molly.
Another good piece is Semantics, HTML, XHTML, and Structure by Shirley.
PS. I promise not to disclose any information about my visitors. But I just have to tell you this one thing: there is life out there! My blog has had a visitor from NASA. They put people on the moon, I write about developing web sites… Same, same. 
DS.
16 Comments/Reactions
April 18th, 2005 at 19:40
Wow, great post, and thank you for the link love. I absolutely agree that what is visual belongs in CSS, what is structural in (X)HTML. Both deserve good semantics. The important thing to remember is we’re all learning this together, at the same time. Makes it a little more challenging, but at least we have each other to check in with, yeah?
M
April 18th, 2005 at 20:33
Molly,
Thank you for the compliment, it’s an honour to be read by you! Truly!
I’ll link to you anytime!
April 19th, 2005 at 9:23
I am constantly amazed by the amount of web authors who don’t seem to grasp this simple concept.
Also, many seem to believe that DIV elements are the only ones you can style, or at least position, with CSS. Thus they wrap their UL in a DIV and float the DIV, instead of floating the UL directly. That is also a form of divitis.
Well, at least it’s not quite as serious a disease as the dreaded tableitis.
April 19th, 2005 at 9:27
Tommy,
I couldn’t agree more. It’s not that hard to understand and to do it correctly.
But yes, I definitely prefer div-itis over table-itis, if I had to choose between those two.
May 24th, 2005 at 13:44
Well explained Robert. I agree with you in every single detail.
But the question is: when will larger sites like dn.se and di.se start to follow these basics in XHTML and CSS??
May 24th, 2005 at 14:16
Martin,
Thank you!
Actually, a friend of mine is doing some work at DN right now, so I hope he will manage to convince them about the importance of semantics, amongst other things.
May 24th, 2005 at 22:46
That is awesome. And we have another web standards guy on eniro.se nowadays.. Martin Janner. Great! This is going forward..
May 24th, 2005 at 22:54
Martin,
Yes, I hope so!
Of course, it’s always a balance of getting the customer/employer to realize the benefits, but we’re going in the right direction nowadays.
Now I’m off to Rome…
August 12th, 2005 at 0:50
Funny terms…
Disease: tableitis
Cure: tableless
Colateral efect: divitis
People should understand that tableless isn’t just not use tables.
Abraço,
Du.
August 21st, 2005 at 10:42
Eduardo,
Absolutely, there’s much more to it.
October 25th, 2005 at 15:01
Tableitis & Divitis.
Yes, very dangerous diseases… and still like 95% of the Web is ill with them…
My last website, where I’ve used tables, was 2 years ago. Then I had 2-3 months of a “transitional” period (no tables, a lot of classes and DIVs) and then… I believe, I ewas finally cured by just learning how Dan Cederholm and Doug Bowman are making their own websites… not just writing books or something:)
Good post, good work!
People.Should.Be.Aware
October 25th, 2005 at 15:07
Mikhail,
Thanks for sharing. I’m also glad you liked the post!
January 24th, 2006 at 23:17
[...] r terms that amaze me . These are my advices: Semantic code Make sure you write semanticly correct code, meaning that you need to use the correct element for the right situatio [...]
March 23rd, 2006 at 14:32
[...] oks (CSS) Behavior/interaction(JavaScript) This is so basic, just like using semantics. However, as Jeremy Keith writes in his excellent piece Gotta keep ‘em separated [...]
October 26th, 2006 at 10:55
[...] antik om i webbsammanhang? Enkelt uttryckt: att använda rätt element i rätt sammanhang. Robert Nyman skriver om det.
Inga kommentarer
Inga [...]
January 17th, 2007 at 9:48
Finally a topic everyone agrees on
.
Write a comment
Twitter reactions