4 Tips To Writing Great HTML


In a time where we have so many templates and frameworks to choose from in designing and developing web sites, does it even matter any more to know how to write good HTML?

It sure does. In fact, now more than ever.

Take mobile which is all that anyone ever talks about. Sloppy, bloated code will slow the download speed of your pages. On cellular networks that could be a site wrecker.

But I'm here not to tell you why but how to write HTML that is smart, clean and brings goodness to web pages. (You will just have to trust me on the why thing for now).

A hallmark of HTML is that it uses a very predictable pattern. Once you understand it you will be on your way to properly using HTML.

Here's some pretty low hanging fruit to get your HTML coding skills in much better shape.

1. Never Use A Container (tag) Without Content

Why would you?

Something like <p> </ p> is strictly verboten. If you are thinking that will get you some white space forget it. That is what CSS does.

With HTML, less is always better than more. Useless junk like <p> </ p> is just that. Junk.

2. Use The Newer HTML5 Tags

This one is my personal bug-a-boo.

For years web page creators begged to have meaningful HTML tags like

  • <header>
  • <footer>
  • <article>
  • <nav>
  • <section>

and the like to get away from junk like:

  • <div id="header">
  • <div id="footer">
  • <div id="nav">

So, when I still see people using that old crappy markup I just want to cry.

3. Never Have Your HTML Refer To Anything That Deals With Style

If you are still doing things like

<img src = "logo.gif" alt = "Apple" width = "100" height = "100" />

you can go ahead and lose the width and height attributes right now. That's just more code bloat.

4. Using Heading Tags (H1 – H6) To Set Up An Information Hierarchy For A Web Page

Good web content comes in the form of a hierarchy where the information is grouped so that the most important content is presented at the top of the page or section. Using Heading tags is a lot like setting up Headlines and Sub heads for a page.

One other thing you can do is error check the code on a page. That process is very simple and it's called validation. To validate a page see the W3c HTML Markup Service .


Leave a Reply