Often I see a web site that someone’s just made, and is incredibly proud of. Often it’s a bit of a jumble, but again: I often think “That’s just so close to being right.” Well, I’ve decided to write a quick little tutorial for how you can make your web site just a tiny bit more user friendly.
This tutorial is aimed at people who feel comfortable editing their own HTML. If you use Dreamweaver or Nvu and are unfamiliar with the HTML markup itself, I’d suggest you open up the source in Notepad and have a play around with it first.
First step: Validation.
The Doctype
One important thing that lots of people tend to miss is the doctype, or document type. The doctype tells the browser which version of HTML you’re writing. Not only that, it tells the aliens who find your markup floating through the void 5000 years from now how the document is laid out. Consider it as a notice saying “Ok, I’m using the English language here, so don’t read it as if it were Spanish.”
I’d suggest you use the XHTML 1.1 Strict doctype, entirely because it’s the latest and greatest. What this doctype tells the browser is that your HTML abides by the XHTML rules, and anything else in the document is a mistake. This is a good way of looking at things, because opposed to mucking together HTML and testing it in all browsers, any browser that understands XHTML 1.1 will render it exactly the same. If by some freak chance you use a browser that doesn’t understand XHTML 1.1, then you’re in luck because it’s backward compatible with older HTML versions anyway.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
Above is the XHTML 1.1 doctype. It’s usually the very first line in an HTML page. If you haven’t got a doctype, (you’ll notice if you do,) chuck this one into the top of your page.
The Validator
Next up I’d suggest validating. Validation is debatably important. Some people don’t think it’s any use, but I tend to think it is. In any case, if you run your web site through the W3Cs validation gizmo, it’ll bring up a list of areas you need to focus on. Don’t be concerned if your page gets a whole handful of errors, most of the time it’s just the same error repeated throughout the page, and sometimes one part of your page can cause errors throughout the rest.
If you take note of the errors the validator gives, and then work through them until there’s none left, you’re well on your way. Often it will only be little things, like using a <br> tag instead of a <br />, or using an attribute that’s not supported. If you have to take out an attribute like bgcolor from an element, never fear, we’ll get to that next.
Climb Aboard the Semantics Train
Semantics are one of the big things in web development these days. Lots of people might not understand or care what that means, but to myself at least it’s important. 
Semantics is defined as the study of meaning in language. When you’re writing HTML, it’s just another language. Admittedly it’s a markup language as opposed to a spoken language, but think of it like this: If there was no meaning to your HTML, what would be the point of it?
The interesting thing is that there are two layers of meaning when it comes to HTML. There’s the version that your browser displays from the markup, and then there’s the markup itself. The browser does all the hard work, and interprets the HTML to the best of it’s pre-defined abilities. When you navigate to a web page, you see the render level semantics. Imagine, however, that there’s no browser. How would you understand what the markup is trying to say? By using meaningful elements, of course.
Semantic Elements
Certain elements in HTML were introduced to be used for certain things. A <p> tag is used to start a paragraph. a </p> tag is used to signify the end of a paragraph. In the same way, an <img> tag is used to represent an image, a <li> tag is used to represent an item in a list, and a <table> tag is used to tabulate data. If we were to start using p tags to generate whitespace in a document, or using table tags to lay out images, we’re breaking down that lower level of semantics. Sure the web browser might do a good job of making it make sense, but anything else (Including search engines) have no idea what you’re talking about, and just do their best.
This is why it’s important to use the right tools for the job.
Keeping this in mind, go through your document, and try to remove any elements that aren’t being used properly. Again, try to add elements where they make sense. Using an unordered list for your menu, and proper heading tags is a good start (If you think something looks ugly, you can style it later).
Content from the Layout
Another interesting concept in modern web design is that you can completely separate the content from the styling. If you view the source to this web site, you’ll notice that there aren’t any font tags, or colours defined in here. That’s because all of the layout has been left to the CSS.
If you’ve kept reading this far, you should at least have some idea of what CSS does. Essentially it is a way of specifying how an HTML page should look. Many older sites use it primarily to set the font and change the colour of a page, while still using html attributes to do the rest. Let me tell you: It’s much, much easier to use CSS for absolutely everything design related on the page.
To do this, you may need to do a little bit of reading into CSS. There’s an excellent tutorial at w3schools which I highly recommend.
- A short note of advice: Internet Explorer six and seven do an absolute farce of a job rendering anything but the simplest of CSS, so you may have to tweak your design until it works in everything.
- Another trap that some people fall into is using a div per line. CSS styling is not restricted to divs. You can set the height and width and border of a paragraph, you can float it left or right. You can do pretty much anything with any element, so don’t go forth thinking that only divs can be styled.
Your New Site
Finally, your web site should be resembling something of a work of art. If you’re like me, you’ll always be finding better ways to be doing things with what you’ve got. This is awesome, because it means you’re always learning how to better your markup. I wish you luck and happiness on your new design endeavours, and hopefully one day you might be able to teach me something too.
If you’re feeling brave, I encourage you to modify and expand on this document where I’ve failed to cover something. Feel free to send in any URLs you found useful in your adventures. I also invite feedback, so leave a comment and I’ll see if I can incorporate your ideas somehow for the next person.
Responses
At The Techtoucian Network, we're a bunch of hippes, and love your conversation! Please keep it real though; check out comment policy to see what we're all about.
Post a comment or leave a Trackback.
One Comment
Hey Ashley.
I’ve been kinda working on something like this for a while now. I really was wondering if I could get some help perhaps from people with expertise in certain fields. You can have a look at what I’m up to here:-
http://theartcommunity.org/?page_id=23
Also that CSS tutorial link seems to be dead. I tried ping and dig, and dig came back and dumped a nxdomain - looks non-existant. [ w3schools.com ]
Cheers, Pascal
Thanks for your feedback.