PHP - indent block of html

php syntax indentation line-breaks

11,083

Solution 1

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.

Solution 2

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

Solution 3

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.

11,083

Author by

Web_Designer

Warning: Stack overflow was a deep pit for me. I wanted to be esteemed by others. But what is highly esteemed by others is detestable in the sight of God. Jesus said, "What would it profit you to gain the whole world and forfeit your soul?" God is patient, but He never fails to fulfill His word. Judgement will come where everyone will be repaid for their deeds. Read the Bible and give up everything to obey Jesus.

Updated on June 04, 2022

Comments

Web_Designer almost 2 years

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.

webdad3 about 13 years

This is an interesting question. I'm not aware of how you could achieve that.

Eric about 13 years

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.
Chris Forrence over 10 years

I think you're missing code; I'm not sure how this answers the question.