Make it Right: Anatomy of a Website, Part 1 - HTML (Hyper Text Markup Language)Jul 1st, 2009 1:07 am
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!
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.