Do you bother with markup formatting?

Question

I am a front end guy who is getting more and more into scripting and that being the case, I like my regurgitated markup to kind of look nice.

I ran a loop over some database values for a list and while most sites would just show a big old concatenated slew of <LI> tags back to back, I kind of like them \r\n distanced with proper \t tabbing. Weird thing is, the first list member renders like LI> rather than <LI> about 1 out of 5 page serves.

Anyone seen this? Should I not bother? Am I formatting the loops badly? Here's an example:

while ($whatever = mysql_fetch_array($blah_query)){
    echo "\t\t\t\t\t\t";
    echo "<li>\n";
    echo "\t\t\t\t\t\t";
    echo '<a href="#'.$whatever['name'].'" id="category_id_'.$whatever['id'].'">';
    echo ucfirst($whatever['name']);
    echo "</a>\n\t\t\t\t\t\t</li>\n";
}

Answer 1

this seems as if the goal is to output a page source that types out the proper indentions for you? at least for right now to debug and be easier read?

while ($whatever = mysql_fetch_array($blah_query)){
    echo "\t\t\t\t\t\t";
    echo "<li>\n";
    echo "\t\t\t\t\t\t";
    echo '<a href="#'.$whatever['name'].'" id="category_id_'.$whatever['id'].'">';
    echo ucfirst($whatever['name']);
    echo "</a>\n\t\t\t\t\t\t</li>\n";
}

since you're using PHP to echo out those HTML codes, just type them as you would see them on the page source

while($whatever = mysql_fetch_array($blah_query)){
    //When you want a new line, just hit enter. PHP will echo the carriage returns too
    echo'
                        <li>
                            <a href="#'.$whatever['name'].'" id="category_id_'.$whatever['id'].'">ucfirst($whatever['name'])</a>
                        </li>
';
}

this is how I would do it so that it would line break every time including the first time incase I have a left over "</div>" or some other closing tag without a line break after it.

it will output a nicer clean list item that tabbed in with the breaks

Answer 2

Removing spaces between code can significantly decrease the sizes of files especially if your code is of significant length. By removing any indenting and minimising spaces within files, you can maximise connection speeds to your site by delivering the requested pages considerably faster than if you were indenting. This adds up if your website is receiving any reasonable amount of traffic, as each page served may be made more efficient by removing 5-10kb of spacing. In the long run, if you're serving users pages regularly, the added network strain can be minimised by ensuring your code uses as little of the space as possible.

Although, if you happen to be developing in a private environment, it's good practice to use indenting for debugging purposes. The style of the code allows you to follow it's logic and flow in comparison to minified code that lacks legibility.

Answer 3

Typically, removing the spaces between elements, is a way to 'save bandwidth' for high traffic sites. It is something akin to minifying JavaScript or CSS. If you are still in 'testing/development' mode, then sure, indent it, so you can see if you are making mistakes. However in any production environment, with any appreciable traffic, you should 'minify' you html too.

This is not just to cut back on the monetary cost of bandwidth. This is to cut down on the system resources cost as well. It takes a little longer to send a 45k file (with spaces) and it does a 29k file (without spaces). Therefore, your server can push it out faster, which in turn means it can free up a open connection faster, which means it can accept a new incoming connection now. There are lots of talks dedicated to this idea, of minification. Minification, coupled with compression, is the leading reason in why webpages are held to high standards for loading quickly. The less you send out, the faster you can do so, the more people you can get it too.

Answer 4

I am like you. Everything must be clean and tidy.

I would recommend using XSL as a templating engine. This autmatically make all your HTML properly formatted if you set it to formatOutput = true.

I use those setting for my local copy, but for the live copy I set XSL to use no fromatting and white space. This returns all the HTML on one line. This saves about 20-30% or whatever of the HTML file size. So you save bandwidth and get quicker load times. Probably slightly quicker for browsers to render too.

See:

http://www.php.net/xsl

$xsl->preserveWhiteSpace = false;
$xsl->formatOutput = TRUE OR FALSE;

Just looking at my code the above is what I use to either set to indent nicely, or output all on one line.