A picture of me taking it easy

I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis! :-)

Semantics

Published on Monday, April 18th, 2005

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.

Posted in Developing | 16 comments

16 comments

  • Molly E. Holzschlag
    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

  • Robert - author
    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! :-D

  • Tommy Olsson
    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. :)

  • Robert - author
    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. :-)

  • Martin S.
    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??

  • Robert Nyman - author
    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.

  • Martin S.
    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..

  • Robert Nyman - author
    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

  • Eduardo Figueiredo
    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.

  • Robert Nyman - author
    August 21st, 2005 at 10:42

    Eduardo,

    People should understand that tableless isn’t just not use tables

    Absolutely, there’s much more to it.

  • Mikhail Bozgounov
    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 :-)

  • Robert Nyman - author
    October 25th, 2005 at 15:07

    Mikhail,

    Thanks for sharing. I’m also glad you liked the post! :-)

  • Robert’s talk » How to get a good search engine ranking
    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 […]

  • Robert’s talk » Three separated layers, capisce?
    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 […]

  • Tip(z) » Vad innebär semantik?
    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 […]

  • Stefan Van Reeth
    January 17th, 2007 at 9:48

    Finally a topic everyone agrees on :).

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.

  • Save the Children
  • Red Cross
  • Cancer Research UK
  • WWF

Top results