Formatting of dynamically generated HTML - does no one care?

Question

I have very little experience in web development, so this may be a very basic question.

It's just, from the limited experience I do have (a little PHP, and a little Ruby on Rails), it seems that the way dynamically generated HTML is formatted just "doesn't matter"; it ends up ugly, with weird indentation, and nobody cares because that isn't what the users sees.

Unless, of course, the user is a developer, or even just someone who's curious to look at a little HTML to try and learn something.

Maybe you don't know what I'm talking about; so let me give an example.

In a Ruby file I might have some code like this:

<h1>Heading</h1>

<div>
    <%= render :partial => '/layouts/body' %>
</div>

Then, in my "/layouts/_body.html.erb" file, I might have this:

<p>Here is some content!</p>

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

When all this gets rendered, it'll look fine. But if the user tries to view the source, the HTML will look pretty crappy:

    <h1>Heading</h1>

    <div>
        <p>Here is some content!</p>

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

    </div>

Obviously, this is not a big deal. And I can totally understand if the prevailing opinion is simply "It doesn't matter." But is that just the way it has to be? Does the readability of HTML not matter to anyone?

I'm just curious to know if this ever bugged anyone else enough for him/her to come up with a "solution" for it (obviously it would have to be someone who viewed it as a "problem" in the first place).

Answer 1

I never really care because if I want to look at HTML nicely formatted I can just run it though TIDY before I look at it.

Answer 2

You're right, it simply doesn't matter and when using different functions and classes it gets hard to avoid.

If you need the source code to be correctly formatted, most IDE's and programming orientated editors contain a facility to "tidy up" code into a correctly indented version.

Answer 3

Its bugged me in the past, but I also think that making it look unreadable has it's advantages. It is semi-obfuscated code, by proxy.

However, many tools (such as FireBug) will format the code nicely in a DOM structure, so for a developer it really doesn't matter that much either.

Answer 4

To view formatted html that is a little better, you can use the 'Inspect Element' feature of Google Chrome, or the firebug add-on in Firefox. I deal with dynamically generated html all the time (using php), and I never use 'view page source', these other tools work much better.

Answer 5

Well if you make an extra pass over the file to beautify it before sending it to the user you will:

1. Increase the file size (slower to download), and so give your users the feeling that your site is "lagging" and slow (which it is)

2. put extra overhead on your server, possibly maxing it out and slowing down even more

Besides helping one or two guys who read the source code (which can be automatically beautified in most editors), what do you hope to accomplish with this to make it worth it?

Answer 6

Semantically correct validated HTML is important; very important. A few spaces and line breaks are not important - any decent formatter can resolve this easily. Most of the time nothing apart from a browser will view it, so it really isn't that important compared to being validated.

Of course if you do take the time to indent and format it will look better to those of us who bother to look..

Answer 7

The prevailing opinion is "it doesn't matter" because if you do want to view it there are plenty of formatters available and further, that using an automated formatter is a waste of system resources.

For scenarios where it does, you might consider:

• Choosing a language that makes it easy to do
• Defining coding standards
• Using something like HTMLTidy, either to enforce coding standards or even to automatically format the HTML

Answer 8

It can be annoying when I am trying to look at the source to see where a div or style may be missing. I always try to generate any html with a decent layout because 9/10 it would be me that would have to look for bugs.

So, from my point of view it does matter, even if it is not number one priority it should come in as priority 2 or at the very least 3, in my opinion of course.

Nowadays, as a C# developer, I usually copy the source code to Visual Studio and do a ctrl+k+f to indent the code so it is far easier to see.

It is possible and most likely that other IDE's have similar functions available for developer that have this kind of minor annoyance.

Answer 9

If I was going to send my page through any tool, it would be a minifier.

Unfortunately, the browser's don't host a code beauty pageant :)

Answer 10

Almost all respectable ides have a shortcut for auto-formatting: Visual Studio - ctrl+k+f Netbeans - alt+shift+f Eclipse - ctrl+shift+f

So I think is no need for formatting.

Answer 11

Love it or not, HTML is a browser-readable format, not necessarily a user-readable one. Tools (WYSIWIG editors, markup languages such as Markdown, MediaWiki, etc. and your favorite web framework) should be used to used to generate HTML. Lots of programs are available to make HTML readable to developers; see the other posts.

XHTML and XML-generating tools hold some promise as regards readability since their output can be post-processed more easily (by browsers' source view, for example) to obtain proper indentation, but (IMHO) aren't quite mature yet, judging by the number of so-called "W3C XHTML-compliant" websites that really aren't. Newer versions of, e.g., WordPress make an effort, but their extensions, plugins etc. are full of bad (X)HTML, not even considering the amount of JavaScript they produce. (How are we going to indent that?)

Advice for now:

1. (X)HTML-generating code should be readable for developers. But please do use one that at least generates something quasi-readable.
2. Learn your browser's search function and use regexps.
3. HTMLTidy, in its many guises, is your friend. Use it in tests and compare its input to its output

Answer 12

The HAML templating engine was specifically created with the goal of generating properly indented, nested and formatted HTML. There's no reason why other templating engines couldn't do the same.

So, yes, it is just laziness.

Answer 13

The important part is that HTML generating code is neat and readable. As in your example, any function calls, includes, etc should be in proper indentation with the rest of the code.

Beyond that, it doesn't matter as long as the code is properly formed and valid XHTML. The XHTML spec doesn't define whitespace, but it does define proper closing tags etc.

Basically, if the output code validates and the server side code is readable, everything is good. (Assuming, of course, that your application also works.)