10-22-2007, 03:08 AM
First of alll, I put this in the coding section for a reason, as it is not really an aspect of Web Design, but the code that goes into it. Yesit is the design of your page, but I am focusing on the coding part, even if it frontend.
I have compiled a tutorial on differences between HTML 4 and xHTML 1, differences between the Transitional and Strict doctype, as well as the importance of valid code. You should have a decent knowledge of HTML and CSS to fully appreciate this tutotial.
A doctype goes beforeyour <head> tag, and tells the browser/validator what type of code you are using (e.g. HTML/xHTML), the code version (e.g 4.01) and whether the markup is strict or transitional.
Here is an example doctype:
We can extract the information about the type of markup in a document just by looking at the Doctype. On the first line it says clearly: "XHTML 1.0 Strict" From this we retrieve the information in three part I mentioned above:
Markup Language: XHTML
Version: 1.0
Type: Strict
For a valid page, you must always use the correct doctype. For example, if you are using an xHTML doctype on a HTML page, the page will not be valid.
xHTML follows corect XML code, meaning it is stricter then HTML.
Here are some general rules with xHTML:
All elements must be closed wit a "/". The most common example is <br> from HTML becomes <br />, The same applies to <img>, and other self closing tags. You may also not leave any tags open, e.g
. As you can see, the end title tag as missing.
[b]Tags must be closed in the right order
For example:
is invalid xHTML, because <i> is closed after </b>. The correct xHTML would be:
If you are a secent HTML coder, you should be doing that anyway.
All xHTML tags must also be in lowercase
For HTML - use the most recent, which is HTML 4.01. It is also the most commonly used markup for webpages, though xHTML is catching up
.
xHTML is harder, there are currently to versions of xHTML - 1.0 and 1.1.
Unlike HTML, you shouldn't go with the most version, as 1.1 isn't accepted by Internet Explorer, though if you change the .xhtml extension to .html, it should work. At the moment though, I'd say go with xHTML 1.0.
These doctypes can be applied to both HTML 4.01 and xHTML 1.0. I don't use HTML 4.01 Strict, so I will focus on xHTML 1.0 for this art of the tutorial.
A transitional doctype is for people used to older versins of HTML. They allow more tags than the strict doctype.
A strict doctype forbids the use of certain tags such as <font> and <center>, so you have to use CSS to achieve the desired effect. Attributes such as bgcolor, align and marginheight/width don't work with the strict doctype, you must do it with CSS.
There are two major advantages (in my opinion) of using a strict doctype -
a) Better cross browser compatibility
b) Your site will be better indexed by search engines, and can help increase your site's traffic.
Valid code is very important, as it gives your site a more professional appeareance (In the eyes of someone like me who validates every site they go to), gives you something to brag about, and probably helps with SEO.
Valid code must not contain tags that are not in the official standard (like <marquee> or <blink> , and must correpond to the Doctype used.
Validating your page
This is easy enough.
1. If you are using the Opera Browser, just load your page onto it and press Ctrl + Alt + V.
2. If you are not using Opera, go to http://validator.w3.org, and either type in the URL of your site, or upload the HTML file.
Hope that helps, though it probably made you more confused
BP
I have compiled a tutorial on differences between HTML 4 and xHTML 1, differences between the Transitional and Strict doctype, as well as the importance of valid code. You should have a decent knowledge of HTML and CSS to fully appreciate this tutotial.
What is a doctype?
A doctype goes beforeyour <head> tag, and tells the browser/validator what type of code you are using (e.g. HTML/xHTML), the code version (e.g 4.01) and whether the markup is strict or transitional.
Here is an example doctype:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">We can extract the information about the type of markup in a document just by looking at the Doctype. On the first line it says clearly: "XHTML 1.0 Strict" From this we retrieve the information in three part I mentioned above:
Markup Language: XHTML
Version: 1.0
Type: Strict
For a valid page, you must always use the correct doctype. For example, if you are using an xHTML doctype on a HTML page, the page will not be valid.
What is the difference between HTML and xHTML
xHTML follows corect XML code, meaning it is stricter then HTML.
Here are some general rules with xHTML:
All elements must be closed wit a "/". The most common example is <br> from HTML becomes <br />, The same applies to <img>, and other self closing tags. You may also not leave any tags open, e.g
Code:
<head><title>Hello</head>[b]Tags must be closed in the right order
For example:
Code:
<b><i>Hello</b></i>Code:
<b><i>Hello</i></b>If you are a secent HTML coder, you should be doing that anyway.
All xHTML tags must also be in lowercase
What should I be using?
Basically, it all comes down to preference, HTML 4.01 and xHTML 1.0 are basically the same, so do whatever you feel comfortable with, though the oficial standards people W3C recommend you use xHTML.What HTML/xHTML versions should I be using?
For HTML - use the most recent, which is HTML 4.01. It is also the most commonly used markup for webpages, though xHTML is catching up
.xHTML is harder, there are currently to versions of xHTML - 1.0 and 1.1.
Unlike HTML, you shouldn't go with the most version, as 1.1 isn't accepted by Internet Explorer, though if you change the .xhtml extension to .html, it should work. At the moment though, I'd say go with xHTML 1.0.
Strict and Transitional Code Types, and the advantages of each
These doctypes can be applied to both HTML 4.01 and xHTML 1.0. I don't use HTML 4.01 Strict, so I will focus on xHTML 1.0 for this art of the tutorial.
A transitional doctype is for people used to older versins of HTML. They allow more tags than the strict doctype.
A strict doctype forbids the use of certain tags such as <font> and <center>, so you have to use CSS to achieve the desired effect. Attributes such as bgcolor, align and marginheight/width don't work with the strict doctype, you must do it with CSS.
There are two major advantages (in my opinion) of using a strict doctype -
a) Better cross browser compatibility
b) Your site will be better indexed by search engines, and can help increase your site's traffic.
Valid Code
Valid code is very important, as it gives your site a more professional appeareance (In the eyes of someone like me who validates every site they go to), gives you something to brag about, and probably helps with SEO.
Valid code must not contain tags that are not in the official standard (like <marquee> or <blink>
, and must correpond to the Doctype used.Validating your page
This is easy enough.
1. If you are using the Opera Browser, just load your page onto it and press Ctrl + Alt + V.
2. If you are not using Opera, go to http://validator.w3.org, and either type in the URL of your site, or upload the HTML file.
Hope that helps, though it probably made you more confused
BP