Thu, 2005-08-18 02:44
I've just discovered that the way i close a tag will change the way my page is styled.
for example:
h1 {color: gray; background: white; padding: .25em;
border: 2px solid black; font-family: Helvetica, Arial, sans-serif;}
<h1>Heading One<h1/>yeilds something completely different than if i close the heading tag like below: (which is my habitual way of doing it)
</h1>
which is the proper way? or are they both proper, but have different uses?
i'm sure i'll find many more bits that i have been taking for granted for so long. something must be wrong w/ the way i'm structuring my pages and code. i'm assuming that my unexpected abscence of style might be caused by my malformed code.
i tried something just to see what would happen:
body *:hover {background: yellow; text-decoration: line-through; font-weight: bold;}
Expecting it would style anything that i passed my mouse over, when i loaded the page, i found that it did not. only form items such as a text input area and the submit button were effected by it.
hmmm
i could probably benefit from a good refresher on the correct syntax and use of html tags. any suggestions? ideas on why my style isn't working as expected? if it's a doctype thing, then how can i find out what DOCTYPE i'm supposed to use? i followed the link in thepineapplehead's signature. it's a lot to digest, and i'm still not sure which to use. i don't want to derail my own thread, so i'll just leave it at that. i'm more concerned about my tags at this point. unless the doctype issue is critical to why my styles aren't working.
one more bit about the doctype, which you don't need to acknowledge in any reply, but i'd like to put it out there in case it is relevant-- that i'm using the "newest" Firefox, loading pages on my local Apache webroot. i have php installed as well... does this help me to determine my doctype? if everything i'm doing is local, then how can i be sure?
now... about those html tags...
Thu, 2005-08-18 03:04
#1
Re: closing tags: different types cause different behaviours
jsabarese wrote:
</h1>This is the right way.
As for your question on doctypes: which one you use is really up to you. There is no 'right' one (although established members of this forum are certain to favour strict over transitional ones).
Thu, 2005-08-18 03:10
#2
closing tags: different types cause different behaviours
Hi there.
I generally like to use the XHTML Strict doctype as it promotes "clean coding" throughout my websites.
As with your <h1> problem, the proper way of closing such a tag is like this:
<h1>Heading 1</h1>
For tags that usually don't have a proper closing tag such as a <br> you would write it like so: <br />
You had them mixed up together which was why you were getting weird results.
I hope this cleared it up for you 
Dan.
Thu, 2005-08-18 08:31
#3
closing tags: different types cause different behaviours
As for the *:hover; in theory this should work, are you testing in IE?
I never thought about using this - what a cool idea 
Thu, 2005-08-18 08:41
#4
closing tags: different types cause different behaviours
At risk of re-iterating what the others have already said.....
the choice of strict over transitional Doc type is really about the use of deprecated (to be removed / redundant) tags attributes in your markup.
As KK5st has said in the past what point coding a new document to anything other than strict doctype, why would one knowingly use deprecated tags/attributes in a new document. The transitional flavour is there to cope with pages that already may be using these older tags and in which it might be too problematical to remove them.
However which type of document you choose to use remember that it is the code that you write that is important you could code cleanly and still use a transitional DTD it wont change your code or the way that a browser will parse that information.
It is important to understand that the Doctype itself is not critical to how your pages are parsed this is down to the mime type that your file is delivered as. What is important though is that a correct form of DTD performs a switching action on browsers between Quirks mode and Standards mode; this is important as you need to be in standards mode for CSS rules to be as correctly implemented as possible so whether on a local host setup or webhost you will need the correct DTD to ensure browsers are in 'Standards Mode'. As to the choice of Doctype that has to be your choice really but it should be one of two types, either html 4.01 strict or XHTML 1.0 strict ( there is more detailed information on these subjects in the 'How To' section which I would advise reading as they will also explain the relevance and importance of validation of pages which is where the Doctype comes into use.).
The closing of 'empty tags' (tags that do not have an associated closing tag) is important in XHTML as all tags must be closed unlike html which is happy with <br> or <img src="">
The closing backlash is used in xhtml at the end of the tag < br />
<img src="" /> with a space between it and the last character but this is the only time this is used the normal method of closing a tag is </div>
Hugo.
Thu, 2005-08-18 08:45
#5
closing tags: different types cause different behaviours
thepineapplehead wrote:
As for the *:hover; in theory this should work, are you testing in IE?
I never thought about using this - what a cool idea
That is an interesting idea. Check out this little demo in Firefox/Mozilla:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>whatever</title>
<style type="text/css">
* :hover { background: red; cursor: pointer; }
* :active { background: green; }
body, html, p { height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<p></p>
</body>
</html>- Antibland
Thu, 2005-08-18 08:48
#6
closing tags: different types cause different behaviours
Hugo wrote:
What is important though is that a correct form of DTD performs a switching action on browsers between Quirks mode and Standards mode; this is important as you need to be in standards mode for CSS rules to be as correctly implemented as possible so whether on a local host setup or webhost you will need the correct DTD to ensure browsers are in 'Standards Mode'.
Read Internet Exploder. Opera and gecko-based browsers follow the standards.
Hugo wrote:
The closing of 'empty tags' (tags that do not have an associated closing tag) is important in XHTML as all tags must be closed unlike html which is happy with <br> or <img src="">
The closing backlash is used in xhtml at the end of the tag < br />
<img src="" /> with a space between it and the last character but this is the only time this is used the normal method of closing a tag is </div>
Hugo.
What is very important is the space between the element and the closing slash.
<br/> is wrong compared with <br />.
I can't remember exactly why, probably something to do with IE barfing on it. As usual 
/edit
Antibalnd (didn't see your post), that's sooooo awesome. That could be used for great things :D
Thu, 2005-08-18 08:51
#7
closing tags: different types cause different behaviours
HOwever, this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>whatever</title>
<style type="text/css">
* :hover { background: red; cursor: pointer; }
* :active { background: green; }
p {border: 1px solid #000; width: 3em; height: 1em;}
</style>
</head>
<body>
<p>ff</p>
</body>
</html>
is a strangwe one. Try it and see. :?
/edited
Thu, 2005-08-18 13:27
#8
closing tags: different types cause different behaviours
Thanks, I clicked it and now I'm blind... 
Great idea lol.
Thu, 2005-08-18 20:04
#9
closing tags: different types cause different behaviours
Oh TPH
TPH wrote:
Read Internet Exploder. Opera and gecko-based browsers follow the standards.
Quirks is Quirks mode, Standards is Standards mode they are given these names for a reason and it is not for no reason that Mozi/FF has a Quirks mode if it didn't demonstrate Quirks in it's rendering engine why have the two states ?.
I would have a wander over to mozilla.org and check out the differences in implementation between Quirks and Standards modes.
Fri, 2005-08-19 03:14
#10
closing tags: different types cause different behaviours
thepineapplehead wrote:
As for the *:hover; in theory this should work, are you testing in IE?
I never thought about using this - what a cool idea
i haven't had a chance to read all the replies here, but i must point out that i can Not take credit for that idea. It was Eric Meyer all the way. I might have changed something in there a bit, but it is a case of ignorance being bliss, i guess. hehe... i didn't realize it was that uncommon an idea-- i simply used it to try to see which browsers did different things.
rock on.
as for the tags, it's the <br /> that i had seen before, and hence my experimentation w/ closing tags. to me, </p> is correct. i guess it was practically a rhetorical question.
Fri, 2005-08-19 03:16
#11
closing tags: different types cause different behaviours
thepineapplehead wrote:
As for the *:hover; in theory this should work, are you testing in IE?
I never thought about using this - what a cool idea
i haven't had a chance to read all the replies here, but i must point out that i can Not take credit for that idea. It was Eric Meyer all the way. I might have changed something in there a bit, but it is a case of ignorance being bliss, i guess. hehe... i didn't realize it was that uncommon an idea-- i simply used it to try to see which browsers did different things.
rock on.
as for the tags, it's the <br /> that i had seen before, and hence my experimentation w/ closing tags. to me, </p> is correct. i guess it was practically a rhetorical question.
Fri, 2005-08-19 03:27
#12
closing tags: different types cause different behaviours
jsabarese wrote:
as for the tags, it's the <br /> that i had seen before, and hence my experimentation w/ closing tags. to me, </p> is correct.
They're both correct. As Hugo mentioned earlier, tags that don't have a closing tag (e.g. <p></p> has a closing tag, but <br> doesn't) need to end /> whereas all the tags that do have a closing tag would have the / before the letter
So:
</p> </em> </li> </form> etc.
or
<br /> <input /> <hr /> <meta /> <link /> <base />
(Someone correct me if I've left out any, but I think that's the full list of the ones without the closing tag).
Fri, 2005-08-19 13:18
#13
closing tags: different types cause different behaviours
i think i have it now.
although, it was interesting to see how using <h1 /> caused some really weird stuff to happen. maybe you've tried just for experimentation? (don't get me wrong, i realize now that it's totally incorrect, but sometimes i just like to see what will happen if something "wrong" is used. heck knowing that might help in debugging someone else's code down the line!)
going off of something that Hugo mentioned, using closing tags such as <br /> or <hr /> , (Tyssen, are you leaving out <img /> ?) is this all in an effort to make the code XHTML compliant, or strict DTD compliant, or both? or is there even more to it than that?
since i've chosen the path (less travelled?) towards learning to use standards compliant code, i think this would be a good time for me to learn how to make my code XHTML compliant. i have a question: is there a tangible difference in XHTML and HTML, or is it merely making your HTML fit perfectly into a strict DTD (or am i totally confused on this subject)?
if there are syntactical rules specific of XHTML, just as there are certainly specific syntax for HTML (eg. one must learn the tags such as <html><head><body><h1><p> etc. your text between tags, and all the other HTML that we had to learn as a very first step to web publishing), where might i find a realiable source for the rules and tags, and other code for XHTML? i could of course google it, i probably sound really lazy, but i trust the specialists advice here more than my own random search. and since we're on the subject....
thanks!
Fri, 2005-08-19 15:09
#14
closing tags: different types cause different behaviours
you have to mozy on over to this thread that I started a while back:
http://www.csscreator.com/css-forum/ftopic10975.html&highlight=
which is a great re-occuring topic that drove Hugo (and a few others supporting) to write this great summary of the topic here:
http://www.csscreator.com/css-forum/ftopic11242.html
it might clear up some of those questions.
p.s. very good work on that summary by the way Hugo! (and Gary,Roy and Larmia)
Fri, 2005-08-19 21:01
#15
closing tags: different types cause different behaviours
Hi jsabarese,
Quote:
<h1>Heading One<h1/>
I'm not sure if this was mentioned above or if it was understood, but the <h1/> tag would be adding a blank h1to the page in quirks mode.
So some browsers may render it as
<h1>Heading One</h1> <h1> </h1> which would mess up your page a little. Example page
<html>
<head>
<style type="text/css">
p{color:black;}
h1{border:solid 1px red; color:green; }
h1 p{color:red;}
</style>
</head>
<body>
<h1>h1<h1/>
<p>p</p>
</body>
</html> Firefox renders this as
<h1>h1</h1> <h1><p>p</p></h1>
Sat, 2005-08-20 03:03
#16
closing tags: different types cause different behaviours
thepineapplehead wrote:
As for the *:hover; in theory this should work, are you testing in IE?
I never thought about using this - what a cool idea
TPH, i'm addressing you, because i thought you'd like to know that i followed your link to DTD's and put the strict DOCTYPE in my html doc where i was testing the *:hover... and guess what... now all of my mouse-overs produce effects! now i get it. now i see why it is indeed very important to have the right doctype-- at least the right doctype for what code you are trying to publish, or even what code you're simply testing. it simply will make it work propery. good call! i realize i'm late in realizing what everyone has been trying to say the whole time, but this example is such a dead-giveaway, that from here on out, i'll truly feel as if my docs are incomplete unless i've checked for compliance.
oh, geez... what have i gotten myself into!
Tue, 2007-03-13 17:23
#17
Correct Open and Close Tags
The correct open and close tags are <h1>Header</h1> that works with every doctype under XHTML by that I mean Strict, Transitional, Frameset e.t.c.
Cheers.
----Developing an age of education----
Tue, 2007-03-13 17:26
#18
not sure I get what your
:? not sure I get what you're saying.
erm this is a rather dead and buried old thread