HTML Best Practices for Beginners

Swiss Army Knife

Whether you're a beginner or an expert in HTML, there are many things that everyone should remember. Whether it's something simple like using lists properly to something a bit more complicated like learning every HTML element or separating content from separation, these are all some important best practices to remember for your next project.

Validate as You Go

Much like "Clean as You Go", it can be helpful to validate your HTML as you go. Once you're done with a certain section of your file, validate it. The HTML validator checks your code for errors, and offers suggestions to fix them.

This can help save some time because it is often easier to ensure good code as you're writing it, than to validate later and spend hours fixing validation errors.

Use Proper Headings

It is important to use proper headings in your HTML, to ensure a good structure throughout your page. You should use the <h1> through <h6> tags for headings, for each level deep.

<h1>the Main Heading</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
 
<h2>Section</h2>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
 
<h3>Subsection</h3>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
 
<h4>Sub-Subsection</h4>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>

Use Lists for Navigation

Back in the '90s, when websites were best viewed in Internet Explorer, the "standard" method of adding navigation links was just a bunch of a tags, like this:

<div>
    <a href="http://example.com/">Link 1</a><br />
    <a href="http://example.com/">Link 2</a><br />
    <a href="http://example.com/">Link 3</a>
</div>

And now, ten years later, I still see this sometimes. You should use a list, because a navigation bar is pretty much a list of links.

<ul>
    <li><a href="http://example.com/">Link 1</a></li>
    <li><a href="http://example.com/">Link 2</a></li>
    <li><a href="http://example.com/">Link 3</a></li>
</ul>

For more on using lists, check out this (old, but still useful) article at A List Apart.

Remember the alt Attribute In Images

A common mistake to make is to forget to use the alt in img tags. This is an important consideration for accessibility, as it is the text that shown when the image cannot be displayed, for example in a text-based browser. It's also required for your site to validate.

The alt should not simply be a description of what the image looks like, but an explanation of the image's purpose.

<img src="image.png" alt="An image" />

Stay Away From WYSIWYG Editors

WYSIWYG (What You See Is What You Get) editors are often criticized for producing horrible markup code. That's because they do.

I don't know the current state of WYSIWYG editors, because I haven't used one in years. But when I first tried using Microsoft FrontPage and Dreamweaver, I remember the horrible code that I ended up with.

This is a little excerpt from one of the pages of the website of a certain "web design" company.

<html>
<!-- Creation date: 9/04/02 -->
<head>
<META NAME=" CONTENT="(email address, you can check the actual site to find it)" Author">
<meta name="Robots" content="index, follow">
<meta name="Revisit-After" content="7 Days">
<!-- Creation date: 7/23/07 -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>South Texas Web Design, Corpus Christi web designers, Coastal Bend Web Design - Professional Web Desginers, Hosting Services, Domain Name Management, Web Maintenance</title>
<meta name="Description" content="South Texas and Coastal Bend Web Design - Professional Web Desginers, Hosting Services, Domain Name Management, Web Maintenance">
<meta name="Keywords" content="(31 keywords, to 'help' their rankings in Google)">
 
<meta name="Microsoft Border" content="b, default">
<body bgproperties="fixed" text="#000000" bgcolor="#CC0000"><!--msnavigation--><table dir="ltr" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><!--msnavigation--><td valign="top">
<head>
 
<head>
<head>
<head>
<head>
<head>

Not found on the index page for some reason, but on every other page:

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

Every time I see that on a website, I die a little bit inside.

Another reason why you should stay away from WYSIWYG editors is that they prevent you from actually learning anything. And don't make the argument that you can edit a page and see the markup right away, because that markup generated is just awful.

Divitis

Do you suffer from divitis? Do you wrap every ul, paragraph, and even every div in another div, just in case?

Stop it.

Divitis is often caused by forgetting that there are other block-level elements than div, that can be styled just like it. Most of the time, you won't need to wrap your navigation list in a div.

Adding extra divs is very inefficient, and it can cause problems when maintaining it down the road. Imagine the time it would take to sort through a file and see which div does what.

