These days there are many browsers out there and of course you can test your page on them if you have the time. Even then there is the chance you missed one or two and then you are back at zero. Also, it is possible that a design doesn’t allow users with a disability to use the page.

So what to do?

First of all it is a good advise to use valid HTML and CSS. Also make sure you don’t abuse JavaScript, Flash and Gifs. If you are reading this article, I assume I don’t have to tell you about these things…

But how can you validate your HTML, CSS and Accessibility?

Well, I will tell you which tools I’m using to validate my websites. These tools are not perfect, but if you use them properly you make sure that they cover each others weakness and leaving you with a valid website at the end. Also, there are some things you can’t validate by using a tool. You need to know the guidelines for HTML, CSS and Accessibility (WCAG)

HTML Validation

My major validator is the official W3C validator. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using my Firefox for testing my websites. I have two very powerful extensions installed:

• HTML Validator by Marc Gueury
• Web Developer by Chris Pederick

The HTML Validator by Marc Gueury allows you to validate the page inside the browser without the need to visit a validator page like the W3C validator. The extension has 3 algorithm to validate the page.

• The “HTML Tidy” algorithm is based on the HTML Tidy from W3C
• The “SGML Parser” is based on the SGML reference information for HTML
• The “Serial” uses both validator algorithms one after the other.

The first algorithm is recommended for all while the other two are recommended for professionals. I myself prefer the Serial algorithm, but I believe you need to test which one works best for you.

The Web Developer tool by Chris Pederick does not have a built in validator, but it allows you to easily check a page with the W3C validator. Also it allows you to easily disable scripting or it outlines your HTML elements. It has many more options and is also useful for validating your CSS or W3C.

CSS Validation

I‘m using the official W3C validator for validating my CSS code. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using the Web Developer toolbar. It allows you to disable CSS if you want to. You can edit the CSS code and see the result without having to edit the original file and upload it again. You can even resize your browser window to test your layout for different resolutions.

Accessibility Validation

When writing a website I always rely on the HTML Validator extension. It tells you almost everything you need to know.

There are also online validators available, one of them you can easily access with the Web Developer toolbar. If it is not enough, you can always Google for other accessibility validators.

Wrap Up

Now you know which tools I’m using. I hope these tools will also help you. Or are you using them already? Do you know other tools you can recommend?

Or as Michael Martin from ProBlogDesign.com described it in his article “Does Valid Code Help Your Blog?”:

The W3C is the internet’s daddy. They created HTML, CSS, and dozens of other specifications that govern the use of the technologies that makes the internet thrive today. Valid code is code which meets their guidelines, and can be tested in a validator, such as the HTML and CSS ones.

I don’t want to discuss if using valid code should be used in a blog or if it is actually helpful for a blog. To be honest, I had it in mind, but somehow ProBlogDesign.com beat me to it, which is actually helpful because I can skip this part

To sum Michael Martin’s article up I dare to say that it is useful to use valid code, or better: Web Standards, in a blog.
His reasons are all great, but I have to add one more reason why you should use Web Standards: chances are higher that your blog is accessible by all humans, especially those with disabilities.

Less known among the Internet users is the Web Accessibility Initiative (WAI) of the W3C. Although some webmaster and “webcoder” know and follow the Web Content Accessibility Guidelines (WCAG) put together by the staff of the WAI there are way more webmaster / “webcoder” who are not following these guidelines.

I’m aware that these guidelines are not a must have for a website, however I try to write templates and websites following the WCAG as closely as possible. I’m not perfect on this part and I know that my blog template still needs to adjusted to follow the WCAG, but I’m working on it and I’m using one of the many WAI validators.

So, why I am talking about the whole accessibility thing?

As you know, there are many different browsers out there. Most of them showing the nice designed content of your website, however, there are text-only browsers like Lynx. These users won’t be able to appreciate your nice layout, but they are able to either enjoy your website or just ignore it because of it’s structure. Have a look at your website without the usage of images and CSS, does the “layout” show up in an order which allows you to easily navigate through your page? If not, I’d guess that text-only browser user will ignore your website.

