I've been writing some webmaster software; it started as an FTP client and has been evolving over time as I do more hand coding. It's freeware, so I hope people don't mind a slightly unusual question on a feature I'm building.

I'm building a DOM tree to show the structure of an html or xml document. Visuals help me pick things up quickly, so it seems like a good feature.

So, to make sure it renders properly, I've got to deal with tags that people forget to close. I see a lot of <img ...> that should be <img ... />, <br> that should be treated as <br />, and then meta and link in the header section. Am I missing anything common?

I think those are the two most common. <meta /> gets one as does <link /> when you're including a css file. <hr /> is another.

I'm sure there's more and I'm probably missing an obvious one, but that's what's coming to mind at the moment.

Let me know when you need a beta tester, bro. I'll be happy to put it through the wringer and give it a review (just make sure you rock the ASP science too. )

Area would be another one (although pretty obscure since not many people use image maps).

Param is self-closing as well.

I think embed is, but it's deprecated.

Steven, I think the obvious one you're thinking of is input .

These are the ones I thought of, although this list might help:

http://www.w3.org/TR/2005/WD-xhtml2-.../elements.html

Also, in the past it was not required to close <p>, <li> tags.

<hr />! I haven't used one of those in years, but you're right ... thanks!

Originally Posted by vangogh

I'm sure there's more and I'm probably missing an obvious one, but that's what's coming to mind at the moment.

That's the thing ... I didn't think of <hr>, either.

Originally Posted by frost

Also, in the past it was not required to close <p>, <li> tags.

Thanks! I'll have to make sure I'm handling that properly. I wrote the software up to "figure it out" when a tag with embedded content like <tr> or <td> is missing its end tag, which should handle paragraphs and list items, but I'll have to test for this specifically.

I noticed in a stream that included <br><br>, the software put one as a child node of the other, which is technically correct, but clearly not intended. I'll have to go tag-by-tag through Adam's list and check for the ones I've seen used where a self closing is implied.

Originally Posted by ADAM Web Design

Let me know when you need a beta tester, bro. I'll be happy to put it through the wringer and give it a review (just make sure you rock the ASP science too. )

The software is in two parts: a visualizer for Windows, I'll attach a screen shot, and a class library that parses the string data and builds a hierarchy of nodes representing the tags in the document. Like MSXML, except that doesn't work on 90% or more of the html out there. I still need to build in the concept of <% inline code blocks %> before it can chew ASP source code, but it can do the html it renders.

I'll send you a PM about beta testing.

The attachment shows the structure of the reply form for this page. The visual tree doesn't exactly match the DOM tree; attributes aren't represented as children, but it's easier to display that way, uses less horizontal real estate.

That's just sexy looking, dude. I may have way too much fun beta testing this bad boy!

Forrest I'll be happy to test it for you too if you'd like more help. It looks good from the screen shot.

I think that was the one I forgot Adam. Forms didn't work their way into my head before. Nice on the list. I was looking for one earlier, but admittedly not all that hard.

Forrest I still occasionally use <hr />, though mostly I'll just add a border to an element. Sometimes an <hr /> works easier though.

Can you style <hr /> tags? I thought they were the coolest thing in the world with their cheesy 3D look, but even as a non-designer with no visual creation skills, I tend to build layouts they just don't really really work with. I guess there's no reason you couldn't... This is a little embarrassing, but I used to write out code like <table><tr height=1><td height=1 bgcolor=#000000></td></tr></table> and think as cod-heavy as that is, it was better than an <hr /> for a while. Now I'm cringing at the lack of quotes, and the =1 something.

Anyway, I'll send you a PM with details about the beta ... I know about the few bugs I need to deal with, but I'd be grateful for any ideas I could incorporate to improve the thing. I wrote it to solve my own frustrations, mainly search and replace that would be able to find all paragraph tags with a class attribute, whether it comes before or after other attributes, and whether values are quoted, and ' versus " giving consistent results.

I'm going to work this into my WebMaestro application, which is freeware, and going to stay that way. It can already edit text files ( including html, shtml, php, asp, and so on, and it has an image viewer ... so this seems like a good next step.

So ... new question: how would I find or make a list of tags that aren't allowed to have children or values? For example, there's no <img src="...">blah blah blah</img>. There's also no </br> or </hr> tag.

Interestingly, if embed is depreciated, there are a lot of sites with old code.

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/v/a15KgyXBX24"></param>
  <param name="wmode" value="transparent"></param>
  <embed src="http://www.youtube.com/v/a15KgyXBX24" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

Would put http://youtube.com/watch?v=a15KgyXBX24 into your site or blog.

But in that example, if someone forgot a </param> or </embed> and there was another tag ( not text ) between them, would you assume an implicit closing tag before dealing with the new one?

I wanna beta test it, too! That rocks.

Can you style <hr /> tags? I thought they were the coolest thing in the world with their cheesy 3D look, but even as a non-designer with no visual creation skills, I tend to build layouts they just don't really really work with. I guess there's no reason you couldn't... This is a little embarrassing, but I used to write out code like <table><tr height=1><td height=1 bgcolor=#000000></td></tr></table> and think as cod-heavy as that is, it was better than an <hr /> for a while. Now I'm cringing at the lack of quotes, and the =1 something.

