Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Must Have xhtml Tags

Setting Up a Bare Bones Template File

A re-usable template file can be utilized as the base for all your web files. It can be saved as a new file name whenever you want to start a brand new web page.

This tutorial will explain how to set up a template file, which will include the tags that every web page must have to work properly in a Web browser.

New File

If you did not create and save your "template.html" file yet, please start with a new document in your text editor. Delete any coding your editor included in the new document. Save the file as "template.html". For information on saving your file, please view the tutorial on Saving an XHTML File.

If you created the "template.html" file already, please open it in your text editor.

Windows Notepad Users: To open a previously saved file in Notepad, you must first launch Notepad, then choose File>Open. Select "All Files" from the list of Files of Type. Browse to your saved file. Optionally, you may right-click on the file in Windows Explorer, and choose Open With Notepad.

DOCTYPE Declaration

The first element that any web page should have is the DOCTYPE declaration. This informs the browser which "flavor" of (X)HTML you are using. This element is also extremely important when validating your page properly. Validating will be discussed in a later tutorial.

There are three flavors (versions) of XHTML: Strict, Transitional, and Frameset. When first learning or "transitioning" into XHTML, it is best to utilize the Transitional DOCTYPE.

A Transitional DOCTYPE means that you are aiming to build strong XHTML pages, but are still using just a few little pieces of older (deprecated) code until more advanced coding can be learned.

The Transitional DOCTYPE looks like this:

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

There is no sense typing all that confusing mumbo jumbo, so please highlight, copy and paste the above code into the top line of your template file. Be sure to keep the code exactly as written, and do not change any of the text.

Your cursor in your text editor should be blinking at the end of the pasted DOCTYPE coding. Click enter to move to the next line.

Strictly Speaking

Once you gain more knowledge of XHTML and CSS, you may opt to use the Strict DOCTYPE. Throughout the tutorials, I will note the tags and attributes that cannot be used with a Strict DOCTYPE.

Below, is the coding for Strict DOCTYPE.

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

Again, I do not recommend using a Strict DOCTYPE when first learning XHTML and CSS.

The Html Tag

Next we need to tell the browser that this is an HTML page. So type the opening <html> tag and pair it with a closing </html> tag. Give yourself some space in between the opening and closing tags because all the other tags on our page will be nested in these two tags. Nested? That is a new word. Nested means surrounded by or enclosed inside. Tags can reside on their own, or be nested inside other tags.

One special rule to remember about (X)HTML is that the FIRST tag opened, must be the LAST tag closed. More on that later.

Here is the coding for your template file so far:

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

</html>

The Namespace Declaration

We need to add a little bit of coding to that opening <html> tag to make it valid for XHTML standards. But since it is a bit confusing to type, you might want to copy and paste the text below into Notepad:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

This confusing gibberish tells browsers and validation services that the web page is written in English (en) and that the version of xml is also in English.

It also states that the xml namespace (ns) for this page is located at the listed online address. The address is a page listed at The World Wide Web Consortium (W3C) which is the Web site that develops the HTML and XHTML standards. Sort of like the Big Boss of Web coding languages. Decisions about what code is "downgraded" (deprecated) and what code is "the standard" come from this Consortium.

To learn more about the W3C, please check out http://www.w3.org/. Don’t feel bad if you don’t understand a lot of the technical information there, it is a bit overwhelming to read.

Here is how our template file is shaping up. Notice the new <html> tag including the namespace has replaced the original <html> tag.

<!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" xml:lang="en" lang="en">

</html>

The Head and Title Tags

Type the the <head> and </head> tags right after the opening <html> tag.

Nest the <title> and </title> in between the <head> and </head> tags. See below:

<!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" xml:lang="en" lang="en">
<head>
<title></title>
</head>
</html>

Some facts about the <title> tag:

  • The <title> tag is always nested in the <head> tag.
  • The <title> tag is where you type the text to briefly describe your web page.
  • This text will not be viewable as web page content, but it will be viewed at the top of the browser window.
  • The text you type in the <title> tag will also be used when someone saves your page to their favorites list or bookmark list.
  • It is also very important for search engine optimization, as most search engines (Google) describe your page by using the <title> text.
  • Only text is allowed in the title area. No tags or other formatting. Keep it simple!

Since this is a template to be used over and over again, type something simple like "Title of Page goes here" (do not type the quotes!) Make sure the typed text is located in between the <title> and </title> tags.

Save your file regularly.

<!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" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
</head>
</html>

Content Type and Encoding Declaration

