How to properly indent PHP/HTML mixed code?
PhpHtmlIndentationPhp Problem Overview
When mixing PHP and HTML, what is the proper indentation style to use? Do I indent so that the outputted HTML has correct indentation, or so that the PHP/HTML mix looks properly formatted (and is thus easier to read)?
For example, say I have a foreach loop outputting table rows. Which one below is correct?
PHP/HTML mix looks correct:
<table>
<?php foreach ($rows as $row): ?>
<tr>
<?php if ($row->foo()): ?>
<?php echo $row ?>
<?php else: ?>
Something else
<?php endif ?>
</tr>
<?php endforeach ?>
</table>
Outputted HTML looks correct:
<table>
<?php foreach ($rows as $row): ?>
<tr>
<?php if ($row->foo()): ?>
<?php echo $row ?>
<?php else: ?>
Something else
<?php endif ?>
</tr>
<?php endforeach ?>
</table>
I've found that when I run into this situation (quite frequently), I don't have a standard style to use. I know that there may not be a "correct" answer, but I'd love to hear thoughts from other developers.
Php Solutions
Solution 1 - Php
The PHP and the HTML should each be indented so that they are correct with respect to themselves in source form, irrespective of each other and of outputted form:
<table>
<?php foreach ($rows as $row): ?>
<tr>
<?php if ($row->foo()): ?>
<?php echo $row ?>
<?php else: ?>
Something else
<?php endif ?>
</tr>
<?php endforeach ?>
</table>
Solution 2 - Php
I often pondered this question too, but then I realized, who cares what the HTML output looks like? Your users shouldn't be looking at your HTML anyway. It's for YOU to read, and maybe a couple other developers. Keep the source code as clean as possible and forget about what the output looks like.
If you need to debug the output, use Chrome Developer Tools, Firebug, or even F12 Tools.
Solution 3 - Php
I generally put opening php tags at the beginning of the line, but indent whatever is inside the tags to match the html formatting. I don't do this, however, for simple echo statements since I use short-open tags. I think it makes simpler it when browsing through the file to find all the declarations.
<table>
<? foreach ($foo as $bar): ?>
<tr>
<? foreach ($bar as $baz): ?>
<td><?=$baz?></td>
<? endforeach ?>
</tr>
<? endforeach ?>
</table>
Solution 4 - Php
- Direct answer to your question: If you need to read the HTML output often, it might be a good thing to output well indented HTML. But the more common case will be that you need to read your php source code, so it is more important that the source is easily readable.
- Alternative to the two options you mentioned: See chaos' or tj111's answer.
- Better still in my opinion: Don't mix HTML and php, use a template engine instead.
Solution 5 - Php
You can always use a bit of whitespace too to help readability. Building on chaos' indentation:
<table>
<?php foreach ($rows as $row): ?>
<tr>
<?php if ($row->foo()): ?>
<?php echo $row ?>
<?php else: ?>
Something else
<?php endif ?>
</tr>
<?php endforeach ?>
</table
The only downside with this is if you have a lot of mixed code it can make your document twice as long, which makes for more scrolling. Although if you have this much mixed code you may want to consider a templating engine.
Solution 6 - Php
You should not be bothered about markup indentation in the production environment. Neither should you use Tidy or other HTML purifiers. There are valid use cases, e.g. when you allow HTML input (but consider using Markdown instead), though these are rare.
Most often HTML beautifiers-filters are abused to hide the underlying issues with the code. Don't. Correct your markup manually.
If you need to indent your code only in the development environment, you can use either of the above. However, beware that these libraries will attempt to fix your markup (that's their primary purpose; indentation is a by-product). I've written Regular Expression based indentation tool Dindent.
Dindent will convert markup like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
console.log('te> <st');
function () {
test; <!-- <a> -->
}
</script>
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div><table border="1" style="background-color: red;"><tr><td>A cell test!</td>
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
<td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
ll</td></tr></table></td></tr><tr><td>Test <span>Ce ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
</body>
</html>
To this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
console.log('te> <st');
function () {
test; <!-- <a> -->
}
</script>
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<table border="1" style="background-color: red;">
<tr>
<td>A cell test!</td>
<td colspan="2" rowspan="2">
<table border="1" style="background-color: green;">
<tr>
<td>Cell</td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td>
<input>
<input>
<input>
</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Ce ll</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Test <span>Ce ll</span></td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Dindent will not attempt to sanitise or otherwise interfere with your code beyond adding indentation. This is to make your development/debugging easier. Not for production.