Jason's Valid (X)HTML Skeleton Tutorial
It's been a while since my last tutorial (or since my last post, even) and I've been getting some clamor in my inbox about what I consider to be the best way to create the (X)HTML portion of a site. The truth is, many people are pretty clueless when it comes to where they should begin. That big, white text editing box can be a bit daunting when you're not totally certain how you should go on. Is there a "right" way? A best way? Well, the answer is, as Confucious would say, "Der are many right way, but no best way." End of tutorial.
Zzzinga! Got you good, I know it! Clearly you have peripheral vision and could see that there was more to this tutorial than just that one paragraph, so welcome to the portion of the show I call, "Jason's Valid (X)HTML Skeleton Tutorial".
This tutorial will show you how to create a valid XHTML, two-column layout that is CSS-ready and inline-styling free, kind of like your favorite diet pop/soda/coke. And don't worry, no skeletons were harmed in the making of this tutorial because, well, skeletons are not...living.
Okay, enough crap. First things first: Doctype. The very first thing your page needs in order to be (X)HTML compliant is a doctype. If you are scratching your head, knee, or face trying to figure out why I keep putting the X of (X)HTML in parentheses, you should probably stop, because it's a bad habit and it won't help you figure it out any more quickly. The reason is because the X stands for "eXtensible" HTML, which is slightly different (and easier!) than regular HTML, but my model will work in both X- and HTML. Why isn't it EHTML? Because we're not Canadian, and everyone knows the letter X is way cooler than the letter E. But I digress.
Doctype - your doctype determines how your site is going to be validated. There are several different forms of (X)HTML, and your doctype tells the validation parser which one it should use to validate your site. Of course there are things such as custom doctypes where you can create your own HTML tags, but that's outside the scope of this 'tute. For this 'tute, we're going to use XHTML Transitional simply because it's a good segue between HTML 4.0 and XHTML Strict, which is where most browsers are going to be in the very near future.
Your doctype and leading <html> tag should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
This line is cAsE-sEnSiTiVe, so make sure that you type this in correctly. Or, better yet, just copy and paste it and save yourself the trouble.
Before we get into the XHTML model, I'll go over a few of the main elements that comprise XHTML (and separate it from regular HTML), and should be included even if you stray from my model.
- ALL TAGS ARE IN LOWERCASE.
- Every tag needs a closing tag, ie
<p></p>- There are a few exceptions, such as
<br />and<img />, which are considered "empty elements", which basically means that it doesn't need a closing tag because there's nothing you can put between the opening and closing tag. Many meta tags are empty elements as well.
- There are a few exceptions, such as
- All
<img />tags must have an "alt" attribute. - Attribute values must always be in quotes, ie
<img src="me.jpg" alt="This is me after my eighth beverage." /> - Tags must be closed in the order they were opened.
- If any special characters are used, such as & or —, they must be used with their character counterpart, such as & for &, or — for —
- If you use the "id" attribute, you can only use it once per element. For instance, you can't have two div tags with the same id attribute.
This covers some of the biggies. For more info on the smaller stuff, go here: http://www.w3.org/TR/xhtml1/ or just validate your page and find out where you messed up.
Okay, so now you know what XHTML sort of is and you have a doctype and an <html> opening tag. What now? Try this:
<head>
<title>Your Title</title>
<meta name="Description" content="Your description" />
<meta name="Keywords" content="Your, comma delimited, keywords" />
<meta equiv="content-type" content="text/html; charset=utf-8" />
<meta equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
Hopefully blogger or whatever feedreader you're using parsed that correctly...sometimes they won't, but if you're lucky enough to be able to read that, congrats! You know how to make a header section! Let me briefly explain what is pretty much self-explanatory:
- Title: duh. The title of your page.
- Description, and Keywords: duh. Written meta information about your page. May or may not be important to certain search engines, but always a good idea to have.
- That "imagetoolbar" thing: it's not exactly necessary, but it's good to have in there because it turns off that annoying little toolbar in IE6 that pops up when the user mouses over an image. I like this meta tag, so I hereby declare it part of the skeleton. Which is mine anyways, so I can do with it what I will. So there.
- Stylesheet: this is where you connect your CSS to your page, because you're not putting your styles at the top of each. That's just gross and dumb, and my skeleton is pretty and smart.
After you put in your header, put in a <body> tag and you're ready to get started! Okay, well, you're ready to copy and paste some more.
What I'm going to introduce to you now is what is the latest and greatest in cutting-edge XHTML technology, your buddy and mine: Div Structure. Div Structure is the savior of the internet, riding through your CAT5 cable on a tiny white horse and a halo around His head. Or if you're on WiFi, He's in a billion pieces above your head, in your nose, and underneath your fingernails, to name a few. Okay, so maybe Div Structure can be a bit "invasive" but he is still the easiest thing around, outside of Candy, the creepy lady with pink hair and ripped pantyhose who is always hanging out at the gas station and seems to like you for reasons you can't comprehend.
Imagine that div structure is sort of like those Russian dolls that pop out from one another with a teenier one inside of the last, except that divs are not made out of wood and they're a lot easier to decorate. Also, instead of only being able to fit one doll inside each preceding doll, you can fit as many as you want in there because the outer doll is made of like, rubber, or very quickly growing hair, or something. If you're familiar with table structure, this concept may be new and different and frustrating to you, but believe me, it's an improvement in more ways than I can list here.
The first part of our div structure skeleton is going to consist of a main "wrap", which is essentially a div that goes around everything. In fact, we are going to name the div "wrap" for simplicity's, Pete's, and chri's sake. So, after the body tag, add <div id="wrap"> </div> with some line breaks in between the opening and closing tags so you can add more Russian dolls (metaphor extension? eh? eh?).
Below the wrapping div tag, you're going to place another div without anything in it with an id of "top". "What the deuce am I doing wasting a div tag for?" you sputter, incoherently, to your imaginary friend. Well, Mr./Mrs. Darryl and Debbie Downer, I've found in my years as a developer, this div can be helpful for things such as jump links and even adding auxiliary imagery. Also, its placement there semantically correct because it is, technically, at the top of your content. While you're at it, you can place a div tag with an id of "bottom" right below it for the same reasons, opposite style. Everything you make now is going to be between your "top" div and your "bottom" div.
Now to the meat of the skeleton (irony?)! My skeleton consists of just a few basic elements (just like you!):
- Header (head)
- Content (body)
- Side column (pancreas...?)
- Footer (arms)
Of course, every site is not this simple. You may wish to add certain features to your skeleton, such as adamantium claws, or another eye socket, or a flash widget. But I've found that even though this structure is very simple, it is very adaptable to pretty much any situation you could throw at it, should you harness the ability to hurl concepts at...code. So for the basics:
Create a div with the id of "header" and close it, inserting line breaks. In fact, from now on, when I say "create a div named _____" the preceding instruction is what I mean, so just DO IT, okay? Inside this div is where your logo and main navigation are going to go. At the top of every page you should have a logo that links back to the home page of your site, because, well, that's how we roll in Web 2.0. It frees up a space in your main navigation (ie, you don't have to have a space for "Home") and it's pretty much a best practice amongst the big sites (and some little ones) on the net. Be sure to put your image in a <p> tag. This, along with its double-wishbone suspension, will give you more control for a greater feel and a smoother shave. Then go ahead and create an unordered list with your main navigation elements. If you want, go ahead and give each <li> tag a unique id so that you can create pure CSS rollover imagery for your nav. Your header section should look something like this:
<div id="header">
<p><img src="logo.jpg" alt="Bob's Corncob Jobs" /></p>
<ul>
<li id="nav-about"><a href="about.html">About Me!</a></li>
<li id="nav-corn"><a href="species.html">Corn Species</a></li>
<li id="nav-violent"><a href="violent.html">Violent, Corn-Related Crimes</a></li>
</ul>
</div>
Of course your site is probably not about corn and the violent crimes associated with them, so you'll want to replace my sample text with something a bit more relevant to your site. All the code listed above this point is pretty standard and mostly won't change on every page. Almost everything below this point is going to (hopefully) be different on every page of your site. That's because it's your content. What I'm going to show you is, of course, not the only way to do it, nor the best way for your site necessarily, but it is a good starting point and the concept is sound, and I ain't talkin' 'bout music. Wow, two apostrophes in a row...talk about awkward.
Remember that talk we had about wraps? Yeah, it made me hungry, too, and it doesn't only apply to the outermost layer — you can use wraps anywhere, sometimes within other wraps. Remember those double-wrap tacos from Taco Bell? It's kinda like that, except less delicious. Anyways, for the content section of your page, unless you're not adding any other elements (ie, other divs) aside from text, you should create a div named "content-wrap" right under the close of your header div. What this allows you to do other than imagine food while you code is logically keep all of your content together, regardless of the elements it contains and what format they are in. It also helps to standardize your styling when you use CSS, since you can use various forms of cascading styles when you use wraps without having to rewrite a lot of BS CSS. Ergo:
<div id="content-wrap">
<div id="content">
<p>I am a bologna, cheese, and mayo sandwich with chips in the bread.</p>
</div>
<div id="some-other-element-named-logically">
<p>[insert random inane content here]</p>
</div>
</div>
Cool beans, daddy-o! You're almost done! "But wait," you interject, mouth full of kosher ham sandwich. "Where do I put my sub-navigation? How will my users know where to find my other pages within the section they are currently in?" First, where did you find kosher ham, and second, just add in a sub-navigation section, silly! The reason why you include your sub-navigation after all your content instead of before is for two reasons: accessiblity and SEO. Including your subnav (as it is referred to amongst we geeks) after your content means that if perchance someone using a mobile device, screen reader, or other vibrating instrument that does not allow CSS rendering happens to plod across your page, they will not have to sift through your 300 sublinks about the various properties of corn before they get to your content. It is good for SEO for the same reasons, as spiders are lazy, lazy creations that get tired after checking a few links and may never make it to your content.
(I realize this is getting [ha, "getting"] long, bear with me. You've been having fun and learning so far, though, no? Yes?) So, how do you make your subnav appear to the left of your content if it comes after it? Easy: CSS. First, create a div named "sidebar" right outside of your "content-wrap" div. This will become the cozy abode of your subnav. The reason we call it "sidebar", though, instead of "subnav" is because it is possible that you may want to include other things in that area of the page, like a link to my site. So, inside of "sidebar" create another div named "subnav" and jam all your related corn-growing technique page links into here in an unordered list, like so:
<div id="sidebar">
<div id="subnav">
<ul>
<li><a href="sunlight.html">Sunlight Grows Corn!</a></li>
<li><a href="water.html">Water Grows Corn!</a></li>
<li><a href="love.html">Love Grows Corn!</a></li>
</ul>
</div>
[insert link to Fix My Site here]
</div>
After you've created this sidebar, the way to sneak it up to the left of your content is via CSS. Without going into too much detail, basically fix the widths of your "sidebar" div and your "content-wrap" div to the sum of the width of the "wrap" div, ie 200 (sidebar) + 550 (content) = 750 (wrap, or sidebar + content). Then, float the sidebar to the left and the content to the right, and do the hokie pokie and turn yourself around. That is what it's all about.
Pressing on, the only remaining element to my skeleton are the arms: the footer. This is easy; create a div named "footer" and place some text links that mirror your main navigation in your header and your faux-copyright claim that no one can enforce. Bam! Eureaka! Calloo! Callay! You are done! Now wasn't that easy? I apologize for the relative dearth of information presented in this short tutorial, but hopefully I have presented you with a working model that you can use as a foundation for more crappy websites for me to revile.
For your reference, here's the full model in all its glory (shrunk down to save space):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Your Title</title>
<meta name="Description" content="Your description" />
<meta name="Keywords" content="Your, comma delimited, keywords" />
<meta equiv="content-type" content="text/html; charset=utf-8" />
<meta equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
<div id="header">
<p><img src="logo.jpg" alt="Bob's Corncob Jobs" /></p>
<ul>
<li id="nav-about"><a
href="about.html">About Me!</a></li>
<li id="nav-corn"><a href="species.html">Corn Species</a></li>
<li id="nav-violent"><a href="violent.html">Violent, Corn-Related Crimes</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="content">
<p>I am a bologna, cheese, and mayo sandwich with chips in the bread.</p>
</div>
<div id="some-other-element-named-logically">
<p>[insert random inane content here]</p>
</div>
</div>
<div id="sidebar">
<div id="subnav">
<ul>
<li><a href="sunlight.html">Sunlight Grows Corn!</a></li>
<li><a href="water.html">Water Grows Corn!</a></li>
<li><a href="love.html">Love Grows Corn!</a></li>
</ul>
</div>
[insert link to Fix My Site here]
</div>
<div id="footer">
[footer links]
<p>© 2006 Your Crap Site. All Rights Reserved</p>
</div>
<div id="bottom"></div>
</body>
</html>
6 Comments:
first, second, whatever. right?
*tear*
Looks great, Just wondering if you have a template for the css one would use for this. It would certainly be helpful in my understanding of joining the two together.
it's so great..thank you for your post
now I can make my blogspot valid xhtml 1.1 and css 2
<meta equiv="content-type" content="text/html; charset=utf-8" />
The meta tag doesn't have an attribute called "equiv" -- it's "http-equiv"
Also note that the HTTP RFC suggests that all headers should be capitalized, so strictly, that should be "Content-Type", not "content-type"
sweet little guide, thanks :)
I think your missing the opening body tag.
Post a Comment
<< Home