PHP - indent block of html

Question

Let's say I have the following code:

<?php
echo "<div id=\"root\">";
echo "<div id=\"child_of_root\">";
echo "<img src=\"picture1.png\">";
echo "<img src=\"picture2.png\">";
echo "<img src=\"picture3.png\">";
echo "<img src=\"picture4.png\">";
echo "<img src=\"picture5.png\">";
echo "</div>";
echo "</div>";
?>

If I ran this the following HTML would be rendered all inline without any line breaks:

<div id="root"><div id="child_of_root"><img src="picture1.png"><img src="picture2.png"><img src="picture3.png"><img src="picture4.png"><img src="picture5.png"></div></div>

If I ran the following code:

<?php
echo "<div id=\"root\">\n";
echo "\t"."<div id=\"child_of_root\">\n";
echo "\t\t"."<img src=\"picture1.png\">"."\n";
echo "\t\t"."<img src=\"picture2.png\">"."\n";
echo "\t\t"."<img src=\"picture3.png\">"."\n";
echo "\t\t"."<img src=\"picture4.png\">"."\n";
echo "\t\t"."<img src=\"picture5.png\">"."\n";
echo "\t"."</div>"."\n";
echo "</div>";
?>

It wound render the following beautiful HTML:

<div id="root">
  <div id="child_of_root">
    <img src="picture1.png">
    <img src="picture2.png">
    <img src="picture3.png">
    <img src="picture4.png">
    <img src="picture5.png">
  </div>
</div>

Is there a way I could achieve these beautiful indents without having to put \t before every line I want to indent. I mean so that I can indent a block instead of one line.

Answer 1

First of all use:

echo '<img src="picture1.png">';

instead of

echo "<img src=\"picture1.png\">";

Code is much more clear.

If you want to return HTML code in PHP, there is no other way to do indents.

However why you want to print HTML code in PHP ? Can't you just exit PHP block here ?

<?php
// do something and exit PHP block
?>
<div id="root">
  <div id="child_of_root">
    <img src="picture1.png">
    <img src="picture2.png">
    <img src="picture3.png">
    <img src="picture4.png">
    <img src="picture5.png">
  </div>
</div>
<?php
// do again something in PHP
?>

Answer 2

Here is an example that worked for me:

<?php 
echo '
<div style="margin-left: 100px">
    <div id="root">
        <div id="child_of_root">
            <img src="picture1.png" /><br />
            <img src="picture2.png" /><br />
            <img src="picture3.png" /><br />
            <img src="picture4.png" /><br />
        </div>
    </div>
</div>
';
?>

Answer 3

If you put your picture ids in an array, you can do a foreach() loop that echoes each of the images with the new line and tab characters in front without having to code it by hand. E.g.

echo '<div id="root">\n';
echo '\t<div id="child_of_root">\n';
    $images = array('picture1', 'picture2', 'picture3', 'picture4', 'picture5');
    foreach ($images as $image) {
        echo '\t\t<img src="'.$image.'.png">\n';
    }
echo '\t</div>\n';
echo '</div>';

Answer 4

I tried Tidy, but for some reason no matter how I configure it, it won't seem to indent. However, somebody else has written some code that will:

PHP function for cleaning up HTML and JavaSctipt code

There are also some intelligent guidelines for avoiding the need for such code:

Get beautifully indented HTML with your PHP templates: two rules to follow

Also: fredsco.com/programming/indenting-html-output-in-php

Answer 5

For one thing, it's HTML markup, so it doesn't matter how it's formatted, the browser renders it all the same. Using a tool like Firebug can give you a much better way of navigating HTML in your web-pages.

On another note, you don't have to continually use echo commands to output HTML. PHP is more-or-less a templating language in itself, so you could just exit PHP, output your HTML in your own format, and then re-enter PHP.

For example:

<?php // ... your code before this ... ?>
<div id="root">
    <div id="child_of_root">
        <img src="picture1.png">
        <img src="picture2.png">
        <img src="picture3.png">
        <img src="picture4.png">
        <img src="picture5.png">
    </div>
</div>
<?php // ... your code after this ... ?>

If your output needs some level of dynamism to it, you can always use PHP to add in loops and whatnot.

<?php // ... your code before this ... ?>
<div id="root">
    <div id="child_of_root">
        <?php for ($x = 1; $x <= 5; $x++): ?>
            <img src="picture<?php echo $x; ?>.png">
        <?php endfor; ?>
    </div>
</div>
<?php // ... your code after this ... ?>

If you still need formatted HTML, maybe for displaying code samples or something, you'll either have to continue manually using \n and \t, or you could check out the PHP Tidy extension, which is built for formatting HTML.

Answer 6

I would suggest using HEREDOC for this. It's best for holding large blocks of HTML and Text that you wish to retain formatting:

//Note that I used spaces and not tabs, but that's only due to the post editor.
echo <<<HTML
<div id="root">
     <div id="child_of_root">
          <img src="picture1.png">
          <img src="picture2.png">
          <img src="picture3.png">
          <img src="picture4.png">
          <img src="picture5.png">
     </div>
</div>
HTML;

You can also do

$variable = <<<OPENINGTAG
text
    text
text
OPENINGTAG;

echo $variable;

Variables will also be parsed inside HEREDOC strings. Just be careful of the ending tag, it's very temperamental. No spaces before or after on it's line. I don't even know if comments are allowed.

Here it is using Dominic Barnes example with a loop:

<?php
echo <<<HTML
<div id="root">
    <div id="child_of_root">
HTML;

for ($x = 1; $x <= 5; $x++)
{
echo <<<HTML
            <img src="picture$x.png">
HTML;
}

echo <<<HTML
    </div>
</div>
HTML;
?>

could also do:

<?php
$output = <<<HTML
<div id="root">
    <div id="child_of_root">
HTML;

for ($x = 1; $x <= 5; $x++)
{
$output .= <<<HTML
            <img src="picture$x.png">
HTML;
}

$output .= <<<HTML
    </div>
</div>
HTML;

echo $output;
?>

NOWDOC is also available in 5.3+ which act as single quoted strings with no variable parsing.

HEREDOC and NOWDOC strings can be concatenated on to in the same way as normal strings.