Do you generate nicely formatted HTML?

Question

When using some server-side technology which is outputting HTML, do you try to format the output nicely? For example, adding line breaks and indentation?

What are the pros and cons of either style?

Answer 1

I tend not to bother myself. Given tools like Firefox's DOM Inspector and Firebug, which converts your HTML into a nice, collapsible tree, I see no point to making the raw HTML nicely formatted. It also saves on a few bytes in each request.

Answer 2

I personally do try to use the tabs or spaces. I even write my function in a way that allows for indentation amount sometimes. I think it really helps with readability for debugging the markup.

Answer 3

I can't stand poorly formatted code, whether it is written by a human or by a machine. I can't change how others write/generate their code, so I try to do the best I can for my own.

Answer 4

Stylistically, no. The code in my template file and any pieces of HTML in my server side code are formatted nicely when I write them, but I don't pay much attention to what the finished product looks like once everything is parsed together. As long as it validates, that's enough for me. Adding explicit linebreaks or tabs just complicates your code, which makes things a little harder to maintain.

Answer 5

HTML formatting depends highly on the need for readability (and therefore supportability) versus the optimisation of the page.

For example, if you have controls that are generating a raft of nested tables (as is so often the case with .Net controls), then you may need to ensure they are nicely laid out and well-formed so that you are able to debug any rendering issues in the markup. This would include indenting and whitespace.

However, if the size of your page meant that there were a lot of graphics and/or markup being sent down the ether, the speed of the page load might be the bigger concern. In that case, you'd sacrifice nice, tidy markup for more compact HTML and reduced page sizes. This would be especially true of countries who still had many users on slower connections or dial-up (like we do in New Zealand with 40% still on dial-up).

I would argue that every good web developer should at least consider the layout of the HTML he or she is writing. Just like commenting and code structure is important in code behind the pages, some rudimentary effort should be taken to keep the HTML reasonably tidy as well.

Answer 6

Yes, I'm actually EXTREMELY anal about this.

PROS: Viewing the source and making changes is extremely simple. When showing code samples it becomes extremely apparent that you write your own stuff and don't 'phone it in' via Dreamweaver, etc. Less 'bloat' that programs like Dreamweaver add.

CONS: Added file size because of the line breaks and tabbing -- although I've seen very few sites that have everything on a single line. Potentially makes it easy for people to code a bot to scan over and steal content.

Answer 7

I make sure that my HTML is properly formatted in the template files. This allows for easy editing of the code and debugging.

However, by the time the files have been put together and output to the browser, the indentation can go right off, this doesn't matter, since Firebug (and the IE developer toolbar, to some extent) is perfectly good at formatting it for me. And when I need to go and change something, the file I come to change it in matches that indentation and formatting as it was written nicely.

Basically, I do everything I can to keep my and others' jobs easy, without worrying too much to how the server actually spits out my code.

Answer 8

Kind of in between.
When I generate stuff, the code for generating it is nicely formatted. Hence the output is usually OK. When I have to debug something, then it gets the full treatment. Of course, when something fails to render properly due to DOM/CSS issues, then it gets the full treatment straight away, as often the presence of absence of whitespace can have unpredictable effects.

Answer 9

When I'm putting together templates for a site, I start with them all nicley formatted and indented until I get it right, keep a copy of that, and then crunch the hell out of them, not quite down to a single line, but not far off.

Generally speaking, the audience for sites that I make is the general public, who don't actually care about the code, they just like fast web sites, and more often than not, my clients want them to buy something.

Every byte costs money, doesn't matter much on small sites, but if you have something being hit millions of times per month, then every byte you can trim off of every response makes a difference. Constantly wasting bandwidth to make debugging easier is wasting my clients money. Debug code is not release code.

If someone wants to look under the hood, well and good, they can paste it into something that reformats it for them, or just use firebug.

Answer 10

• Javascript files are compressed and not nicely formatted (jQuery anyone)?

• Images aren't distributed in a readable or layered format (photoshopm, layered pngs)

• SWF files are compiled.

• Binary files aren't easy to read in a hex editor.

• Html Source code isn't meant to be read from the client by the client. It's meant to be read by a machine and interpreted.

HTML is an instruction set. If you can compile it so that you strip out all the comments and compress down the elements

