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.

This is an interesting question. I'm not aware of how you could achieve that. — webdad3, Apr 09 '11 at 18:09

Dominic Barnes · Accepted Answer · 2011-04-09T18:16:36.510

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.

What Dominic said: if your goal is to have attractive-looking HTML so you can more easily debug, Firebug will do that for you (and a million other useful things). Otherwise, it doesn't really matter how the code looks... the browser is happy, regardless. — Eric, Apr 09 '11 at 18:15

score 6 · Answer 2 · answered Apr 09 '11 at 18:12

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

Phoenix · Answer 3 · 2011-04-09T19:08:25.090

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.

Hassan Kazem · Answer 4 · 2013-08-20T18:04:39.710

0

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>
';
?>

edited Aug 20 '13 at 18:04

answered Aug 20 '13 at 17:22

Hassan Kazem

81
1
6

I think you're missing code; I'm not sure how this answers the question. – Chris Forrence Aug 20 '13 at 17:58

score 0 · Answer 5 · answered Apr 09 '11 at 18:16

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>';

score 0 · Answer 6 · edited Feb 20 '12 at 11:45

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

PHP - indent block of html

6 Answers6

Linked