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.


Comments

7 responses to “Deliver your information correctly”

  1. I have a question, Mr Designer. Should I put Header 2, Header 3, etc on my blog entries? Would it make it clear? Or messier? Any suggestion?

  2. sama kaya kalo di form,
    pakai label, bukan sebuah paragraf atau div.
    nice article, mr. web designer!
    hehehe… :D

  3. Hello Mas Koen,
    About the headings, the point is that which information should be displayed as heading. In blog, I think the “default” (made by blog developers) already has a good markup.
    In my opinion, the use of headings is way much better when displaying information. If it is a header, why not display it as real header?
    A document must have an “outline”. So, if a web page is also a document, it should have an outline too. Correct me if I am wrong.
    Didats, hey! You’re the designer! I am still learning here. :D

  4. Problems with cross-browser? Blame the non-standard :p
    That’s the easiest way to escape. The professional one will be: anticipate. More code? Be it.
    Visitors will not see the difference? Maybe. Maybe not. But YOU (the maker) know. Don’t we consider ourselves important? Serve ourselves first, then others. Just like cooking :D
    If we are concerned about SEO, your writing (this writing, I mean) is important, Thomas :)
    Hey, what am I talking about? I’m not a web designer. Not even familiar with coding :D

  5. nice article for a rookie like me.

  6. didats say:
    “sama kaya kalo di form,
    pakai label, bukan sebuah paragraf atau div.”
    ———
    dats, can u tell me more?

  7. Nice article mas.. ;)