Common XHTML/CSS beginner missteps
December 20th, 2008I’ve been writing HTML for about 15 years, teaching webdev for about 6, and have looked at a lot of markup. Over that time, especially in my teaching, I’ve encountered a number of common errors in the code of those just starting out.
A friend just started learning web design and sent me her first site asking for advice. The site works perfectly and the code is fine for someone teaching themselves without guidance, but there were a lot of things that might not fly in a commercial environment (and maybe some stuff that would, unfortunately…
In my response, I made the following list, which I think could be helpful for others:
- Prob too much input at once, but good stuff to come back to-
- Best to learn the code straight- it will be more portable (not everyone has kompozer or dreamweaver) and you will have more control. Also, something will eventually break horribly that you will have to fix in the code.Really good free tool for writing code: http://www.barebones.com/products/textwrangler/download.html (for mac- don’t know if you have a mac)
http://notepad-plus.sourceforge.net/uk/site.htm (for pc) - Hexadecimal values are generally preferred for colors over rgb(x,x,x) values. So black is #000000 and white is #ffffff etc.
- CSS should live in its own document. This is a good tutorial to start with, although I’d advocate for just beginning with the CSS in a separate file (once you are comfortable doing so): http://www.w3.org/Style/Examples/011/firstcssExamples of the same HTML style with different CSS to very different effects:
http://csszengarden.com/ - The title tag for each page should be more descriptive of the content within, i.e. <title>Dustin IS a Rude Nude Dude :: All This Talk is About Me</title> as opposed to <title>index</title>
- Semantically use heading tags, i.e. only one h1 per page, with titles of lesser importance going in to h2, h3, h4, h5, h6 relative to their importance.
- !Don’t use tables for layout! This will get you in a world of trouble. You don’t even want to get us started. It is kinda frothing at the mouth territory (I mentioned this will make you crazy, right?)
Check out this tutorial:
http://www.alistapart.com/stories/practicalcss/
It’s not that tables should never be used, only that they should be used for a particular purpose, the display of tabular data. The centered element here is the correct usage of a table (the yellow background area with birth from thigh of zeus etc): http://www.dustinisarudenudedude.com/aboutus.html - “ ” is moderately evil, opt for padding declaration for whitespace around elements.
- br tag is moderately evil when used more than once in succession (generally I try to avoid it). Opt for margin declarations for elements needing more vertical space.
- font tag should not be used. Use p, li, span, div etc and apply style
- Give your navigation a container (i.e. div of ul or p) and give that container a name indicating it is navigation, i.e ul id=”site_nav”
- Best to learn strict xhtml 1.0 (there is a new version of HTML, v. 5, coming out soon; it will be much easier to transition if you are using web standards)– your header would then be something like:
<code>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”description” content=”Dustin is currently in his underwear. This doesn’t totally equate nude. Maybe why he is rude.” />
<meta name=”keywords” content=”dustin rude nude” />
<link rel=”shortcut icon” href=”http://www.dustinisarudenudedude.com/dustinnude.ico” />
</code> - Also note the meta tags for keyword and description; they are very important for Google to find the site so everyone can know about Dustin’s state of nakedness.