I’m aware of the fact that text-only browser users are a minority, on most page statistics they won’t even show up, but do you really want to loose the few percent of possible customers?

Aside the text-only browser users there is a minority which most people tend to ignore if not forget. I believe it is really sad and of course wrong.
I’m talking about people with a disability. Yes, believe me or not, there are people browsing the Internet who are suffering from blindness or they are deaf or they have epilepsy…I could go on, but I think you get the idea.

It doesn’t require much additional time to make your template more friendly for this target group. For instance, you can avoid using animated gifs so a visitor with epilepsy can enjoy your website. Also, you can avoid the excessive usage of Flash. I know, there are people who would like to lynch me, but be honest. Can you easily navigate through a flash animation without the usage of a mouse? Not really, additionally the animation could prevent the visitor with epilepsy to visit your website at all. Last but not least, (I’m pretty sure that I missed many examples) are the people with some kind of color blindness, like the Red-Green-Blindness. If you use a red-green template you should make sure that either the colors are ok for people with red-green blindness or that you have at least an alternate design available.

Everything I mentioned here is my personal opinion. I know that it can be difficult to maintain a accessibility friendly website and I’m also aware that many major websites like Amazon or Microsoft are not accessibility friendly, but maybe you can make a change.

Whenever I discuss this topic with other people, I hear many excuses for not following the WAI. In return, I always have a solid argument against the excuse.

Bad vs. Good – The Accessibility Discussion

• It will take more time to finish my site!
  Not really, if you follow the WCAG right from the beginning, you will be done at the same time as you would without following it.
• It will make the page more ugly.
  Sorry, but you are wrong here. Actually even the average visitor can benefit from the accessibility optimized website because of the clearer navigation and so on…
• Those disabled don’t have to visit my site and/or shouldn’t use the Internet.
  Ignoring the fact that this is really racist, you should keep in mind that one day you could also suffer from some kind of disability. Of course, it is up
• Major websites like Amazon or Microsoft are not following the WCAG either, so why bothering?
  True, but you know you could make a change? Just because “famous” websites are not following the WCAG doesn’t mean your website wouldn’t help to spread the word and encourage other people to optimize their own websites.

Of course at the end it is your own decision if you try to follow the guidelines or not. I myself will continue to optimize my website(s) into this direction.

What about you?

What I teach you today is not how to create a professional website, but it is the basic design method any web programmer started with.
It is the old school table, but I add Cascading Style Sheets (CSS) to the table to get it a nice look.

But before you can start, you need to have an idea how you want to structure your page. The best thing to do is to grab a piece of paper and make a draft. As example I made a draft in a graphic program, although I prefer the paper method:

Now let’s think about how to convert the design into HTML…
You remember reading in the W3Schools reference something about <table>? If not, it is no problem as I explain it now

But first let’s get the basic page code done, which is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world!</title>
</head>
<body>

</body>
</html>

Now let’s see how we add the basic structure of the original design by using

Tables

To create a HTML table you need the <table>, <tr> and <td> tag. I will post the code I used for the table of my final example page and then I explain you the additional attributes used to modify the table:

<table>
<tr>
<td colspan="2">
Hello World!
</td>
</tr>
<tr>
<td>
menu
</td>
<td>
text
</td>
<td rowspan="2"$gt;
whatever
</td>
</tr>
<tr>
<td colspan="2">
foot
</td>
</tr>
</table>

Put the whole table code inside the body tags and have a look it it. I know it isn’t looking nice, but we will take care of it later.
So what does the code do…
the <table> tag defines a new table,
the <tr> tag defines a new row in the table. If you count our “<tr>…</tr>” you will count 3 rows,
the <td> tag defines a new cell/column in a row. Our first row has one cell/column, the second has 3 cells/columns and the third has one cell/column again.

Please keep the following “method” in mind when you build a table. It served me good back when I used tables for layouts:
1. define the table: <table></table>
2. count how many rows you need and add them inside the <table> tags: <tr></tr><tr></tr>…
3. have a look at the first row and count how many cells/columns you need. Then insert the amount of cells you need by adding the appropriate code into the <tr></tr> tags: <td>…</td><td>…</td>

