I am writing a site for myself. I'm learning HTML & CSS all over again
by doing it, nice.
Not bad! Keep reading this group, c.i.w.a.h c.i.w.a.s too and let us
know how it goes. Posting an example at about this sort of level of
progress is sensible too.
"Head First HTML with CSS & XHTML" is one of the few decent refs for
"best practice" stuff.
Can a few of you take a look and comment on my methodology?
Loads of things, but they're all minor and easily fixable.
* Too much whitespace in the source. It works fine, but it would piss
me off to try and edit this all day. Do you have a monitor the size of
a whiteboard? If you use good, modern coding style (not old 5-deep
nested tables) then you don't need to care too much about obsessive
indent balancing, just to see where you are. Also the "end of div"
comments. Those turn around and bite you in a few years when they're
no longer accurate. Add them when they're _needed_, not just by
default.
* HTML 4.01 Strict. Good!
*- XML markup " />" on the empty <head> elements and on <img />. This
isn't appropriate for HTML, it's an XHTML thing.
* Multiple <h1> elements:
<div id="corporateid">
<img id="logo" src="logo01.gif" alt="Mikes logo" />
<h1>Mr. Michael Barnard</h1>
<h1>Independent Fire Risk Assessor</h1>
</div>
This isn't _wrong_, but it's a bit lumpy, IMHO. I'd use a <br> in
there instead, if you really do mean "a single page header, of two
lines". You can adjust the line spacing in CSS later.
* "Wrapped elements"
You've got this:
<div id="corporateid">
<img id="logo" src="logo01.gif" alt="Mikes logo" />
<h1>Mr. Michael Barnard</h1>
<h1>Independent Fire Risk Assessor</h1>
</div>
When you could (almost certainly) use this instead
<h1 id="corporateid" >
<img id="logo" src="logo01.gif" alt="Mikes logo" ><br>
Mr. Michael Barnard<br>
Independent Fire Risk Assessor
</h1>
You don't need to wrap up those <h1> elements. They're big tough
elements, they can look after themselves. Unless you're doing
particularly complex layout, you can merge them with the overall
wrapper that carries the CSS-significant id/class attributes. You'll
need to change the CSS selectors to match, but that's easy.
Similarly
<div id="navbar">
<ul id="navlist">
could become
<ul id="navbar" >
* Bare <img> in a block.
<div id="corporateid">
<img id="logo" src="logo01.gif" alt="Mikes logo" />
<h1>Mr. Michael Barnard</h1>
<h1>Independent Fire Risk Assessor</h1>
</div>
<img> isn't a %block; element as <h1> and <p> are. Mixing it directly
in with them as siblings can get hard to understand how the formatting
is going to work. if you need to, don't be afraid to use
<div class="img-wrapper" ><img ... ></div>
* Use of id on elements
<div id="corporateid">
id is great for JavaScript and DOM access, not quite so good for CSS.
The reasons are complex (and oft-discussed, search for "cascade" or
"specificity"). As general advice though, use class to markup up HTML
for future reference by CSS, not id. Quite often this is the simplest
and most appropriate way to code it:
<div id="corporateid" class="corporateid" >
In particular I'd change this
<li id="active"><a id="current" href="#">HOME</a></li>
to
<li class="current" ><a href="#">Home</a></li>
* UPPERCASE typography
GO EASY ON THIS, IT'S HARD TO READ. One highlight menu item is OK, but
repeated lines of it is hard work.
* UPPERCASE in HTML
If you want to force uppercase, use CSS to do it. Code the HTML itself
as normal English mixed case.
* Whitespace padding.
Add some whitespace (with CSS padding) around blocks of text, so as to
make it easier to read. Particularly at the start of coloured
background blocks.
* Background color isn't being set in your CSS, so my lurid pink
default shows through instead.
* CSS font setting
Read the group archives. We get stroppy about this.
font: 80% arial, tahoma, "Trebuchet MS", verdana, arial, verdana,
sans-serif;
** Avoid Verdana
** Don't scatter-gun the font names. In particular, don't list the
"common" name before the "rare" name, or you'll always get Arial.
tahoma, "Trebuchet MS", arial, sans-serif;
isn't a bad list (aesthetic arguments aside)
** body text goes at 100%. Always.
** body text goes at 100% for non-IE browsers. It _might_ go smaller
for IE alone (use conditional HTML), to work round an IE bug. Even
this is political. Search the archives.
* Use a validator (try Mark Gueury's for Firefox). You're nearly valid
here, but not quite. It's easier to check though if you're completely
valid. CSS validators, web developer toolkit, Firebug, Colorzilla etc.
are all handy.
* In general, don't mess with line-height (although Jukka's site
describes a reason for always setting it, so as to get sensible
defaults). If you do set it, set it in undimensioned units, not ems
(complicated as to why, but search the group or read the spec)
line-height: 1.3em;
* Simple mailto links will attract spam.
href="mailto:
[email protected]"
Use a server-side mail form-handler (your ISP usually offers one)
At a minimum, using a simple numeric entity seems to be less spammy
href="mailto:info&64;example.com"
* Lists are lists
<a href="index.html"> home </a>
| <a href="mailto:
[email protected]">contact </a>
| © 2008 Michael Barnard
Should IMHO be coded as <ul><li> markup, but I wouldn't worry too much
about this. It's a pain to generate a pipe character between entries
easily, in a cross-browser manner (wrapping every entry is easy
though, just use border).
* Also don't link to index.html, just link to the directory <a
href="./" > and let the server's default page do the rest.
* You're using a lot of pixel units in your CSS. Now this is no
problem for the odd 5px here and there, but in general em units should
be your starting point, not pixels.
* Fluid design is good and seems to work OK (I've only looked on one
screen, with Windows Firefox though). Certainly this is a good thing
to watch out for. I might be tempted to add a max-width : 55em; to
your centre column though (NB, that's _max_ not width), because text
in ridiculously wide lines gets hard to read.
Otherwise though, it's a commendable piece of work. Good job!