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.

Posted in Developing |

16 Comments

  • 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 says:

    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 says:

    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 says:

    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. says:

    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 says:

    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. says:

    That is awesome. And we have another web standards guy on eniro.se nowadays.. Martin Janner. Great! This is going forward..

  • Robert Nyman says:

    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 says:

    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 says:

    Eduardo,

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

    Absolutely, there's much more to it.

  • 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 says:

    Mikhail,

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

  • [...] 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 [...]

  • [...] 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 [...]

  • [...] 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 says:

    Finally a topic everyone agrees on :).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>