neskaya
Follow [ bookmark livejournal facebook twitter rss stumbleupon ]
Log in to download layouts, skins, and emoticons. Register?

Designs

Web Templates
LJ Layouts
phpBB3 Skins

Graphics

Avatars
Textures
Buttons
Emoticons
Pixels
Fonts

Misc & Fun

Quizzes
Tutorials
Interactive

Community

Forums
Rotation

Site

FAQ & Contact
Links

Affiliates

Komet Tails
Smile Scan
Dragonrain

Tutorial: xHTML vs. HTML

xHTML and HTML simply use different ways of coding. The syntax between both of them are very similar - if you know one, you could catch onto the other easily. Currently, most sites are moving toward the direction of xHTML and leaving HTML behind. Why is this?

xHTML is more strict in validation requirements than HTML. The syntax rules are by far more consistent and can be less confusing than HTML. HTML, on the other hand, allows more room for messy coding and error. That's why it's easier to start your coding on xHTML early in your web design career! Also, xHTML is more equipped to deal with emerging technologies - xHTML is more optimized for browsing the internet from cell phones, for example.

Declaring an xHTML Document

So how do I convert my HTML to xHTML? First, there are three main types of xHTML markups that you can declare - strict and transitional. Strict xHTML is well, simply, more strict about the syntax requirements. Everything must be in a block element. Transitional xHTML allows depreciated tags - in transitional xHTML, tags like <center> are okay, while in strict xHTML, you must write <div style="text-align: center;"> instead.

If you're changing your documents from HTML to xHTML, I recommend starting with transitional. I really can't tell you much more about strict xHTML either, because I don't use it! The final type of xHTML declaration is for framesets - you can use this type on pages with frames. Put the following text at the beginning of your code in each page, depending on which system of xHTML that you're using.

To declare strict xHTML:

To declare transitional xHTML:

To declare frameset xHTML:

What are the syntax differences between xHTML and HTML?
There are a lot of minor differences between xHTML and HTML. I'll list some of them, but there's no way I will find everything! I'll link you to where you can check to make sure, instead.

First, all xHTML elements must be closed.

This means that you for every <something< tag you have, you have to have a </something> tag as well - or you have to close it within the same tag. You can close it with a " /" before the end tag. So, instead of using <br> or <img src="image.gif"< as in HTML, you have to use <br /> and <img src="image.gif" alt="" />. You can close paragraphs with </p> or simply use <p /> each time.

Note that each <img> must come with an alt="text or leave blank" inside it as well!

Next, xHTML elements have to be lowercase.

You can't get away with writing <BR> or <Br>!

Everything in xHTML has to be properly nested.

And you can't put some tags within certain other tags. <i><b>Text</i></b> would be improper, because it's in the wrong order. You would have to write: <i><b>Text</b></i> instead. You can't put paragraphs or <center> or anything like that in between the <tr> and <td> tags either in tables, for example.

And more.

There's other little quirks too, like for every <post> tag, there must be a action="" attribute inside. You can't use the ampersand in your text as a replacement for 'and.' The best way to make sure that your web page is xHTML valided is to use the W3 Validator. It'll point out any errors you have in your code and sometimes give you suggestions on how to fix them. Good luck!