In the first article in this series I gave a basic overview of XHTML and how to mark up a basic blog. That was just a the beginning. What I’m about to show you will give you everything you need to write semantic, accessible XHTML.
In order for a web browser to display your document properly you need to tell it what type of document you’re showing it. This is called a DOCTYPE, short for document type declaration. A DOCTYPE is really just a link to a file on the W3 website that tells the browser how to treat the document. Using a proper DOCTYPE ensures your XHTML will be treated as you expect it to be treated. Without a DOCTYPE most browsers revert to quirks mode and can be (arguably) quite unpredictable. Here’s what a DOCTYPE looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You really don’t have to worry about memorizing any of that. Whenever I need one I just grab it from A List Apart. If you’d like to know the technical ins and outs of DOCTYPEs there’s an amazing article at A List Apart. I’m really just stressing that you need a DOCTYPE and that it should be placed first, at the very top of your document.
You already know a few basic XHTML tags and how to use them but there’s more you can do with those tags. Some tags allow you to add attributes. An attribute is basically more information about the content you are describing. You have already seen an example of an attribute when you made a link. The href of a link is an attribute, it’s information about where the link should go.
Anchor links are the most common place to use attribute tags. You need an href attribute to tell the link where to go. You can use a title attribute to provide more information about where the link is going. And, unless you are using an XHTML Strict DOCTYPE you can use the target attribute to tell the browser how it should open the link. Here’s what an anchor link would look like using all of the attributes:
<a href="http://www.google.ca" title="Google" target="_blank">Google</a>
You have 4 options for the target attribute: _blank, _parent, _self, _top. _self is the default and it opens the link in the same window, you don’t have to specify _self, the browser assumes it if you don’t specify anything else. _blank will open the link in a new browser window and to be honest, that’s really the only one I ever use.
Two more very important XHTML tags that are slightly more about presentation than they are about structure are <div> and <span> tags. Div tags represent divisions or sections of content. If we take a look at our blog example we may want to outline the header section (page titles and menus) with some divs.
<html>
<body>
<div id=”header”>
<h1>Idiot Banter</h1>
<h2>A blog about Stuff and Things</h2>
<ul>
<li><a href=”/blog”>Blog</a></li>
<li><a href=”/about”>About</a></li>
</ul>
</div>
<h3>The Blog Post Title</h3>
<p>This is our blog paragraph and I think it’s pretty great.</p>
<dl>
<dt>Posted By:</dt>
<dd>Matt</dd>
<dt>Posted On:</dt>
<dd>Tuesday, August 14th, 2007</dd>
</dl>
<body>
<html>
A div is a block level element which means it’s perfectly suited as a container for other elements. A span is an inline element which means it can live inside block level elements as well as inline elements. I realize this is getting a little complicated but it’s really not. Use a div to group multiple elements together, like a heading and a list as we did above. Use a span to highlight a word or two in a paragraph or list like this:
<p>Some text is the same and some might be <span>different</span>.</p>
I suppose now might be the time to mention <strong> and <em> tags. Strong and Em tags indicate emphasis. Strong indicates bold and shows up as bold. Em stands for emphasis and shows up as italics. They are used like any other tag:
<p>Some text that is <strong>strong</strong> and some with <em>emphasis</em>.</p>
Since there are specific tags for strong/bold and emphasis/italics a span shouldn’t be used for either of those. There’s no tag that specifically makes text pink so you’d use a span combined with CSS to create that wild effect.
DOCTYPEs, Divs, Spans and Attributes are all pretty simple but very important. DOCTYPEs tell the browser how it should handle your code. Divs indicate divisions or sections. Spans suggest different parts of the same element. Attributes give you more tools to describe the content you are marking up. Next up: Ids, Classes and some basic CSS.