4 Tips To Writing Great HTML

Posted on

HTML computer keyboard

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 to tell you how to write HTML that is smart, clean, and brings goodness to web pages. (You’ll just have to trust me on the "why" thing for now.)

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 it will get you some white space, forget it. That’s 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>

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. Use CSS.

4. Use 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.

For more on this, see my How To Use Heading Tags In A Web Page where I talk about the two different ways of using these tags.

Tags:


Comments are closed.