Rules of xHTML.

Printable View

19 Feb. 2010, 12:09am
Chris

Rules of xHTML.

Well I've been using this spiffed up HTML for quite a while now, and I thought I'd pass it on to you since it is becoming standard.

xHTML is nothing NEW, it is just a title that represents proper coding technique.

I will not be going over document heading/identification of page encryption because that tends to throw people off the guide and make it more of a learning experience rather then the mock up that it truly is.

xHTML only has a few main rules;

1. Always have lowercase tag letters.
br not BR, Br, or bR.

2. Make sure to end every tag even if it has no closing tag.
 not 
<img /> not <img>

3. Make sure to properly nestle tagging, do not mix up the ending order.
Hi not Hi

To go over why we do this is to break down a browser. Every browser reads the web page in a certain way, for example Mozilla's Firefox parses a set of packets as they come in that contain the HTML source code. As it parses the packets it stores all tags/text into an array and then uses that array to render a webpage. So say you have your HTML source set as;

HTML Code:

<html> <head> </head> <body> Oh-no! </body> </html>

Firefox will see the '' tag and set itself to wait for a '' closing tag, but in our source we do not have one. So Firefox will react by re-parsing every packet that came after the original declaration of the '' tag and if again there is no closing tag it will either handle an automatic close, or leave it open.

Problem is, the tag '' is not handled as an auto-close tag due to the fact that it only effects text it wraps around so Firefox will leave this tag open causing all the text after the '' to be italicized until a '' closing tag is declared.

Lets review what the main issue stated above is, if you do not close a tag the site will have an error and cause the tag to possible span over all objects declared after the tag and it will cause your site to load slower because the browser will attempt to re-parse data to see if it was a client sided mistake.

And for those of you thinking "This is just because Firefox is awesome and thinks all coders know they are coding properly!" no unfortunately it is not only Firefox that does this, a majority of stream-line browsers handle page loading with this method(IE, Google Chrome, Opera, Safari.)
19 Feb. 2010, 01:45am
NotNeccesary

Should declaring the doctype be included at all times?
19 Feb. 2010, 02:32am
Chad

Why do people always do <head> </head> if there isn't any content in the middle? You should just do <head />
19 Feb. 2010, 02:48am
Chris

Quote:

Originally Posted by NotNeccesary

Should declaring the doctype be included at all times?

As I stated I am not going to add this to xHTML because it is used for a more technique based level.

If you know doctypes that is perfect stick to it you will be doing great ones you hit Search Engine Optimization. But I was merely giving the cross over from HTML to xHTML standards in which doctype and encoding type are really not part of that section it is more or less xHTML1 Which would be the xHTML standard markup language compared to xHTML standards in HTML.

Kinda hard to understand but hopefully you do.

@Chad
'<head>' is what's called a required element.

Though it may not actually be "required," the browser will always pretend it is there and it will always pretend to close it, so in a since there is always a reason to put it there to the fullest extent. Plus I don't think I've had a time in which I never used the '<head>' tag.
19 Feb. 2010, 03:25am
NotNeccesary

Quote:

Originally Posted by Chris

As I stated I am not going to add this to xHTML because it is used for a more technique based level.

If you know doctypes that is perfect stick to it you will be doing great ones you hit Search Engine Optimization. But I was merely giving the cross over from HTML to xHTML standards in which doctype and encoding type are really not part of that section it is more or less xHTML1 Which would be the xHTML standard markup language compared to xHTML standards in HTML.

Kinda hard to understand but hopefully you do.

@Chad
'<head>' is what's called a required element.

Though it may not actually be "required," the browser will always pretend it is there and it will always pretend to close it, so in a since there is always a reason to put it there to the fullest extent. Plus I don't think I've had a time in which I never used the '<head>' tag.

Ah, I confuse myself with the doctype declarations most of the time, not really worrying about it at the moment though.
And I don't think it would work if you just put <head />
19 Feb. 2010, 11:26pm
GAMEchief

2. Escaped slashes are / not \. .
Also note that tags that don't have to have closing tags in HTML do have to have closing tags in XHTML (<li> and <option> come to mind).
So don't think that <li>text</li> and <option>text</option> should be <li /> and <option />. If it can contain text, it needs a closing tag. If it can't ( , <img />, etc.), then it gets the escape at the end of the opening tag.

3. Properly nestled is defined by the display of the object (for the information of the audience; not correcting you, Chris).
block and inline elements. Elements that are given new lines when created (div, form, p, etc.) are called block elements. Anything created before them will be on the line above, and anything created after will be on the line below (excluding CSS exceptions). On the other hand, you have inline elements, which continue on the same line (<a>, , , and for example).
Block elements CAN go inside other block elements.
Inline elements CAN go inside block elements.
Inline element CAN go inside other inline elements.
Block elements CANNOT go inside inline elements.

When mixing inline elements, think of them literally. For example, do you use <a>text</a> or <a>text</a>?
That all depends. Are you linking the emphasized text (<a>text</a>) or are you emphasizing the link (<a>text</a>)?

Also be sure to not mix the order. <a>text</a> is wrong. They need to close in the reverse order that they were opened.

Quote:

Originally Posted by Chad

Why do people always do <head> </head> if there isn't any content in the middle? You should just do <head />

I hope you're not being serious.

Deprecated tags: (tags you're not supposed to use anymore.
b - means "bolden"; use stylesheets to bold text (if it's only bold for style) or use to denote strongly emphasized text
i - means "italicize"; use stylesheets to italicize text (if it's only italic for style) or use to denote emphasized text
u - means "underline"; use stylesheets to underline text

There are some more, but I'm outta time. Chris, maybe you can edit these into your first post?
21 Feb. 2010, 02:24am
Personoid

Quote:

Originally Posted by Chad

Why do people always do <head> </head> if there isn't any content in the middle? You should just do <head />

Firefox doesn't always register these tags as properly closed.
For example, when using script tags with src set, you have to close with </script>.
http://imgur.com/OpFrg.png

Notice how it doesn't register the tag as properly closed.
Also: with elements such as iframe, if the iframe is blank, it contains the following:

HTML Code:

<html> <head> </head> <body> </body> </html>
21 Feb. 2010, 03:07am
Chad

Quote:

Originally Posted by Personoid

Firefox doesn't always register these tags as properly closed.
For example, when using script tags with src set, you have to close with </script>.
http://imgur.com/OpFrg.png

Notice how it doesn't register the tag as properly closed.
Also: with elements such as iframe, if the iframe is blank, it contains the following:

HTML Code:

<html> <head> </head> <body> </body> </html>

I know how it works but I've seen people always use <head /> When they just code the basic webpage.
21 Feb. 2010, 04:40am
GAMEchief

Using <head /> is incorrect, even in HTML, but especially in XHTML.

Also, if anyone wants to check their XHTML page, this site will tell you the error and how to fix it: The W3C Markup Validation Service