• Link us
  • Links
  • TOS
  • Site
  • Gallery
  • Forum
Subscribe

HTML and XHTML - HTML & XHTML tutorial

Tutorials > HTML & XHTML tutorials > HTML and XHTML
  • Added: Aug 11th, 2005
  • Level: Easy/Medium
  • Author: Melfina
  • Reads: 27,047
  • Description: The main differences between them and how to convert your HTML pages to XHTML.
Bookmark Digg del.icio.us

E-mail to a friend

View printable version


Cross-browser compatibility is the first thing one would think about when we decide to change our imperfect HTML pages to XTHML, but it's not exactly like that. When the HTML use began, each browser built its own way (similar, yet different) of displaying our page coding instead of agreeing about what could be used and how. It's the time to stop that, we want and we will code our pages according to the Wide Web Consortium standards.
By doing this, it doesn't mean our validated XHTML pages will look the same in all browsers, don't be mistaken: they won't.
Of course, when using XHTML, you can save your pages as .html, .htm and even .php, we're just changing our coding. We will be able to correct any errors by using a validator.
I'll try to explain the things you have to bear in mind when making your first XHTML page or to convert your HTML coding to XHTML.

Lowercases
All markup and properties must be in lowercases only. They will not validate if they're written like <Head> or <HEAD>, only if it's <head>.

Closed Markups
In XHTML all markups must be closed. Remember the HTML basics tutorial? we made a difference between open (<br>) and closed (<p>Text</p>) tags, well, there are no open tags in XHTML, for example:
<img src="image.jpg" alt="My Image"> must be:
<img src="image.jpg" alt="My Image" />
Notice the space and / at the end of the image code. Of course, the closed tags will be the same.
Do not ever omit closing tags either: <p>Text is completely wrong, you should put <p>Text</p>.

Tags order
You should use the opening and closing tags in the right order when you put one inside another. In HTML too, but remember XHTML is much more strict, so be careful when you place them.
WRONG: <b><i>Text</b></i>
RIGHT: <b><i>Text</i></b>
The italic tag is inside the bold tag. You could put it the other way round (<bi><b>Text</b></i>), in this case it doesn't matter (note: it does matter with other tags) but never mixed!

Values
All the properties' values must be between quotes ("). That should also be done in HTML, but some people omit them. Don't do it!
WRONG: <img src=image.jpg alt=My Image />
RIGHT: <img src="image.jpg" alt="My Image" />

Images
when using images you will have to specify the alt tag. It doesn't matter if it's empty, but it must be there.
WRONG: <img src="image.jpg" />
RIGHT: <img src="image.jpg" alt="" />

Doctype
We need to put the right XHTML doctype at the very beginning of the document. It has the following structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Ver Type//EN" "Path to Type DTD">
We've got to choose the right XTML version and Type of Validation depending on the code we're using. There are the following types:
- Strict: As the name says, the most strict version. It doesn't allow, for example, table and font tags and all the page's formatting must be done with CSS or XSL. The xhtml doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
- Transitional: A more relaxed version, the one you should use if you're using tables in your coding. Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
- Frameset: Allows the use of Frames and Iframes. Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">
The XHTML version may be changed to the last one. There's plenty of information here.
We should also add a value to our html tag (named namespace) that informs the browser that we're using XHTML in our document, like this:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
The namespace's url may be changed to the one that better fits our coding from the available ones. Notice the lang part: it says which language we'll be using in that page, so if you'll be using other language than english, that must be changed.

If you have everything explained here clear and made your first XHTML page (or maybe not the first one) you may want to validate your code here and find out any errors your code may have.


If you like this tutorial why not digg it or add to del.icio.us?

Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.

  • Members login
  • Register for free

Web layouts

  • Web layouts
  • Aardvark Topsites skins
  • SMF Themes
  • Wordpress Themes

Graphic resources

  • 100x100 Avatars
  • PS and PSP brushes
  • Brush shop
  • Background patterns
  • Web icons and smilies
  • Textures
  • Renders (PNG)

Tutorials

  • Newest tutorials
  • Adobe Photoshop
  • CSS
  • Designs / Layouts
  • HTML & XHTML
  • Miscellaneous
  • Paint Shop Pro
  • PHP & MySQL

Affiliates

  • Ego Box
  • The Jaded Network

Partners

Celestial Star © Melfina 2003-2010. By using this site you agree to our terms of service
Layout credits: Hybrid Genesis, Bittbox, swe3ty
Valid XHTML | Valid CSS | Top of the page