If you used the above method you will see that our table doesn’t work as intended if we use my draft. So here we are using those attributes I have in my sample code already:
rowspan tells the browser if a cell is stretched over multiple rows. In my example the third cell of the second row stretches over 3 rows, so we are using rowspan=”3″
colspan tells the browser if a cell is stretched over multiple cells/columns. The cells of the first and the third row in our example are stretched over 2 cells/columns, meaning that the cells of the first and third row are as long as the 2 cells of the second row. We use colspan=”2″ here to achieve the proper behavior.
I assume it is difficult to visualize, so let me try to explain it in a different way:
rowspan stretches a cell vertical while the colspan stretches a cell horizontal.

Now as our table is behaving the way we want it to, it is time to add some optical

design with CSS

For a full list of CSS properties visit the w3schools website

Let me show you the code of the final result of my example, using what we have learned and updated with the CSS I want to teach you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Hello World
</title>
</head>

</body>
</html>


I know the code is a mess on here, so I recommend you copy and paste it into a text editor to have a proper look at it

Let’s start with the body tag. You see the attribute “style” which tells the browser that inside this attribute you are using CSS to modify how the page is displayed.

background let you change the background color of the overall website. You need to use hexadecimal colors although there are also named colors, like yellow or black. I recommend you use Google to find more informations about hexadecimal colors.
color let you change the font color of the overall website. The same as for the background color applies.

I also added the style attribute to the table tag as I wanted to change the style of the table. I also wanted to make the table stretch over the whole width of the browser window.

border let you create a border around the table. I decided to use a solid 1px width border and gave it a grey color. There are some more border styles, so visit the CSS reference
width let you define how broad the table is. In my case I used 100% which means that the table fills the whole browser window. Alternately you can use pixel to give a fixed size, like 800px or what you like.

To manipulate the style inside or of a cell itself, you again add the style attribute. Basically you can add the style attribute to any tag, except the closing tag of a tag of course.
So, what did I do to my cells:

the cell of the first row got a
font-size of 50px, which means that the size of the displayed font is 50px.
The font-weight of 700 displays the text as bold.

the text in the first cell of the second row got
aligned to the right with the proprietary: text-align. Additional to “right” you can use “center” and “left”.
vertical-align:top; aligns the whole text in the cell to the top of the cell as our second cell, the one with the in it, is a lot longer. Wouldn’t we set it to the top, it would be vertical aligned in the middle, as it happens in the third cell. There are a few more vertical align behaviors, have a look at them and play around
I also changed the color of the links in the cell and used text-decoration to show you that you can change a lot more with the right style proprietaries.

The other cells and rows got style proprietaries I explained earlier. I just used different colors to show you how the table layout looks like, so you can compare what the attributes are doing with a cell or row or the table…

I hope you understood everything, so have a look at my example page.
If you are not able to get your page working the way you want, feel free to use the comment section to ask for help.

Right now I have no idea what I will do in the next tutorial, so it will be a surprise. Meanwhile, use and train what you have learned.

Ok, so you think your page got already some interesting content…but I bet the layout is…uhm…let’s say boring…white background and black text…depending on the server default…so, the good news is there are tags which allow you to manipulate how a page is displayed.

Maybe you think there has to be a bad news if I only mention the good news above. Well, there are two bad news:
to write valid XHTML code you need to
1. learn some CSS (=Cascading Style Sheet) and
2. define the DTD (=DocTypeDefinition).

Before you start searching my blog (or the web) for a CSS tutorial you should know that I will cover some basic CSS knowledge in this tutorial and write some CSS Tutorials at a later date.

Now, after you calmed down, let’s go on with this tutorial:

Update: Because of the recent update of the W3C validator I’m introducing here, I had to expand the tutorial and added a couple more things at the bottom of the tutorial.

Before I start posting a list with all HTML tags and their usage/effect I just forward you to this XHTML1.0 Reference at W3Schools which I still use when I need to look up a specific tag.
Bookmark it well, as it will be something you will use often while learning HTML.

Now let’s get back to our first valid HTML page:

<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Would you check this page with the official W3.org HTML validator you would get a big red error message, stating “This page is not Valid (no Doctype found)!”.

