html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Intermediate

Lesson 1 - What is XHTML?

In the HTML4 Basic Tutorials we used notepad to edit and save our files. I'll just reiterate the basic tools and setup for people that are jumping straight into the intermediate tutorials. The HTML4 Basic Tutorials introduced a number of HTML tags and in these lessons we will expand on that foundation.

In this lesson we introduce XHTML to the party and discuss the differences between HTML and XHTML. We include comments in our documents for the first time using the <!--...--> tag. We also let the browser know which version of HTML/XHTML we are using with the <!DOCTYPE> tag.

The comment Tag

The <!--...--> tag allows us to comment our code.

The doctype Tag

The <!DOCTYPE> tag lets the browser know which version of HTML/XHTML we are using.

The Basic Tools

All we need to get going is a basic text editor such as Notepad for windows. So for instance using Windows XP:

click Start>>All Programs>>Accessories>>Notepad

notepad

Creating A Folder For Our Intermediate Files

Let's create a folder for our HTML4 Intermediate lessons

double click My Computer icon

double click C:\ drive (or whatever your local drive is)

right click the mouse in the window

from the drop down menu Select New

click the Folder option and call the folder _HTMLIntermediate and press enter.

Saving Our First File

Ok, with Notepad or a simlilar text editor open, copy and paste the following HTML code in :-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML follows -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Intermediate HTML Lesson 1 - What Is XHTML?
</title>
</head>
<body>
<h1>Our First XHTML File</h1>
<h2>Introducing the DOCTYPE tag</h2>
<p>In this lesson we start using Strict XHTML</p>
</body>
</html>

Click file from the toolbar and then click the save option.

In the Save in: tab at the top make sure you are pointing to the _HTMLIntermediate folder we created above.

In the File name: text area type lesson_1_webpage.html and then click the Save button and close the Notepad.

notepad

The .html file extension lets the system know that this is a hypertext document, you must save the file with this extension to view the document in your default web browser. If you do not save the file with the .html file extension Notepad and other text editors save the file with the .txt file extension. This will stop you viewing the file in a web browser.

Viewing Our Saved File

From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

Reviewing The Code

As you probably noticed we introduced a couple of new tags. Lets get the <!--...--> outta the way first. This tag allows us to document our code with useful comments and is ignored by browsers. Just replace the ellipses with the comments you want to enter. The tag can be used multiples times in a HTML document.

The <!DOCTYPE> was the other tag added to the code and flies in the face of convention. The tag must be entered in uppercase and has no closing tag. So what's it all about Alfie? Well, although the <!DOCTYPE> isn't technically a HTML tag you should put one at the start of every HTML page you write. This tag goes before the opening <html> as the very first thing you put into every file.

The <!DOCTYPE> tells the web browser which version of HTML/XHTML you're using and also points to a Document Type Defintion (DTD) file. The DTD is an XML document that holds valid values for all tags, their attributes and values, for a particular type of HTML/XHTML.

If you don't use the <!DOCTYPE> tag or misspell it, most browsers may enter 'quirks mode' and try to interpret your code as it sees fit. This can lead to your pages not being displayed correctly and other, well quirkier issues that may have you running to change code when its all down to a missing <!DOCTYPE>.

The bottom line is: use the <!DOCTYPE> to let the browser know which version of HTML/XHTML you're using and which rules to apply. Following is a list of DTDs for HTML/XHTML as proposed by the World Wide Web Consortium, more commonly known as W3C.

HTML Doctypes Available From the W3C Recommendations

HTML 4.01 Frameset

Contains all HTML elements.
Framesets are allowed by this DTD.


<!DOCTYPE html PUBLIC "-//W3C//DTD 4.01 Frameset//EN"  
         "http://www.w3.org/TR/html4/frameset.dtd"> 

Use this if for some strange reason you want to use frames and you turn into a werewolf on a full moon.
Not Recommended.

HTML 4.01 Transitional

Contains all HTML elements INCLUDING deprecated and presentational elements.
Framesets are not allowed by this DTD.


<!DOCTYPE html PUBLIC "-//W3C//DTD 4.01 Transitional//EN"  
         "http://www.w3.org/TR/html4/loose.dtd"> 

Generally used for legacy code where deprecated elements are still used.

HTML 4.01 Strict

Contains all HTML elements EXCLUDING deprecated and presentational elements.
Framesets are not allowed by this DTD.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
         "http://www.w3.org/TR/html4/strict.dtd"> 

If you wanna use HTML instead of XHTML, then this is the baby for you.
Recommended.

XHTML Doctypes Available From the W3C Recommendations

XHTML 1.0 Frameset

Contains all HTML elements.
Framesets are allowed by this DTD.


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

Use this if for some strange reason you want to use frames and you still believe in the tooth fairy.
Not Recommended.

XHTML 1.0 Transitional

Contains all HTML elements INCLUDING deprecated and presentational elements.
Framesets are not allowed by this DTD.


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

Generally used for legacy code where deprecated elements are still used.

XHTML 1.0 Strict

Contains all HTML elements EXCLUDING deprecated and presentational elements.
Framesets are not allowed by this DTD.


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

For XHTML this is supported in all browsers.
Recommended and the <!DOCTYPE> we will use from now on in these lessons.

XHTML 1.1

Contains all HTML elements EXCLUDING deprecated and presentational elements.
Framesets are not allowed by this DTD.
Allows the use of modules.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

The newest version of XHTML, but not supported in all browsers.
Recommended but to get it to work in all browsers is beyond the scope of these tutorials.

What's the Difference Between HTML and XHTML?

Wow! That's a lot of <!DOCTYPE> definitions. So now's a good time to separate the wheat from the chaff and explain the differences of HTML and XHTML. Following is a list of rules for XHTML that you can get away with in HTML:

  • XHTML doesn't allow the omission of certain tags such as the <!DOCTYPE> document root element.
  • All XHTML elements must be within the <html> document root element.
  • XHTML elements must be written in lowercase. Remember <!DOCTYPE> isn't a HTML element.
  • XHTML elements must be properly nested.
  • XHTML elements must be closed.
  • XHTML attribute values must always be enclosed in quotes.
  • XHTML attribute minimization is not allowed.

So Why Use XHTML

Following are a list of reasons why to use XHTML:

  • XHTML parsed documents are compliant with the Xtensible Markup Language (XML), this is a good thing.
  • Having a valid parsed XML document paves the way for a plethora of document creation primitives for handling non traditional content such as:
    • Scientific formulae.
    • Musical notation.
  • Adaptability with all browser types and devices such as mobile phones.
  • XHTML doesn't allow the omission of certain tags for compliance, a good habit to get into.
  • XHTML demands that you close your tags, another good habit.
  • XHTML demands that you nest your tags correctly, yet another good habit.

Lesson 1 Complete

Validate the HTML from the lessons and your own HTML using the W3C Validator available at the link. Just cut and paste your code in and use the appropriate <!DOCTYPE>.

Well that's the heavy stuff out of the way. From the next tutorial onwards we will be using the XHTML 1.0 Strict <!DOCTYPE> for all our lessons.

Related Tutorials

HTML4 Basic Tutorials - Lesson 1 - Starting Out

HTML4 Advanced Tutorials - Lesson 1 - Importing CSS and JavaScript

What's Next?

In the next lesson we bring more structure to our web pages using the <div> and <span> tags.



HTML4 Intermediate  << Prev          Next >>  More HTML Structure

HTML4 Reference

The <!--...--> comment tag

The <!DOCTYPE> document type tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>