Why does Visual Studio's Format Document tool put heading tags over two lines?

Question

So if I have a HTML heading like this

A Heading

and I run Edit -> Format Document it ends up looking like

Answer 1

It does it because those are its default settings. In older browsers, sometimes having the end tag of a block or inline element on a new line after the child element (effectively leaving whitespace, such as a non-breaking space or empty text node) affects how the page is rendered. I have had trouble with this before. For example, the following can have issues rendering correctly if your anchors have borders or padding:

<a>
    <img src="..." />
</a>

Sometimes there would be additional spacing at the bottom of the link. Changing it to the following removes the additional spacing:

<a><img src="..." /></a>

Basically, the goofy formatting solves some rendering issues in browsers with shoddy CSS support like IE6. If you have IE6, look at this JSFiddle I created to illustrate the issue. There's extra spacing at the bottom of the image where the anchor tags exist on their own lines.

From Scott Guthrie's blog:

If you format a selection of markup and see that a close tag hasn’t been moved to a separate line – it is because there is no space between the end of the preceding markup and the terminating tag, and as such VS is being careful not to change it to avoid changing the rendering semantics.

So as ugly as the formatting or output from the designer in Visual Studio can be, it is more likely to work in more browsers than would properly formatted markup (such as XHTML).

To change the defaults for the formatting in Visual Studio, go to:

Tools > Options > Text Editor > HTML > Format > Tag Specific Options...

Under "Default Settings", change the "Line Breaks" option to "Before and After" for both the Client and the Server "tag supports contents" options.