XHTML: Separating Design From Content Get rid of those bad habits...

Knowing what XHTML is set out to do

 

You may think that coding your site to meet XHTML standards requirements makes you look as if you are keeping up with your web page but unless you know what XHTML job is, then you can look like a fool.

 

For years, web browsers were designed to open one page and show it in a human understandable fashion. But, although not as well known, another mark up language has been floating around called XML. XML was made to separate what content there was, from how the content is meant to look.

 

When you go to a site, you are looking for the content of the webpage, not to look at how it is laid out. But if the content is laid out neatly and professionally, the content is easier to read, isn't it? So using XML to hold the content and the XSL (stylesheet) to display the content literally separated HTML into two parts. Now the exact same content can be seen on PDA's, WAP enabled phones, satellite on TV's even old computers with different resolutions and software. It was, and is even more so, a great benefit.

 

But if you ask billions of website owners to learn a new language and transform all their work to this new language, there is just no chance in hell. So they created an inbetween state XHTML which is meant to obey standards that relate to what XML is set out to be but also work on all browsers as normal HTML does.

 

 

I Know How To Use It!

 

Do you? If a user has visual difficulties does your website cater for this by allowing color changes and can the screen readers read out your site correctly? Can users with physical difficulties navigate your website without using a mouse? These may seem to be insignificant details but if you are going to obey XHTML, then obey it to its fullness. More users will be able to see your site without difficulties.

 

So I am assuming you know what you need to do to validate XHTML such as lower case tags, doc type declaration, close all tags etc etc. So here are a few tags I never want to see again;

 

Donts!

<center> - Never use this tag. Use CSS to center the text in the parent tag. So, for example, if you have a table cell you want to have the text centered in, then your XHTML will be;

<td>Centered</td>

And your CSS;

td {   text-align: center;}

<font> - Once again CSS does this job far more efficiantly, like the <center> tag, it is a waste of space. If you want the text in your cell to be Georgia, and it's size to be 12px, then you just easily update the CSS;

td {   text-align: center;   font-family: georgia;   font-size: 12px;}

<iframe> - These don't work in alot of browsers and certainly dont work on many other devices. The main reason for this is people want the same banner and links on every page and this seems the easiest way to do this. If you've seen a frames site and you click on a link, it opens in the frame but the URL never changes, when in reality it should. But using CSS and a little PHP, iFrames may never, thankfully, be used again!

 

Just put all the header information, banners and links in a PHP file called header.php. Then wherever you want that information displayed, use the PHP include function;

 

<? php include('header.php'); ?>

I'm pretty sure this is covered in depth in other tutorials so that's just a brief summary of better alternatives to iFrames.

 

< color="#cc00ff"> - CSS does this and you know it does - same for bgcolor, border, width and other attributes. Putting them in with the "content" doesn't make sense.

What tags to use?

 

So in case you are confused to what tags to use, ask yourself this - Does this tag tell the browser information about the content or does it explain how to display the content?

 

The <form> tag explains that a the following information is to be displayed in a form, so that is fine. The attributes for the form (method, action) also tell the browser how to handle the form, so they are perfectly acceptable (and there is no other choice around it anyway )

 

So yes, that means that tags like <b>, <u> and <i> are not welcome anymore and in a few years should be gone forever.

 

Now to bold your text, you can use the preset tag <strong>, that makes the content strong and so it stands out.

 

Most italicised text is styled like that because it they are emphasizing a point (Yeh that was pretty contrived...) so the tag <em> will emphasize the text inside and the default styling for the <em> tag is italics.

 

And finally <u>. I think there is a tag to replace this but underlining text is generally only used for titles, links, abbreviations etc and so it is somewhat confusing to have randomly underlined text in a paragraph, as the user will try to hover over it and click.

 

Of course, you still use CSS to style things when necessary. So if we wanted out text in the cell to be bolded, underlined and italicised, then we wouldn't do this;

 

<td><u><b><i>Centered</i></b></u><td>

Not only is that ugly and inefficient to write but it defeats the purpose. Are we emphasizing the cell? No, so we keep the same XHTML, and then we define how it looks in CSS.

 

<td>Centered</td>

Nicer code, eh?

 

And I dont think I need to tell you not to use <blink> or <marquee>. Whoever jokingly put these tags in should be shot.

 

What Tags Should I Use

There is such a wide range out there, I can't name them all but here are a few -

<p> - Still acceptable - use whenever you have a paragraph of information

<quote> - A great tag when you are inputting source content that is not your own

