18 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 16 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 19 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

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 Smile

Dan.

I am Dan, Dan I am.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 31 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

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 Laughing out loud
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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Tongue

/edit

Antibalnd (didn't see your post), that's sooooo awesome. That could be used for great things Laughing out loud :D

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 13 years 50 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

closing tags: different types cause different behaviours

Thanks, I clicked it and now I'm blind... Sad

Great idea lol.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

closing tags: different types cause different behaviours

Oh TPH Sad

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 16 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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 Laughing out loud
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.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 16 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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 Laughing out loud
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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 16 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

closing tags: different types cause different behaviours

i think i have it now.
Smile

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!

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 14 years 14 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

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) Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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> 

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 16 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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 Laughing out loud

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!

christallization
christallization's picture
Offline
Enthusiast
Las Vegas
Last seen: 15 years 10 weeks ago
Las Vegas
Joined: 2007-03-13
Posts: 69
Points: 0

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----

WHAT HAPPENS IN VEGAS, STAYS IN VEGAS.. NERDS RULE!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

not sure I get what your

:? not sure I get what you're saying.

erm this is a rather dead and buried old thread Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me