Yes, with CSS:

hr {
     height:  5px;
     color:  #FF0000;
     overflow:  hidden;
}

This will give you a red line, 5 pixels high.

That's a lot better than building a whole table just to display a row of pixels...!

John, I'll send you a PM with the details as well. I really didn't think it would be that exciting to anyone else, but since you're the third person to show enough interest to want to play with a pre-release version, I'll have to try to hurry getting this officially released. Again, for anyone else who might want a copy, this is going to be freeware very soon, so don't feel like it's now or never.

But it's very cool that people other than me like this idea. Maybe I'll make this into a stand-alone viewer, which would let me get it out much more quickly than if I wait to incorporate it into the app I've been planning to work it into.

Adam beat me to it, but I'll corroborate that you can style <hr />s. You can pretty much style anything.

Forrest I think most of the tags that are self enclosing are the ones with no stand alone closing tag, which is the reason for the self enclosing tag.

Bro. Dude. This thing ROCKS. I sent a email to the address on your web site with some bugs I found, but out side of that, you da man.

I'm the kid on the short bus in here. I got "drool" on my IQ test. Not really, but I'm way behind the curve compared to LadyNRed, Adam, Steve, and apparently you even if you're asking dumb questions. For someone like me who understands the basics of html because I need to for ASP.NET, it's super cool to see how things work. And it's cool to be able to see when I have something embedded in the wrong place without having to futz around and read everything by hand.

I don't think most of the smart folks in here are gonna enjoy being able to learn stuff they already know, but you gotta hurry up and release this. I'd actually pay for it if I had to.

That's some endorsement. I've only gotten as far as downloading and I was planning on testing it a little this weekend. John you've got me really excited to see it.

That's maybe a little too much endorsement ... I wrote the thing and don't think it's that great! I mean, I'm really flattered, especially that you'd be willing to pay for the app, but I don't want to raise expectations to an unrealistic level.

It sounds like maybe I should make this a standalone product, since it's already getting more interest than I expected. And, as promised, it'll be a free one. I guess I ought to clarify two things:

• There's a button on the toolbar that kind of looks like a text input field with a carat. That lets you paste in an xml or html string and see it parsed into a tree. The other buttons open a specific file and reparse it, but this lets you grab the rendered source of an asp page without having to save it to a file.
• The time it shows isn't how long you had to wait to get the tree, it's how long it took the markup parsing engine I wrote to process the document. So it's really not a useful metric for anyone but me when I'm tweaking the algorithms a little. But this is the test project attached to a code library I'm trying to put the finishing touches on.

Can anyone recommend a way to find a complete list of tags that aren't allowed to have child nodes, or content? An anchor can have anchor text, a paragraph can have text, but an image or meta ( description, keywords, whatever ) can't have child text, this is all done as attributes. I'm guessing they also can't have child nodes, like <img src="x"><p>...</p></img>, or <br><img></br>. It's actually doing a better job than I expected of guessing when the markup has errors, but I'm sure there are situations I haven't encountered myself, and I want to make sure they're handled well.

Oh, and thanks for all the info and encouragement!

Originally Posted by ForrestCroce

I've been writing some webmaster software; it started as an FTP client and has been evolving over time as I do more hand coding. It's freeware, so I hope people don't mind a slightly unusual question on a feature I'm building.

I'm building a DOM tree to show the structure of an html or xml document. Visuals help me pick things up quickly, so it seems like a good feature.

So, to make sure it renders properly, I've got to deal with tags that people forget to close. I see a lot of <img ...> that should be <img ... />, <br> that should be treated as <br />, and then meta and link in the header section. Am I missing anything common?

Hey Forrest, sorry for the late reply. I've been away for a bit.

To fix old pages, you might try using Tidy. Personally, I use jTidy, get a DOM object, and just generate compliant output. Its not always perfect but, when it's not, an XML editor can make quick work. All of the 'self-closing' tags are just handled because you are outputing a DOM tree.
The biggest problems come from attributes that are no longer supported.

If you like, I could scribble up a little program for ya.

Update: Doh! I should have read the rest of the posts, to see that you are basically trying to do the same thing.

Yep, although I didn't know about jTidy. But I'm building a DOM tree parsing engine, and the tool I built to test it actually wound up being useful enough to find its way into other web software I've been working on.

I'm also getting more and more side-tracked, so it would make sense to release the GUI thing stand-alone until I can integrate it into the other software.

Any thoughts on a product name? "Markup Structure Viewer" isn't exactly sexy, but it's at least descriptive. I'm thinking to write up a single page with a link to the download, and also an explanation of what each of the buttons do...

How about DomViewer or DomTreeViewer. Still descriptive, but easier to remember I think.

"Visual DOM"

just kidding.

Actually, I like Vangogh's idea

I'm wondering if I came up with them because they already exist. They sound kind of familiar, but I'm not sure if they exist.