Make it Right: Anatomy of a Website, Part 1 - HTML (Hyper Text Markup Language)

When you look at a website it is important that it looks good, has flow, and works well in devices that people choose to view it in. Websites today are eye catching, with broadband Internet access designers are not as limited as they once were in their choice of design and graphics. One of the main problems is that the basic structure that many websites are built on is poorly thought out and often out of date.

In the olden days of the web, designers were very limited in what they could make a website do. Designers always find a way to make things look good even with a limited language like HTML. Over the years some bad habits developed in the construction of sites and as a result many of these bad practices are being used even today.

Though some bad practices are being used for the most part websites have come a long way. HTML has most certainly changed for the better, instead of adding more tags to the language it has actually been simplified. With the invention of CSS (Cascading Style Sheets) HTML was able to shed its unneeded tags and get back to its roots. HTML is a markup language and should be used like one. Its purpose is to give content meaning, and weight to content that is more important that other content. It was not designed to position your pretty images or make text colored and it was certainly not made to make text blink!

Designers were introduced to wonderful programs with mystical names like WYSIWYG Editors. These miraculous programs would actually write the markup for you, and make your site look any way you wanted it to look. What did it matter that the markup wasn't perfect you can't see it anyway, right? As a matter of fact this way of thinking can come back to bite you. Sloppy code can mean lower search rankings, poor mobile functionality, decreased accessibility, not to mention make changes and updates a pain. Clean markup is lightweight, well structured, and makes proper use of tags. For programmers (and even for people who have never "viewed page source" in their life), clean markup is easy to read through and coherent. Small changes to your markup can make a big difference. By moving your embedded CSS and JavaScript and moving them to a separate file, and by removing depreciated tags and attributes like the font tag, and the align attribute, you can easily make site wide changes to your site by changing one file. This will also streamline your HTML you make it easier for search engine crawlers to get through your content. After all it's all about your content, so showcase that in your pages and move all of the design and behavior out of the way. Google is the ultimate blind user and does not care what your site looks like, it just cares that it has relevant well-formed and meaningful content. By cleaning up your markup it makes it easy for other technologies to view your site. Screen readers for the blind, translation tools, and even mobile devices benefit from standards-compliant markup.

Think down the road when your client needs a change made to their site, or even a complete overhaul. With inline JavaScript or CSS, a simple text change could take hours, because you are forced to go through every page on the site and make the changes. With clean markup, a redesign becomes as simple as making a new stylesheet, saving you time and your client money. Who doesn't love that?

Imagine you created a site that was 100 pages, for the heading of each page you placed a div with inline styles to make the text inside bold red and 22px in size. Now imagine your client wanted you to change the color and size of all the headings on the site. You can see how a simple change can lead to quite a bit of work. Now you will have to manually edit every page on the site. If you had taken the time to think through your markup you cold have saved your self a lot of time. Simply by placing an h1 tag around the heading and styling it in an external stylesheet, allowing you to make a site wide change to one file in seconds.

We've established that clean markup is important, but how do you know whether or not your markup is compliant to web standards? The W3C offers tools that help you validate not only your HTML, but your CSS as well. Using these resources can get you on the right track to clean, fast loading, standards-compliant, and search engine friendly websites.

With a little time and thought in the beginning, you can save yourself and your clients time and money. Search engines will love you, and your website will be accessible to more people than ever before. So think about your content before you start slapping tags around it. Ask yourself questions like: "Is this group of sentences a paragraph, or a list?" and when linking to another page make sure you let your user (whoever, or whatever, that might be) know where that link will take them. Instead of making the link to the contact form say, "Click Here, to fill out our contact form". Say something like, "Please Contact Us if you have any questions". This gives the link meaning, and the link gives your content meaning, not to mention makes a lot more sense. In conclusion designers, use your powers of web design wisely and you will be rewarded with higher search engine placement, simple changes and happy clients.