Best IT Recipes

How to indent PHP / HTML mixed code?

When mixing PHP and HTML, which style should I use as an indent? Am I indenting so that the output HTML has the correct indentation, or so that the PHP / HTML combination looks properly formatted (and therefore easier to read)?

For example, let's say that I have lines of lines of lines of output foreach . Which one is lower?

The PHP / HTML connection looks right:

 <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 output 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 found that when I come across this situation (quite often), I don't have a standard style to use. I know that there can be no “right” answer, but I would like to hear thoughts from other developers.

+57
html php indentation
Jul 20 '09 at 20:30
source share
6 answers

Each PHP and HTML must be indented so that they are correct in relation to themselves in the source form independently of each other and in the form of a 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>
+45
Jul 20 '09 at 20:33
source share

I also pondered this question often, but then I realized who cares about what the HTML output looks like? Your users should not look at your HTML in any way. This is for YOU to read, and maybe a couple of other developers. Keep your source code as clean as possible and forget how the output looks.

If you need to debug the output, use the Chrome developer tools, Firebug, or even F12 tools.

+9
Jul 21 '09 at 5:31
source share

I usually put opening php tags at the beginning of the line, but the indentation all inside the tags matches the html formatting. However, I do not do this for simple echo expressions, as I use short tags. I think this makes it easier when viewing a file to find all the ads.

  <table> <? foreach ($foo as $bar): ?> <tr> <? foreach ($bar as $baz): ?> <td><?=$baz?></td> <? endforeach ?> </tr> <? endforeach ?> </table>
+6
Jul 20 '09 at 20:38
source share
  • The direct answer to your question is: if you need to read HTML output often, it would be nice to output HTML indentation well. But the more common case is that you need to read the php source code, so it is important that the source is easy to read.
  • An alternative to the two options you specify: see chaos or tj111's answer .
  • Still better in my opinion: don't mix HTML and php, use the template engine instead.
+4
Jul 20 '09 at 20:40
source share

You can always use a few spaces to facilitate readability. Based on the indentation of chaos:

 <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 drawback to this is that if you have a lot of mixed code, it can make your document twice as long, which leads to a larger scroll. Although, if you have such mixed code, you can consider the template engine.

+2
Jul 20 '09 at 20:41
source share

You do not have to worry about backward markup in your production environment. Also, you should not use Tidy or other HTML cleaners. Acceptable use cases are, for example. when you allow HTML input (but use Markdown instead), although they are rare.

Most often, HTML filter filters are abused to hide underlying code issues. Not. Correct your markup manually.

If you need to backtrack your code only in the development environment, you can use any of the above. However, be careful that these libraries try to correct your markup (that their main purpose, indentation, is a byproduct). I wrote an indentation tool based on the Dindent regex .

Dindent transforms the markup as follows:

 <!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>

For 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 sanitize or otherwise interfere with your code other than adding indentation. This will simplify your development / debugging. Not for production.

+2
Feb 19 '14 at 22:23
source share


More articles:


All Articles