HTML Tutorial 102: Tags and Validation

HTML - HyperText Markup LanguageSo, you got the idea how the basic HTML page is build? If not, read the HTML Tutorial 101: Basics before you continue 🙂

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 🙂

Schreibe einen Kommentar