thoughts

[HTML] do you smurf what I smurf?

2005-01-11 modified: 2005-03-30

Tables are bad they say, use div's and CSS. So what is the result? Documents like this: (I've omitted trivial attributes)

<html>
<body>
  <div id="nav">
    <div class="nav-item">link1</div>
    <div class="nav-item">link2</div>
    <div class="nav-item">link3</div>
  </div>
  <div class="header1">Welcome to my page</div>
  <div class="para">
    <div class="subheader">sub header</div>
    <div class="paragraph">Ok this is <div class="strong">not</div> the way to do it</div>
    <div class="table">
      <div class="table-row">
        <div class="table-cell">yuk</div>
      </div>
    </div>
  </div>
</body>
</html>

Yes, I have seen this. Now have you ever read The Smurfs? They talk the same way as the example above (Southpark's Marklar is another example). Pages could look great when using this markup, but it's not what HTML is invented for. The purpose of HTML is to give meaning to your documents, by defining the function of each element. p for paragraphs and h1 for a header and so on. Also see [HTML] useful element constructions about useful constructions. Furthermore, do not use accessive class attributes, and do not use them with the intention to define style. See my writings about class, id and style.

So stop talking Smurf language, your fellow-Smurfs might understand what you're talking about, but Google for instance does not, blind people's screenreaders do not either. Just use HTML the way it is meant to be:

<html>
<body>
<div>
  <map id="navigation" name="navigation">
    <ul>
      <li>link1</li>
      <li>link2</li>
      <li>link3</li>
    </ul>
  </map>
  <div>
    <h1>Welcome to my page</h1>
    <div>
      <h2>sub header</h2>
      <p>Ok this is <strong>not</strong> the way to do it</p>
      <table>
        <tr>
          <td>yuk</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

To read some thoughts on cases wher you should use div, see what div is about.

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

thoughts

[HTML] do you smurf what I smurf?

Further reading

Additional resources (top 15)

comment