So, let’s add the doctype statement:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Maybe you now think I made a mistake since I stated earlier that the HTML-Tag tells the browser that it shall display a HTML file and you believe the “doctype” is part of the HTML page. Well, the DocumentTypeDeclaration or DTD tells the browser which kind of HTML it shall interpret…or better, which kind of specification the browser shall use for interpreting the document. I guess this is a bit confusing…just don’t think too much about it

There are 3 different types of the DTD: Strict, Transitional and FrameSet.
As I don’t go into details of the differences I point you to the W3Schools page about the DTDs.

The main difference between Strict, Transitional and FrameSet are that the first does not allow the use of frames and some attributes, the second one does allow some types of frames and all attributes and the FrameSet is like the Transitional except supports all frame types.

For this tutorial we will use the Transitional DTD although I will explain some differences to the Strict DTD. However, I will not talk about frames, as they are not used much anymore.

If you look back at the code I posted above, you see the DocType for Transitional. If we wanted to use the Strict one, it would be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now run the code I posted above through the validator.
Yes! “This Page Is Valid XHTML 1.0 Transitional!”

Ok, we just got a valid XHTML page, so let’s keep it that way while we manipulate how it is displayed.
Keep in mind, the official W3.org HTML validator is your best friend, so use it well (and often)!

Now let’s see how we can edit the style of the html page without using CSS.
The following tags you can use to edit and structure your text:

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
These tags describe a heading, <h1> being the top most heading and <h6> being the lowest heading.

<strong>
Renders as strong emphasized text

<em>
Renders as emphasized text

<dfn>
Defines a definition term

<code>
Defines computer code text

<samp>
Defines sample computer code

<kbd>
Defines keyboard text

<var>
Defines a variable

<cite>
Defines a citation

<q>
Defines a short quotation

<blockquote>
Defines a long quotation

<hr>
creates a horizontal line

<del>
Defines text that has been deleted in a document.

<tt>
Renders as teletype or mono spaced text

<i>
Renders as italic text

<b>
Renders as bold text

<big>
Renders as bigger text

<small>
Renders as smaller text

I believe these tags should be enough for a start. So go ahead and play with these tags a bit. Make sure you also use the official W3.org HTML validator which helps you to find errors and ensures that your page stays valid.

I assume you now got used to those tags, so let me add one more tag, which is actually a very important one: the <a>-Tag (no, not the A-Team ).
The “a” stands for anchor and is used to create links within your page and to other pages. Maybe you would like to refer to my tutorials on your website, so here is how you can do it easily:
1. visit the tutorial page you would like to link to. Check the browser address field. Copy the URL in there (or write it down).
2. go to your page code and add something like

<a href="http://www.ruelicke.net/2007/04/html-tutorial-101-basics"> Visit this great tutorial I'm currently using </a>

As you see, the opening <a>-Tag is in front of a link text and has a “href” attribute. If you fill in a full URL, including “http://” it will link to an external page (although it could be your own website, just another page), if you only fill in something like “test.html” it will open said html-page within your website. So if your website is at “domain.com” it will open the file at “domain.com/test.html”

The <a>-Tag also allows you to link within your page, so if you have a link at the top of the page it could link to the bottom of the page, which will make the browser jump to the bottom of the page when used. To enable this, you just need to add an “id”-attribute to one of the tags at the bottom of the page, e.g.

<h4 id="links">Links</h4>

and give it an unique id. Meaning: you can’t use “links” as id again, at least not on the same page.

Now you need the internal link at the top of the page:

<a href="test.html#links">My Links</a>

You noticed the “#links” after “test.html”?
Correction:
I didn’t use these internal links, also known as hyperlinks, for a while so I made a mistake here.

If you have you want to link to the bottom of the same page, use <a href="#links">My Links</a> if it is on another page and you want to link to the bottom of that page use: <a href="page.html#links">My Links</a>

The “#links” after “test.html” inside the href=”" That tells the browser to jump to the tag with the id “links” in the test page.

Update: Here you can see an example page.

