Okay, since I only have some screenshots and the current site to work with, what I’ve come up with, markup-wise, is maybe not exactly what you are going for with the changes. But it will start out in the right direction.
I have a beginning of markup here. It’s ok that it doesn’t look like much, because good HTML should look like an ugly college paper : )
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<title>Erskine Evangelical Free Church</title>
XHTML strict, language settings on the HTML element, the content-type with charset meta should always come first (technically browsers hit that, affirm that it matches the server headers if there are any, and begin to reload the page), language meta as an extra, then the title. I keep title before all the rest of the stuff like css and javascript links. Browsers stop to fetch those files before continuing to load the HTML page, so let it hit the title right away.
Then I left the description and keyword tags, except I made NAME lowercase (XHTML is a lower-case markup lang) and added the closing slashes on those (XHTML wants EMPTY elements closed… so even though this page is going to be served as HTML4, we are using an XHTML doctype so might as well follow all the rules).
Currently I have inline <style> tags in the <head> because I’m just beginning to build the very basic boxes. When I get basic boxes done, I move those out into their own sheets as your dev had.
You really want just one CSS sheet, not a separate one for resets. Each separate file is a whole separate request to the server, and no matte how small the files themselves are, each handshake (connection with the server, confimation, start sending packets) takes additional loading time. So, one CSS sheet for screen, another for print or handhelds or alternate stylesheets if you want. I tend to put any hacks needed for IE in the main stylesheet, rather than using IE Conditional Comments. You can do either one, but CC’s means you’ll probably have an IE stylesheet.
If the hacks are few, I wouldn’t bother with some whole other sheet, because that’s two places to keep track of stuff and of course IE users ask for two stylesheets.
<body>
<div id="container">
<ul class="access">
<li><a href="">possible skip link</a></li>
</ul>
<div id="heading">
<h1>Evangelical Free Church of Erskine <small>Presenting a changeless Christ to a changing world</small></h1>
<ul id="site-nav" role="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="jesus.html">About Jesus</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul id="church-nav">
<li class="hours"><a href="hours.html">Hours of Worship</a></li>
<li class="events"><a href="events.html">Upcoming Events</a></li>
<li class="art"><a href="articles.html">Articles</a></li>
<li class="pod"><a href="podcasts.html">Podcasts</a></li>
<li class="mini"><a href="missions-and-committees.html">Missions and Committees</a></li>
<li class="study"><a href="further-study.html">Further Study</a></li>
</ul>
</div>
I have a holding place for a skip link, if we add one. It kinda depends on what most pages will have for content and if the service links are only on the main page.
I still haven’t decided what I’m going to do with the h1, but I have decided having four separate calls to the server for images seems silly looking at this page. Looking around the live site, it seems the church name and everything is there every single page, so what I’ve done is made a single image: http://stommepoes.nl/Tests/erskine/images/bg.jpg
That image can be cached by user agents and get re-used on each page. It’s 56kb (prolly someone can make it smaller) but gets called just once, instead of 4 separate calls.
Since there’s a lot of space above the top menu, I’m thinking of just having it there in the same colour, so generally invisible for users with CSS and images on. Images off, the text is there for everyone.
The <small> tag as used here is something I picked up from Deathshadow, and I like it. Small is great for taglines: I don’t see it as a presentational tag (if you want to make something small, you use CSS for that, not markup) but the reason these types of text are small are content reasons: it’s lesser content, it’s shuffled a bit to the side, it’s getting pushed out of the limelight by the larger main header text. They’ll get styled later.
On ALL other pages on this site, that text will NOT be an h1. H1 is the title of the page, not the title of a site. Each page of a site are independent documents, so they each have their own titles. The name of the church makes sense as the h1 of the main intro page, but for the rest of the pages, I’d make it a p element. The h1 of the other pages is likely to be the first header after the site menu.
Top menu I’ve renamed: you don’t have to use the name I used, but “top menu” is currently clearly “the menu at the top”. However, the menu’s list items don’t have anything to do with where you’ve decided to place it on the page. Try to think of a name for that menu that would still make sense if it later became a left-hand vertical site menu.
Similarly, I’ve called the other one church-nav (keeping the original style of class names, I personally don’t like -'s in my names but they are fine) because it looked like church-specific menu, not to do with the website (articles could be argued either way I guess). I’ve left the class names on there as there will probably be image replacement (to use http://stommepoes.nl/Tests/erskine/images/nav-buttons2.png) but we will need to add at least one more tag in those anchors to do it (I’m still mulling that over). Most importantly, there is text in the anchors that tells users where they are going. People who can see the images will read the text on the images… a nice extra, which is what images are for.
<div id="content" role="main">
<div class="main">
<h2>Welcome to Our Web Site<span></span></h2>
<blockquote>
<p>We are a growing church in a small town just 12.6 km (13 minutes) west of Stettler, Alberta. Attendees come from Erskine and surrounding area. We are an imperfect group of Christians serving a perfect Lord.</p>
<p>The simple, biblical presentation of Jesus and His message of hope and salvation is at the center of all that we do. We invite you to come and visit with us and if possible – stay with us!</p>
<p>I believe that we are small enough to need you and large enough to meet your needs! </p>
</blockquote>
<p class="source">- <cite>Pastor Ross Helgeton</cite></p>
</div>
<div class="sidebar" role="complementary">
<h3>Faith & Reflection Articles<span></span></h3>
<p>Every week, the <i>Stettler Independant</i> publishes Pastor Ross’ <b>Faith and Reflection</b> articles.</p>
<p>Now you can have these same articles delivered to your inbox by submitting your name and email address below.</p>
<form action="?" method="post">
<fieldset>
<legend><span>Subscribe to our events!</span></legend>
<input name="" type="text" value="coming soon" />
<input name="" type="submit" value="SUBSCRIBE" />
</fieldset>
</form>
</div>
</div>
The “role” stuff is optional; you’ll decide if you want to try it. Originally an XHTML2 attribute, it’s being developed for accessibility reasons by the W3C under ARIA. However, the validators currently don’t recognise them and will report them as errors. I use this plain-english page to determine which ones I used: http://www.paciellogroup.com/blog/?p=106
But you can take them out if they are too weird. I’ve only recently started using them myself. Browsers and accessibility software that don’t understand them will ignore them, so they are safe.
I couldn’t see what Content and #main were doing so I left Content as the main wrapper, and changed the presentational names “left” and “right” to “main” and “sidebar” (they kinda seemed like that, but you can choose whatever makes more sense to you). Here, even if the content were to switch places, the names main and sidebar make more sense than left and right. Just a hypothetical.
Since the main text in #main looked to be a large quote, I wrapped it in a <blockquote> element, which must have blocks as its direct children (p’s). Then the last p I use the <cite> element around the pastor’s name. Cite doesn’t do whatever it was originally intended to do in browsers, but oh well, I think it fits the content. We’ll style the blockquote so browsers don’t use any default blockquote styling, and style the cite to have italic text.
I have empty spans inside both the h2 and the h3, because I remember you had some image text you wanted to use. The spans will hold those texts directly over the actual header text, hiding them. Image replacement. Since I recall the text was different in your version, I don’t have id’s on the headers but they would have to have unique id’s or classnames so you can assign the correct image to the correct header.
Where there was em and strong tags, I actually turned them over to i and b tags. Why?
<i>Stettler Independant</i> publishes Pastor Ross’ <b>Faith and Reflection</b>
The reason those tags haven’t been deprecated (made illegal and unfashionable) is because they have a reason to exist: they are considered correct to use in marking up typography. Here, you are italicising the “Stettler Independant” because it’s a periodical title. Depending on the markup style you use, you’d either italicise it or underline it or both. The Faith and Reflection might not be best as a b but possibly should also be an i, as it’s the name of a series:
It’s difficult to tell if readers of Jane Austen’s Pride and Prejudice and Zombies should praise it or be astonished.
Doyle’s Sherlock Holmes series were published as four novels and 56 short stories
<em> is for text that need emphasis. Do <em>not</em> feed the bears!
<strong> is for important text that’s not a header: <strong>DO NOT FEED THE BEARS</strong>
I had little clue what the form was going to do, but I did wrap spans around the legend so it can be safely hidden away from view. I’m assuming in the future people will type in their email addresses? So it’s written for that currently.
<div id="footer" role="contentinfo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="privacy.html">Privacy</a></li>
<!--li><a href="#">Sitemap</a></li-->
<li><a href="contact.html">Contact</a></li>
</ul>
<address>Box 105, Erskine, Alberta T0C 1G0</address>
</div>
</div>
</body>
</html>
Pretty much unchanged. I might wrap a block around the address tag, not sure: I’ve forgotten if it’s a block element itself or not! We usually don’t want blocks and inlines sitting next to each other, though it’s not illegal.
Anyway I’ll let you look at that, ask questions, or tell me where I’ve screwed up. In the meantime I’ll start into styling it more, but markup-wise, this is mostly what you’ll want to start with.
I would need examples of header images as I don’t have access to those anymore.
If you end up having lots and lots of headers and they will change regularly, then instead of image replacement, you’ll want either sFIR, a Javascript like Cufon or Typekit, or you could try using the CSS3 @fontface, which can work with IE if you get the right font file type. In the last two cases you have to have the legal ability to let users’ browsers download the fonts, so it’s either got to be a free font or you have to buy permission.
but at least it’s looking like I want it to. It definitely doesn’t have to be html5 and I only threw that in because i copied from my own site and knew that it worked (again, I know…) 