Stay Away From Proprietary HTML

Avoid using proprietary HTML tags at all costs. Most of this proprietary HTML stuff is usually to achieve some stupid, cheezy effect anyway. If you think you need to display a very long string on one line, scrolling across the screen, blinking because it is important, you're doing it wrong.

<marquee><blink>IMPORTANT BLINKING NEWS ITEM ON A WEBSITE CREATED BY A FIVE YEAR-OLD!!!</blink></marquee>

If you must have blinking marquees, consider using JavaScript for that instead.

Separate Content and Structure From Presentation

An important thing to remember when writing your HTML code is to separate content and structure from presentation. HTML should be used only for marking up the structure of the content.

This can be done easily by avoiding presentational HTML elements such as font, center, etc. and doing that with CSS.

Become Familiar With Every HTML Element

Quick: Tell me abbr, dfn and kbd do!

If you can, good for you! If not, you have some reading to do.

You should be familiar with each (or at least most) HTML elements. A good reference is at HTML Dog, separated into categories. Even if you did know what those examples do, be sure that you know the rest, too. You don't necessarily have to use all of them, but at least learn what they do, and how to use them, just in case.

Was this post helpful to you? Do you have any best practices that you follow and would like to share? Leave a comment, and share your thoughts.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

12 Comments

  1. January 20, 2010

    This is a fantastic post for budding web developers. I am currently studying HTML/CSS and hope to make the switch from IT pro to web developer in the future.

    The info here is very good.

    When you say validate as you go, are you talking about something like http://validator.w3.org/ ?

    • January 20, 2010

      Yes, that's what I meant! Thanks for reminding me, I forgot to add the link in the post.

  2. January 20, 2010

    Great advice here Eric! I'm totally with you on the WYSIWYG issue. I use SXEmacs for all my HTML work. And for people who are unfortunate enough to be trapped in a windows environment, I recommend notepad.exe.

    I don't normally validate as I go, unless I'm doing something particularly tricky or unfamiliar. But when I'm finished I always validate locally via onsgmls before the page goes live and with validator.w3.org.

    Think I'm going to start using SXEmacs for my blog articles too... I hate that WP dashboard "editor" (and I use that term loosely).

    Thanks for the great article, Eric.

    Kind regards,
    Steve.

    • January 20, 2010

      Notepad++ is very good for the Windows environment, and it's free. I only wish there was something as good for the Mac.

      Textwrangler is good, but still no match for Notepad++

      Rendur.com is also very cool. It updates the page in real time as you make changes to CSS/HTML and Javascript.

      • January 20, 2010

        Rendur looks interesting. I've been doing similar stuff with the Firebug plugin for Firefox.

    • January 20, 2010

      Thanks for your comment, Steve! Those are some good points.

      I've never heard of SXEmacs before! (I prefer Vim :P) Currently, I just use Komodo Edit with Vim keybindings. For C++ dev, I like Code::Blocks. For Java, I use Eclipse. So yeah, I use a lot of editors.

      For WordPress, I have the WYSIWYG editor disabled. I sometimes use Vim to start planning out posts, though.

  3. January 21, 2010

    Hi All , Very Very Very Nice .

  4. January 21, 2010

    I agree with the test/validate as you go.
    Testing in incremental phases is a sure fire way to create clean compliant code.

    I have often decided not to do this approach and found errors when done, but then went back and redid each step and after each step checked for errors and viola! fully compliant website with no errors, with the only thing I did differently is check the code in between each step.

    I guess the code just needed to know it was being loved!

    • January 21, 2010

      I agree that testing at different steps is a great way to do it. But I usually try to learn to write valid code from the start, so that I don't have to spend time going back and fixing everything.

  5. Keith
    August 23, 2010

    "Stay Away From WYSIWYG Editors"
    This is true, they create lot of unwanted tags.
    I found some another Interesting article on this topic;
    Top 15 HTML Best Practices,
    http://blog.sencide.com/2010/08/top-15-html-best-practices.html

Trackbacks/Pingbacks