Closing Divs

I can’t believe I’ve never thought of this before. I generally use nested indentation to visually indicate start and ending blocks, but this solution seems a bit more reliable. Simple, but I like it.

Textpattern introduced me to this clever bit of common sense as well. It’s one of those things that’s such a simple solution you don’t even think about it.

A very simple yet effective idea, thanks!

Nice & Simple..

Never thought about it.

Thanks for the tip.

There are moments in one’s life when the discovery of something gloriously obvious (and obviously glorious) leaves one short of breath. Like the discovery that “alphabet” is a portmanteau of “alpha” and “beta”, or that the 555 area code doesn’t really exist.

Reading this has been one of those moments.

Great point man. /comment

You’re the second “expert” I’ve heard recommend this. It was also used in the recent Professional CSS book by Wrox. I guess I should start using it, I’ve got no excuse now.

I use #idname for ids and .classname for classes (can be combined)—this gives me some information about wheter it is an id or a class or both.

Perhaps I’ll switch to /#idname, this seems to be the most logical solution to me.

PS: Can’t get code to be displayed as code here, so I stripped the < ! – - stuff. Just imagine it around the #idname etc.

Of course the best way would be not to use divisions at all, but I can see how this’d make it all a bit easier to look over.

I’ve been doing this for a while, I learned my lesson working on a client site when I was trying to find a problem in my code and had a bunch of /divs and no idea what they were closing.

I’ve been doing something similar for awhile now. The main difference between what I’ve been doing, and what you’re doing is I place my comments inside the div. The reason for this is due to a bug in IE (who didn’t see that coming?). Apparently, IE likes to duplicate content when it finds a comment that lies in-between two floats.

I’ve been doing that for a while… I find it most useful if you only do it for major div id’s, like “navigation” and “header.”

If you’ve got a div class that you’re using multiple times, say “subContentBox,” the closing comments get very distracting.

A good IDE can be a huge help for problems like this. oXygen, for example, puts two context-sensitive markers in the page margin while editing an X/HTML document; clicking the top one takes you to the opening tag of the currently selected element, the bottom to the closing tag. Even better, you can click on the element in the outline view to select it and all of its contents. I find this much quicker and more intuitive than cluttering up my mark-up with comments that I’ll have to keep updating as IDs and class names change.

Garrett, good point about others editing code. However, I’d argue that effort required to keep the comments in synch outweighs the readability benefits.

No apostrophe, no apostrophe aaaargh!

Divs

not Div’s

(no possession)

For a couple of years now, I’ve been using…

< d i v [space] i d = " c o n t a i n e r " >

t e x t

< / d i v > < ! - - e n d [space] c o n t a i n e r - - >

I guess it’s pretty much the same thing, but you’re right in that does make a world of difference when you want to quickly decipher the structure of the page.

I normally use ” End [name of div] ” but I like the idea of using ” /[name of div] ” instead. Thanks Garrett.

I’m used to use class=”classname” and id=”idname” inside the comments on every div closing tag.

I think that what’s really important is that it helps you to figure out which div is being closed. What you put in the comment doesn’t matter.

I’ve used this notation for about a year now:

Oh, and by the way: the new layout rocks. Congratulations on the tweaks…

I’m with Justin and Mike. I feel the combination of proper indentation combined with the use of a good IDE is usually sufficient, and makes for cleaner-looking code. Though I don’t mind this sort of notation, I just don’t use it myself. (Whereas seeing badly indented code really annoys me!)

And I agree with cboone – your new layout tweaks are very nice.

(Sorry if you get this comment three times – the first two times I used the Submit button, but nothing seemed to happen. Now I’m trying Preview then Submit.)

The only bummer is that when you have a bunch of comments in your markup, you expose that hideous “extra character” bug in IE 6. I love the use of comments to indicate the end of divs, but as a perfectionist, where do you draw the line?

Smart advice; going to start doing this.

Personally, I prefer saying what was closed. I’ve been doing this for near a year now…

< div id="content" >

P.S. Commenting code is totally borked.

Liking the new design of this site, alot! Good work Garrett.

I mark my closing divs with a comment stating the name of the div’s class or Id. I find it to be very useful.

I’ve always thought you should be able to hover over a closing tag in Dreamweaver and get the class/id of the opening tag. Please Macromedia? Please?!?

I use a very similar method. Only I use the # or . to denote whether it was an ID or class that was ending. Your example becomes

< div id="primary" >

Very nice reminder and helpful tip. :)

Wow, I love these simple ways of problem-solving. Nice tip, thanks!

Glad to see others doing this! I think it was after a third hour of trying to tame an unruly template that I experimented with this (I’d tried using tabs to show the structure that only made cutting and pasting madness). Fantastico!

And to follow up this great tip – Here’s a snippet for textmate, for the div tag, that automatically sets the end comment (discussed in this article) to the same value as the id.

Edit: after previewing it, I found out the snippet was broken because I’m not allowed to post html-tags here. But here’s how you do it:

1. Open up the snippet editor in text-mate
2. Create a div-snippet or open the current one if it already exists (should do by default).
3. Put this in the end of the opening tag: ${1: id=”${2:name}”}
4. Put this inside the div: ${0:$TM_SELECTED_TEXT}
5. Create a html-comment after the closing div-tag
6: And finally, put this inside the comment: / ${2/[[:alpha:]]+|( )/(?1:_:\L$0)/g}

Cool. I think I’ve seen that approach to commenting somewhere else. Lately, I’ve been using (a similiar method described above):

< div id="content" >

Your name here.

< /div > < !-- end #content -->

Steven: you bring up an excellent point with the IE bug. I think, though, that this may be a good way to improve the readibility as well!

Consider:

< div id="content" >
Content goes here… Nested, if desired.
< !-- /content -- >< /div >

Curious.

I use almost the same as AJP – In the DRY fashinon, I don’t write the ”/” as I find it a repetition – the closing comment itself tells that we are closing a div, so why using another symbol to denote it?

So my formula is:

< div class="classname" >
...
< /div>< !-- .classname -- >

< div id="idname" >
...
< /div >< ! -- #idname -- >

I used comments on closing div tags before. But thank you for the hint with additional selector notation (.class, #id). One never stops learning ;-)

hey all, what would be wrong with including a custom property in the closing DIV?

i.e. < DIV id="xyz">...< /DIV _end="xyz">

what would/could this break? seems to be a little leaner than the extra comment. Perhaps makes it harder to spot the closing DIV? Won’t this simply be ignored by browsers/UAs?

also allows some useful stuff with eg., perl and reg-exp’s for tag-closure checking etc

[ allowing for the way I’ve had to write the code to get it into this post ]

Is there a reason why couldn’t we just use

< div id=“idname” >
Content
< /div id=“idname” >

Any known problems with browsers?