<ins>/<del> - Great tags for editorial pieces where you change articles from the past.

See how these tags describe what the content is? That is what you should be aiming to achieve.

 

How do I layout my page?

 

First off, don't use tables for layout. Use divs (dividers) for layouts, far more efficient and flexible! Use tables for data such as member details.

 

Secondly put your navigation links into an unordered list <ul>. That is effectively what navigation is, a list of links. So the XHTML might look like this;

 

<ul id='navigation'>  <li><a href='home.php'>Home</a></li>  <li><a href='away.php'>Away</a></li>  <li><a href='contact.php'>Contact</a></li></ul>

Screen readers read these out properly.

 

And as a last note structure your content wisely. Use heading tags (<h1>,<h2>...) effectively to split your content up. If you are using images ask yourself are they images assosciated with your content (in which case you just use the <img> tag) or are they images to increase the design aesthetics (this time you must use the background-image property of CSS).

 

Following these rules might seem difficult at first but after a while, they become second nature and you don't even have to think about what you are doing. Your site will load faster and be far more accessible if you dont just stop at the XHTML validation rules, but go that one step further to what XHTML stands for!

 

Just one more thing - HTML Tag Reference. Spend a while reading up on every single tag and what they are used for. In fact read that whole site when you get the chance. That is how XHTML should be. It will save you time and hassle in the future.

 

So I hope you enjoyed this tutorial to some extent and I have inspired you, even in the slightest, to follow a few more rules when creating your next website. Take it a step at a time. Try replacing every <b> tag with <strong> until you get into that habit.

 

Happy Web Designing

 

Kage

Wow, great tutorial man. That was very well written and easy to understand...thanks :DI'm sure this will help a lot of people.Cheers! :Dignition

Just a quick question here: Are there any browsers that are not compatible with CSS and XHTML? Or is this generally the standard now? I'm asking about old browsers too. I used to not use CSS because I thought it wasn't supported in some browsers, but I'm not sure whether that's really true or not, so I'm asking...

The thing about it is just habits. I still use the <b> and <i> tags out of habit. It was the only option when I was learning HTML and like everything you learn, you remember the first things the most.

 

So I wouldn't go and try to revamp my pages right now and try and obey every XHTML rule there is, but rather start changing habits slowly. The <center> tag is a prime example. It is still acceptable to put it in paragraphs but is slowly being phased out. So from now on when you are creating a website, try not to use, think to yourself, how would I achieve this using CSS...then try gradually using <strong> and <em>. And so on and so forth.

 

Just keep the rule in mind - Does this tag relate to the content, in which case use it in the XHTML, or am I trying to change how the content is displayed, in which case you should use CSS.

 

I'll do another tutorial later about getting the most out of CSS, in which I will cover the styling aspect alot more.

 

So until then just check out the website above, and its also in my sig. It's a great website that, although I wouldn't recommend it for beginners in HTML, i'd recommend it to intermediates and experts. Alot of the relatively unknown tags are very useful indeed.

 

Kage

 

Just a quick question here: Are there any browsers that are not compatible with CSS and XHTML? Or is this generally the standard now? I'm asking about old browsers too. I used to not use CSS because I thought it wasn't supported in some browsers, but I'm not sure whether that's really true or not, so I'm asking...

<{POST_SNAPBACK}>

Sorry, about the double post, I wrote the above post five hours ago but had to go out, I thought I'd sent it but when i got back I hadn't.

 

Anyway, yes all browsers support CSS (although sometimes the look of CSS can vary across browsers...yes I.E. I'm looking at you ) and since XHTML is just a slightly expanded form of HTML, all modern browsers made in the past five years will support all the extra tags.

 

You shouldn't need to worry about it anymore at all. Just build your page and either download Safari, Opera, FireFox, I.E. and view your site in those to make sure everything is displayed properly or post a screenshot of how it should look and ask those browser's users to compare.

 

Thank you! I will definitely look into redoing my site to be more XHTML... anything to make it more accessible...My current one is made so that even if you switch off CSS, it looks roughly the same, but that also means that a lot of tags are unnecessary...Hm. Any comments about the kinds of webpages created by a blogging software like Wordpress? I've been thinking about streamlinging my website with Wordpress... Are the pages XHTML compatible?

I'm not sure because I haven't used nor seen in action, WordPress. If it is customisable then it probably can be edited to make it XHTML Valid which shouldn't be too hard depending on how it is built.Just make sure certain tags are closed, replace <b>'s with <strongs> and all the rest, if it's not done so already.