or

Subscribe now! ( subscribers)

Beginner’s guide to CSS

Building a standards based HTML template

We have talked a lot about the theory behind CSS and HTML working together to form a site with good structure that is separated from the design. But the first parts of building pages are always the same, you type <html><head>... and so on. So why not make a template that you just copy to get started on a new site? Now, what requirements do we have?

It should:

  1. Contain: header, navigation, content, footer
  2. Use well-structured HTML
  3. Be error-free and encourage good coding

Let’s start with number one there. We want our HTML document split up in four parts all with different meaning. For this I will use the <div>-tag. Div is short for “division” and isn’t header, navigation and so on just “divisions” of our site? I think so. So let’s start:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=latin-1">
   <title>Your own page title</title>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="header">
   <!-- Header here! -->
</div>
<div id="navigation">
   <!-- Navigaiton here! -->
</div>
<div id="content">
   <!-- Content here -->
</div>

</body>
</html>

Ok, there might be some new stuff there so let’s go through the lines one by one. First we state this document’s doctype: what language we use. You might have heard of XHTML, another similar web language, but for a first page we don’t need the features that gives us access to, keep it simple, just go with HTML. Also, the <!DOCTYPE> above sets the document to use Strict HTML. To understand that you need to know that there are two kinds of rendering in a browser. One that follows the standards set up by the W3C, “standards mode”, and one for older pages, called “quirks mode”. Standards mode is what we want to use. It makes the pages render (almost) the same in modern browsers and it frees us from being dependent on a specific browser, we’ll just follow the standard. Quirks mode is something of a bug mode. It’s there to keep old pages looking the same as they did before browsers started trying to follow the standards and is therefore intentionally filled with strange bugs. A browser determines which rendering mode to use based on what doctype we use, so make sure you use the right one!

Ok. That’s a lot of explaining for a single line of code, I’ll be swifter now, next line. You have probably written <html> before in the beginning of your documents. My line is almost like that except that I have added lang="en" there. That line tells the browser which language we will use. Why does it matter what language we use? you ask… Well, there is assistive technology that read webpages to people out loud called screen readers. Those have to know what language it is to be able to pronounce the words. It’s so easy for you to add those few characters so why not do it? If you don’t plan on making an English page you can find your own language code by visiting WAIs Language Codes and check out the two-letter names there (Note: language codes are in lowercase).

Next we have the head of the document. The head contains a some of meta-information about the page, like character encoding, title and what stylesheet (CSS file) to use. The charset there is the trickiest one so let’s take that first. There are a lot of different letters in a language. When computers where first constructed the engineers only thought about the American/English language, they didn’t even think about the swedish letters å, ä, ö or the deutsch umlaut ü or what about the &-sign? There are a lot of characters and at first there was no general consensus on how to handle them. Then someone came up with the smart idea of grouping them into sets, groups of characters that are used in certain parts of the world. So, what the meta-tag does is simply to state: “This person wants to input western characters (latin-1 characters)”, and this tells the browser what character set to use. A more genaral approach is to use the utf-8 character set but that quickly gets tricky. Finally we have a text/html there that simply tells the server to send the document as a HTML, not like an image or something like that. The <title> and <link> you should be familiar with, if not, google it :)

That was a lot of info on just a few lines of code, I hope I didn’t give the impression that this stuff is hard, because it’s not. To use the stuff above you just copy and paste it and start filling it with content.

The body of the document consists of a bunch of divisions, let’s add some content to them:

...
<div id="header">
   <h1>The name of this page</h1>
</div>
<div id="navigation">
   <h2>Navigation</h2>
   <ul>
      <li><a href="first.html">First</a></li>
      <li><a href="second.html">Second</a></li>
      <li><a href="third.html">Third</a></li>
   </ul>
</div>
<div id="content">
   <h2>Content</h2>
   <p>Some sample content, add your own here</p>
</div>
<div id="footer">
   <p>This page is written by [Your name] and builds on a <a href="http://friendlybit.com">Friendlybit template</a>.</p>
</div>
...

What have we done here? First you should note that a quick overview of the document tells you quite much about the content. You can easily see that some stuff are headers (h1, h2) and some are just a list of links (ul, li, a). Let’s go through the code quickly:

First we have a header. A header is something that’s most often a big image and some text. Some pages don’t have the header in the HTML at all, they just link to an image and have the text in that image. Problem with that is that neither search engines nor screen readers can get the title text. With the title text being the most important piece of description a visitor has to what page they have come to, you do have a problem. So trust me, keep that text there.

Next up we have the navigation. Navigation should almost always be marked up as an unordered list of links. I’ve seen the strangest variants of this with tables, nested tables, <br>-tags after each line and so on but the only content there is a list of links, why make it something it isn’t? Using a list doesn’t mean it will have to look a certain way, remember that all design is handled in the CSS later on, this is just HTML we are dealing with here. Note: you can easily remove the bullet marks with list-style: none;, that’s not a reason to use some other HTML.

The most important part of your HTML document is the content. This is the reason people will visit your page and this is where you should put most of your effort. Mark your headers with appropriate header-tags and make sure they look different from the ordinary text, this makes it easier quickly get a grip of what you’re are trying to say. Use paragraph tags around your paragraphs to make is easier to style your text. The CSS text-indent: 2em; adds some space before only the first word in each paragraph, just to name one simple thing you can do with CSS when you’ve used good markup.

Lastly, it could be a good idea to add a footer to your page. Make sure you have some kind of contact information here or somewhere else on your site, who knows what people will want to ask you? If you want to help me you could add a link to this site somewhere on your site too. If you do, thanks alot!

On the next (and last) page of this short beginners guide we will wrap everything up and add some sample CSS to the mix. All is free for you to copy and use on your page. Ready?

Friendly Bit is a blog by Emil Stenström, a Swedish interface developer and web strategist that blogs about the modern web and how to make best use of it.