logo

Labelling Closing Elements

Whether or not you've given up using tables for layout you'll no doubt remember the "tag soup" you often ended up with. The trouble with lots of nested tables was knowing which end table tag went with which start tag. The same is true of using DIVs however. If you use enough of them you can end up placing content in the wrong container.

Here's a little trick I've just started using. Whenever I end an element such as a DIV I add an ID to the closing tag. If the start tag has the ID "content" the end tag looks like this:

</div id="content">

Now it's easy to spot where each one ends and there's less chance of incorrect nesting. But, there's an issue with this. It's illegal! Try and validate the HTML and you'll get an error for each of these tags. However, the browsers don't complain and everything displays as you'd expect. If validation concerns you (heck, you're a Domino developer, why would you?) you might want to remove all of these end IDs after you've done developing and it's ready for the primetime.

It's a lot like another trick I try to use when coding, whereby you comment all close brackets, like so:

  } // end for (all docs)
 } // end if (!is new doc)
} // end function (doUpdate)

Even with the proper indenting of code like JavaScript and HTML reading through large sections can become a nightmare. Commenting critical end points like this helps no end.

Comments

    • avatar
    • Brian Miller
    • Tue 22 Feb 2005 12:47

    Why not just put a valid html comment after the end of the div tag? If it works for the end clauses of if statements...

    • avatar
    • Jake
    • Tue 22 Feb 2005 13:06

    Laziness Brian. Too much messing about to write a comment in HTML. All them <s and ! and // and --s ...

    • avatar
    • IanB
    • Tue 22 Feb 2005 16:11

    won't you run into problems having the same id?

    wouldn't id='endcontent' just be a bit safer?

    • avatar
    • IanB
    • Tue 22 Feb 2005 16:18

    really should read the whole of your post first, shouldn't I?

    • avatar
    • Jake
    • Tue 22 Feb 2005 16:19

    I thought that too Ian, but don't think the browsers mind. They probably ignore any parameters to a an end tag completely, so it doesn't matter if there's a naming conflict.

  1. Hi, Jake.

    When you access to the DOM Tree Node ( with getelementbyId() method ( perhaps you will have in trouble with duplicated id's, no?

    • avatar
    • Andrew Tetlaw
    • Tue 22 Feb 2005 16:57

    Shame! 'Tis both illegal and yucky to behold. A HTML comment is the better way. Laziness is a curse!

    <!-- end unhelpful comment -->

    • avatar
    • Anthony
    • Tue 22 Feb 2005 18:19

    I can't believe you suggested that, it is ugly and as you stated 'illegal syntax'. We have standards for a reason, stick with comments.

  2. Hey! Let's pile on Jake!

    sheesh. I thought it was at the very least clever. I don't know - maybe my brain cell count is where Jake's is cause it made perfect sense to me... validation is for nancy boys anyway.

    Since the id attribute is in the closing tag of the same element that begets it, there's no conflict with getElementById. Here's proof by way of example. If you run this in a simple html page you'll see the output

    Div1! Div2! Div1!

    Div3!

    Div2!

    in an alert box demonstrating both unique integrity of divs and proper nesting... or so it appears.

    <script>

    function test ()

    {

    var d1 = window.document.getElementById("div1").innerText;

    var d2 = window.document.getElementById("div2").innerText;

    var d3 = window.document.getElementById("div3").innerText;

    alert(d1 + " " + d2 + " " + d3);

    }

    </script>

    <BODY>

    <div id="div3">

    <div id="div1">

    Div1!<br>

    </div id="div1">

    Div3!<br>

    <div id="div2">

    Div2!<br>

    </div id="div2">

    </div id="div3">

    <a onclick="test();return false;" href="#">Test Craziness</a>

    </BODY>

    • avatar
    • Nicholas Partridge
    • Wed 23 Feb 2005 00:04

    But is it really that much more difficult to do something along the lines of:

    </div><!-- id="foo" -->

    Not only is that standards compliant, but to me that makes it even more clear. I would find it very easy to skim through some markup and mistake a closing tag with an ID as a new start tag.

  3. Standards, standards. All this talk about standards. All current standards have begun with a discussion like this one. Jake has a valid point here. I think it's not that bad. He actually thought about it and came up with a, to me, logical solution. If you have to write some many comments, I would become lazy too. Besides, this may become a standard as well. All current standards are there because someone took the time to think logical about programming. I think it's a pretty neat solution. Jake, up to the W3C committee!? ;-)

    • avatar
    • Salva
    • Wed 23 Feb 2005 02:06

    id="x" = 6 letters

    <!--x--> = 8 letters

    And I thought I was lazy!! :)

    I'll stick with comments, when needed. I get a nice warm feeling when I select "View source code" in Firefox* and I get 0 errors/0 warnings.

    * I have the HTML validator extension installed.

    • avatar
    • Jake
    • Wed 23 Feb 2005 03:12

    Woops. I should have know this one would get a mixed reception. Hey, it's just an idea and something I've started doing more and more recently (in development mind!). I know there's not much in it when it comes to number of letters to type but I hate typing in HTML comments.

    Is it ugly? Maybe in the way it's illegal, but, personally, I think it's a hell of a lot tidier than *ugly*-looking comments.

    Yes I'm lazy. I don't see it as a curse though. Why waste time?

    • avatar
    • Giles
    • Wed 23 Feb 2005 05:32

    Considering that Jake says that "you might want to remove the end ID's after development" and it doesn't effect browsers, I cant see any problem as far as standards are concerned.

    I mean you want to steal Jakes Code and dont like the fact he isn't 100% standard compliant then remove them ;)

    Personally I'd rather leave comments in place, frankly they are more versatile than putting ID in ernd tags.

    I also think that this suggestion means that the closed tags now look a lot like open tags which is as likely end in content ending in the wrong container.

    • avatar
    • Giles
    • Wed 23 Feb 2005 05:33

    Less hurry, more spelling and punctuation :)

    • avatar
    • Arka Nada
    • Wed 23 Feb 2005 08:03

    When will someone write a code editor that will allow me to collapse/expand HTML elements - like DIVs!

    Then I could live without comments, id hacks, etc.

    Anyone know of one?

    • avatar
    • Scott
    • Wed 23 Feb 2005 08:20

    Jake, how do you create your xml feeds?

    • avatar
    • Scott
    • Wed 23 Feb 2005 08:22

    Oops, should have searched first. Found it by searching articles for "xml".

    Thanks, anyway.

    • avatar
    • John
    • Wed 23 Feb 2005 08:48

    I add hidden from web bold pink comments in my subforms which allows for clean uncommented markup. I do like the idea of having the id/class in the end tag but that would be more for figuring out how other people achieved their layout.

    • avatar
    • H
    • Wed 23 Feb 2005 11:49

    Hey Jake - in your defense...I've started adding id tags to my </div> statements also over the last few months(*). I agree that it would be so simple and nice if it worked like that - dammit!

    (*) Currently thinking whether to leave them there or change them to comments..

    • avatar
    • Louis
    • Wed 23 Feb 2005 17:52

    This is a really great way to keep track of waht the heck is going on with css values and has helped me countless times debug css behavior. I've been using this method beyond <div>, to <span>,<table>,<p>, etc.

    Before we did this we did testing, including getElementById, and no problem, so I have to side with Jerry on this one.

    The reason this is so useful is because most of the sites I construct. build pages from numberous templates and the html hardly ever breaks logically between templates, i.e. the <div id="header"> for the header spans the header, brand, search, tabs and navigation template. So it can be very hair puling experience to try and debug css behavior when all you see is a group of </div>s. It also makes it much easier for automated routines to identifiy sections of content that need to be manipulated.

    In fact the designers that I've turned on this technique now love it. I suggest more folks use it.

  4. My opinion?

    Maybe in case of the Year 2000 problem some programming guys thought:

    Why take care of the century? - It's so much easier to store only the last two digits of the year and we save us tons of storage ...

    Jake, for small projects I accept your idea (and use it for myself if I'm the only developer @ work).

    But in big and long lasting projects with lots of co-workers or teams spread over several countries I always preferred to keep the actual standards to have done a reliable job for the customer and all the other "victims".

  5. > It also makes it much easier for automated

    > routines to identifiy sections of content

    > that need to be manipulated.

    Louis, could you elaborate on this one? What kind of automated routines are you refering to?

    Until I know the answer, I can't agree to the recommendation to intentionfully break html standards, just because it's a little more convenient (and I admitt, that's what it is). But even then, simply violating a standard is surely not the proper way to request a change to it.

  6. Or alternativly you could just indent?

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Tue 22 Feb 2005

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content