HTML vs XHTML : Excuse me! Webie question?

[Aster Saini]

HI,

What is the XHTML Code for the following decaprecated HTML codes.

<center> Deprecated. Defines centered text
<font> Deprecated. Defines text font, size, and color
<u> Deprecated. Defines underlined text

I want the XHTML code to use font, underline, and center alignment.

Thank you if you help.

[jscheuer1]

First of all XHTML isn't all it's cracked up to be, and HTML 4.01 strict has very much the same restrictions as XHTML, only slightly different (in HTML there are none of those annoying self closing tags and, though not a good idea, upper and lower case letters may be mixed more freely in your code, there are a few other differences). Most XHTML on the web today is being served as HTML, and then (as such) needs to be error corrected by the browser.

For more on this see:

http://www.webdevout.net/articles/beware-of-xhtml

Anyways, to answer your questions, and BTW, all of that stuff is deprecated in HTML 4.01 strict as well, though some may be allowed, not a good idea if you want your code to stand the test of time. These changes are in large part to foster consistency across browsers and to separate content (markup) from presentation (style). Now if you wanted a center tag, it would have been like so:

<center>
some content, can include many other elements and be very long or very short
</center>

This is still valid under some DTD's. But it was never really clear what it meant. Generally it meant everything in there was centered - text, other block level and inline elements. However this didn't always work out as intended, especially where absolutely positioned elements were concerned. In any case it was a little like using a sledgehammer to drive a nail. And different browsers still do it differently.

If you want to center a block level element, what you can do is give it a style width and a margin of 0 auto in your css:

.myCenteredDivs {
width: 21em;
margin: 0 auto;
}

If you want text and inline elements within a block level element to be centered:

.myCenteredTextDivs {
text-align: center;
}

The two may be combined. Using text-align center for a container that has other block level elements in it can still get you in trouble at times.

A replacement for the font tag, would be a span tag with its font properties defined in style. But you need not use a ton of span tags like you often did with the font tag because you may also give font style properties to any element that may contain text nodes. There are actually many more style properties (most have different names) that relate to font than there were options for the font tag. The only thing missing is color, and that can be replaced by the style color property. See also:

http://www.eskimo.com/~bloo/indexdot.../font/font.htm

for more on what you can do with fonts in css style. There are also other things that can be done with text in css style like letter-spacing:

http://www.eskimo.com/~bloo/indexdot...etterspace.htm

Which has at its top links to other text related styles you may use.

The u tag may be replaced by using the text-decoration: underline style:

.myU {
text-decoration: underline;
}

[djr33]

Basically these are "content" tags rather than "type" tags.

The simplest example is <b> vs <strong>

<b> is "bold" meaning that it is describing EXACTLY how it looks, and, according to many (and the way the web is going), that is wrong. You should not say how it should look, but instead use tags that correctly "mark up" your content to describe WHAT it is-- not how it looks, where it goes, etc.
<strong> is for "important" text and in almost all cases ends up bold (that's the default). But it is more reliable for using in all cases, like for some very basic text only browsers, they could put "strong" text as STRONG instead of strong or something like that. It also might help for screen readers (for those who cannot see), etc.


Sometimes it seems silly not to use these easier tags... if you are absolutely certain that you want bold text and nothing else, then why not use <b>?
The simple answer is that you should be consistent and also keep up with the way the web is going so your content will be visible to the most people.


As for the specific tags, John summarized it well. In a shorter form, though:
<u> is roughly the same as "text-decoration: underline;" in CSS.
<font> is not helpful: you can use another tag like <span> which is clearer: it is a span of text, not a "font" of text. Use <span> to select some text, and use CSS properties to style that text.
<center> seems nice (and it sorta is), but it is, as John said, very messy. It "centers" everything and it's very unclear about what that means. In general you can probably use <div align="center"> or even better <div style="text-align:center;"> and you will have approximately the same result (in most cases).

*This is a quick summary, so there may be better ways to do it in some cases. If in doubt, read what John said. That's the whole answer.


To think of this another way, using something like "font" instead of "span" is like buying a new pet, let's say a gray dog, and saying "I just bought a new gray" instead of "I just bought a new dog". You should call it by its type, not it's properties, and, in short, old HTML was just messy.

Of course I do wish there were efficient ways to do all of this, but I suppose writing a little more code won't hurt.