Ok, I think we learned enough for today. In the next Tutorial I will talk about some more advanced manipulation of how the page is displayed. (Yes, here will come the basic introduction to CSS)

Important Update:
After the W3C updated their HTML validator, your website would not validate if you followed my tutorial so far.
The validator now requires you to add one tag and one or two attributes to make the page validate. So let me tell you what you have to do…

1. you need to put the following attributes into the opening <html> tag: xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”
so it looks like <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
The xml:lang and the lang attribute represent the ISO language code, as example, the ISO for German is DE, for English EN and for French FR. For a complete list of the language codes, visit this W3C page

2. you need to specify an encoding type. There are many different types, but in my tutorials I’m using the UTF-8 encoding. Add the following code after the closing </title> tag, inside the head tags:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

Now your website should validate properly

What is HTML?
HTML stands for HyperText Markup Language and it is the code which is used to create the websites you see.

Since HTML4.01 is less used these days, I will only talk about XHTML1.0 from now on. For a HTML4.01 Tutorial I can only advise you to visit the W3Schools website

So…then what is XHTML?
Basically it is like HTML4.01 although the “X” stands for “EXtensible”.
XHTML is the latest HTML standard and consists of HTML4.01 which was reformulated in XML.

Hey, I know HTML4.01 and I love it! Why should I use XHTML?
My personal opinion:
XHTML is the future of webcoding and it is easier to write valid HTML code. I’m sure you know the famous info texts on older webpages, stating “Optimized for IE” or any other browser. You have less problems to write valid code as all current browsers treat XHTML the same way.
No more “browser-optimizing”!
Even better, XHTML is backwards compatible, meaning the page is displayed the same in IE7 and IE5 or older.

So switch to XHTML, it is really easy

Well, what are the basics you should know about XHTML. Let me explain it two ways:

1. HTML4.01 experienced coder
good (valid) code would look like this:

<h3>Heading</h3>
some text
<br />
some more <b>text</b>

wrong (invalid) code could look like this:

<H3>Heading
some text
<br>
some more <B>text</B>

So what is the difference? You can say that all tags have to be closed; the “h3″ needs its closing “/h3″ and tags without a closing tag, like “br” or “img” are now auto-closing, so the old <br> turns into <br />.
Also all the code is written in non-capitals. There is no “H3″ or so, only “h3″.

That’s basically everything which is changing. Have a look at the W3schools XHTML1.0 Reference for more details.

2. readers without experience with HTML
These tutorials are the right thing for you…I hope…so let’s get started!

A website consists of a four basic tags which cannot be left out or the page would not validate.
These tags are:
- <html>
- <head>
- <title>
- <body>

Now let’s build our first website!

<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Create a HTML file and copy the code into it, save it and open it in your browser (e.g. Firefox)
If you don’t have a HTML editor, create a new txt-file and open it with Notepad. Copy the code, save the file, then rename it to foo.html (or a name you prefere).
Congratulation, you just wrote your first website!

So, let’s explain each tag

The <html> let the browser know that you are opening a HTML file, so it interprets the code and displays your content.
The <head> is the place where you will later add meta, link and style tags/content. I will get into more detail in another tutorial.
In the <head> you also have the <title> tag. This tag allows you to give your page a title which is displayed at the upper left of your browser. Feel free to edit the “Hello World” title to something else

Last but not least we have the <body> tag. Inside the the body-tags you will write whatever you want to have on your website.
If you are wondering what the <br /> means, it just creates a line break, so the “Hello World!” and the “This is my first website.” are on different lines. The more “br”s you add, the more space you will get between the lines.

Now feel free to play with the HTML code you just learned…

WAIT, I almost forgot one important thing!
Please make sure your code is properly nested. The html-tag is the first tag and its closing tag the last tag in the code (see the example above). After the opening html-tag follows the head-tag, with the title-tag inside. After the closing head-tag follows the body tag. Inside of it you have all your website content. Please also check the <br /> if it really looks like this <br />.
I will tell you the reason for this with the next tutorial, where I will talk about other common html-tags and their usage/function.
I will talk about the reason in a later tutorial.

Update: Example of the final result

Continue to: HTML Tutorial 102: Tags and Validation