Deliver your information correctly

If you build a site, you will deal with HTML tags. Like or not, it is a must. You will deal with headings, paragraph, list, definitions, etc. To be more spesific, if you have blogs, you will see many tags.
When we make a web page, we make a document. Just like when you work with document editor like Microsoft Word or Open Office. What are the characteristics?

  • Your document has many headings
  • Your document has paragraphs
  • If you want to display a list of information, you will display them as “list”
  • If it is a definition, you will display it as a “definition”
  • and more…

“Hey, but the most important thing is that I can display the information, the information is there!”

That’s probably a common answer. But, if you call yourself a web designer, you should — once again, “should” — know how information should be delivered in a web document. To be more clear, take a look at these two examples:

<h2>This is a title</h2>
<p>You put some information here.</p>

and

<p>This is a title</p>
<p>You put some information here.</p>

Both have exactly the same “information”. But, they are displayed in different way. Which is the better? Which one is correct?
Another example:

<ul>
<li>List number one</li>
<li>List number two</li>
<li>List number three</li>
<li>List number four</li>
</ul>

and

- List number one<br />
- List number two<br />
- List number three<br />
- List number four

Now, you can see the difference, right?


When I talked to some people (who called himself as a web designer), I found some “reasons” why they do not use the “correct” markup.

  • Hard to ‘style’ the element
  • Problems with cross-browser issue (come on!)
  • Visitor will not see the differences

Okey, whose responsibility? The audience/visitors? No, it’s YOUR responsibility. Designing a web page is not only designing what audience should see (in the browser), but also deliver the information correctly.

Why <ul>, not just <br />?

Well, you want to display a list? Is the information should be displayed as a list? If so, there is a HTML tag for that. Either <ol> (ordered list) or <ul> (unordered list). (Read more about “Lists in HTML document”)
Here, we are also talking about ‘flexibility’. If you use <ul>, you can make it more ‘beautiful’ easily. You have these lines in your document:

<ul>
<li>List number one</li>
<li>List number two</li>
</ul>

and

- List number one<br />
- List number two<br />

In the first example, you can use something like: ul { list-style-type: square; }. And, if you want more, there are some examples to make your list more beautiful.