Closing tags in HTML vs. XHTML

thegingerkid · 07-28-2012, 06:34 PM

Hi guys, I'm sure there are many answers to this out there but I'm having trouble finding anything definite. I've done a lot of research but tend to get confused by all of the different options when it comes to this exact doctype.

I am currently finishing up a site which I began with a template. I've heavily edited the template to create a new design but the doctype of course remains the same. This is the info specified in the template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Even after reading tons of pages on the subject, I can't for my life confirm what type of coding to use when it comes to closing tags. For this particular doctype, do I use:

<br>, <br/> or <br />
<a href="url.com">, <a href="url.com"/> or <a href="url.com" />
<img src="img.jpg">, <img src="img.jpg"/> or <img src="img.jpg" />

Or does it not matter at all? Is it optional or can it cause problems to use the wrong syntax? I'm sure the answer is quite obvious and yes, I have read through the FAQs, etc. but I'm still a little unsure of the exact rules.

As of now, my pages uses <br/>, <a href="url.com"> and <img src=img.jpg" /> so they are all possibly following different rules and I just want to clarify whether or not I need to touch that up before the site goes live or if it won't make much of a difference either way.

Thanks so much!

Lerura · 07-28-2012, 11:52 PM

When it comes to closing tags there are three kinds of tags.

Tags that have no closing tags aka singleton tags.
e.g. <br>, <hr>, <img>.
These tags requires the closing slash:
<br/> , <hr/> , <img src="2"/>, (a space before the slash is optional)

Normal tags with optional closing tags:
<td>, <option>
In xHtml, the closing tag is required:
<td></td>, <option></option>

And then the normal tags that also reqiures to be closed in Html:
e.g <a href=""></a> , <div></div>
These tags are the same in Html and xHtml.

Simple rules:
ALL tags MUST be closed in xHtml.
If there exist no closing tags (singletons), then the slash is used to close the tag.

thegingerkid · 07-29-2012, 12:44 AM

Okay, so I should just tweak the code to make sure that the img tags end with /> as well then...

And the space before the slash (for img, br, etc.) is always optional? I keep reading contradictory information (ie. that it's a style/taste thing, that some browsers will get mixed up with a space, some will get messed up without a space and so on) so I was getting a bit confused. But what you're saying is that as long as there's a slash before the closing bracket, it makes no difference whether or not there's a space in there, right?

Thanks so much, I appreciate the assistance.

Lerura · 07-29-2012, 01:23 AM

I believe that recommending space before the slash, is because you have to separate attributes with a space:
eg:
<div id="MyDiv"style="color:blue"/> (invalid)
vs
<div id="MyDiv" style="color:blue"/> (valid)

but the slash is not an attribute.

AFAIK no major browser care if you use a space or not.

thegingerkid · 08-01-2012, 04:19 PM

Thanks!

Dormilich · 08-02-2012, 08:08 AM

one more note: XHTML doesn’t care whether a tag is self-closing or uses a closing element. i.e. the following are equivalent: <br/> & <br></br> or <script ...></script> & <script ... />.

though be aware that if you serve XHTML as HTML, then you may get invalid HTML or HTML with a different structure (e.g. <div/> in HTML is interpreted as <div> and thus the following code becomes a child of the <div> rather than a sibling)

felgall · 08-02-2012, 09:55 PM

Quote:

Originally Posted by thegingerkid

And the space before the slash (for img, br, etc.) is always optional?

The space is only required if you are serv ing the page as HTML to Netscape 4. It was that browser that led to people inserting the space. It is completely unnecessary for any more modern browser (such as IE4+). Of course you can't serve it as XHTML to IE8 or earlier as those browsers don't understand XHTML.