As was mentioned before, there's NO point to nicely formatted HTML, except for Debugging.

edit: Of course I'm not saying don't comment your code/html on the server-side. Comments should be stripped out of PRODUCTION code. They serve little or no purpose if you have access to the source.

Answer 11

I made a framework in PHP in which every item was an "element," the result of which was a big tree structure of elements (just like the HTML source). When outputted, the HTML was spot on 100% indented and separated by lines.. I called it "Pretty Print"

The moral of this story: nobody noticed except me.

One advantage is it makes it easier to debug. But modern day HTML debugging tools (like FireBug) do the formatting for you. Other than that, the only other advantage is pride.

Answer 12

Do you generate nicely formatted HTML?

Yes, yes, yes, and yes. There's absolutely NO reason to ever create a program which outputs badly formatted code - it doesn't cost you anything extra. *

If you need to reduce the code, then post process your output through a compactor/obfuscator/etc, but always generate good quality, readable, formatted code.

*EXCEPTION: In extraordinarily high performance situations it makes very good sense to directly output pre-compressed, obfuscated, etc code. In those cases use debug defines to add/remove formatting code so that you code it as though it's formatted, and can debug it as such, but you can remove that in production. Keep in mind, though, that eventually you'll have to debug non formatted/compressed/obfuscated code, and that'll be... fun... for some values of fun...

Answer 13

One of the two reasons that I am not crazy about Web development is the fact that HTML always looks like a code generator just vomited before exploding.

Everything I do is formatted nicely.

E x c e p t

t H I S !!!!

Answer 14

For some reason when reading this question Haml comes to mind. The Haml templating language always has well formatted output, you just can't write the templates any other way or it won't work. For .net developers theres now also the equivalent NHaml.

Not sure if this is entirely relevant to your question, but as far as server-side templates go, it does make things pretty.

Answer 15

If I'm building a web based system that has a prototype built by a designer before the coding begins, I always use the prototype as a template, but I even clean it up...

Design tools tend to have a good amount of code that can be simplified, removed or optomized.

The end result is well formatted HTML, both by what my application platform generates and the template created for my applications.

Answer 16

Yes and no. :-)

The HTML generated is nicely formatted, but there is a good chance that you will not see it. We have created an "output filter", if you will, in the base class of the page (.NET). All whitespace is stripped out to both lessen the size of the payload for the user download experience and for a bandwidth saving initiative.

Answer 17

Formatted, yes. Nice... rarely.

Every time I've tried to make generated HTML readable it's turned the generating code into a complete mess. I still try to do it, but it takes a lot of effort to get it right and there are always compromises.

If I can give one piece of advice here, never try to use an XML API for HTML. It might look nice to begin with, and you'll probably think setting a single boolean to indent all your code is great, but it's a Turing tar pit. I've tried every API listed in the PHP manual and every time the project ended up drowning in wrapper functions.

I'm starting to wonder whether it's better to leave HTML unindented...

Answer 18

I'm using inspect element features in firebug, chrome and others developer toolkits that display html code in a collapsible tree structure, not just a beautified version, so why bother. In addition to beautifying, it helps to find tag matching mistakes instantly, because the tree would not populate at all, if there is any. So personally I'm rarely using 'view source'.

I don't fight the code if output does not come beautiful 'for free'. If it costs you just the carriage return, I can do it. If it costs me refactoring of doesen lines of code - i just leave it as is.

When the code is refactored to certain level, and I see the places where a beautufying logic can naturally fit, and it costs me almost nothing then and only then I could implement some 'beautification' logic.

Answer 19

I generated nicely formatted HTML so long as doing so will not require my template files to become messy or unnecessarily complex.

We had a Smarty template file in our codebase a few weeks back that generated beautifully indented HTML code. It was absolutely perfect. The cost of this perfection was that the template file was completely unreadable.

That template file does not generate beautifully indented HTML code anymore.

Template files will be read by a human far more often than the outputted HTML. In the event that the outputted HTML is not perfect, Firebug will format it nicely. It's not so easy to format a mix of Smarty and HTML code within a template file nicely.

Answer 20

To keep my HTML code nicely formatted without adding clutter to the code where it's generated I just dump all the output in an output buffer, and as the very last step I use a fairly optimized formatter to add proper indentation right before displaying the HTML.