The next element is a Content and Encoding declaration, in the form of a <meta /> tag.

Meta tags are always nested in between the <head> and </head> tags. You can add it before the opening <title> or after the closing </title>, but do not nest it inside the title area.

The bottom line: this tag tells the Web browser that the content is text and html (text/html) and that it is written using a particular character set (charset).

This is one of those confusing tags that cannot be mistyped, so please highlight, copy and paste the tag below:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Notice that there is no separate closing tag for the <meta /> tag. Remember? Some tags are paired using opening and closing tags, and some are "empty" and just require a [space] and / at the end of the tag. The <meta /> tag is empty.

A lot of web pages use a character set of iso-8859-1, and that is perfectly acceptable. If you are creating English language web sites, then either will do. I prefer to use the utf-8 charset, but the choice is yours.

If you desire to work with iso-8859-1, then copy and paste the meta tag listed below. Do not paste both meta tag examples, choose only one.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

If you are interested in learning more about the two different character sets:

Here is our code so far.

<!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" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
</html>

The Body Tag

The <body> opening tag needs to be paired with a closing </body> tag. The opening <body> tag is typed after the closing </head> tag. The closing </body> tag is typed before the closing </html> tag.

The <body> tag is very important. The content of your page is contained inside the body. Whatever you want viewed on your web page (other tags, text, images, etc) must be nested in between the <body> and </body>. Give yourself a few lines of space in between the two tags so there will be room for your page contents.

And this is what you should have on your template page so far.

<!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" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

</body>
</html>

Save! Your template is ready to use and reuse! Keep reading the next tutorial.

FAQ

I have seen certain pages using a shorter Doctype code. Can I save time and use this also?

Answer: It is best to use the long Doctype including the full web address. Using a shorter Doctype can result in the browser not rendering your page as efficiently.

What do you want to learn next? « Saving an XHTML FileFirst Page »

11 Comments

  1. Comment by Sharon Noble on August 24th, 2006

    I am real new to this and what I have learned has been self taught. I want to know more as I feel I am very limited at what I do. I know there are mistakes on my site and that bothers me but I did not use an editor at all and do not want to learn using one. I want to know the coding, why I use it and the whole ball of wax. You are right when you say it gives some pleasure to see your site on the internet . Thank you for this site as I am going to go thru it and learn more….

  2. Comment by debbie T on August 26th, 2006

    Well aren’t you sweet to comment Sharon! And it looks like you have a wonderful web site! And congrats for hand-coding all your html!

    I was also self-taught when I first started; when I first found the W3C Validation Service, I was amazed how much I really didn’t know and how many mistakes I was making.

    Don’t worry about your so-called mistakes. Just keep learning! That is what is most important!

  3. Comment by rachel on April 19th, 2007

    i think it’s very good information u r having i really enjoyed them

  4. Comment by rachel on April 19th, 2007

    thx for the information i hope to learn xhtml andjava script cos i like to learn them

  5. Comment by founder on January 2nd, 2008

    an excellent site,

    uniquely clear in its way,
    but the rule on blockquote and should make it clear which goes inside which

    also, the site would be greatly improved with a Search capability…
    difficult to find, eg, where “align” is
    discussed

  6. Comment by Anna on February 24th, 2008

    I am so pleased I found this site. I love absolutely adore the aesthetics. I also love the way you teach too. You explain matters in such a simplified way that what is complex for me, a complete novice, is so easy to understand.

    I look forward to visiting this site on a regular basis - and also showing it to my friends who have also expressed an interest in learning good web design principles and practice.

    Thank you Debbie, you’ve done a fine job.

    Anna :)

  7. Comment by debbie T on February 24th, 2008

    Thank you so much, Anna, I wish I had more time to write new tutorials!

    I hope you enjoy the site, and thank you again for taking the time to comment!

  8. Comment by Ravi on March 11th, 2008

    Hi, I am trying to use “” and this does not seem to work for Mozilla browsers..is there any known compatibility issue?

    Is there a way to know whether the current browser is IE or Mozilla in HTML/CGI?

    Please help!!

  9. Comment by Ravi on March 11th, 2008

    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”

    shucks! i am sorry!!

  10. Comment by debbie T on March 11th, 2008

    Ravi, are you copying and pasting the doctype exactly from my tutorial?

    I don’t know why it wouldn’t work with Mozilla. I use Firefox exclusively.

  11. Comment by CompanionWulf on July 23rd, 2008

    Now THIS is very useful. Thanks!

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.