Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you indent your HTML? [duplicate]

Given the HTML generated by my application.

function pagination(){
  echo "<ul>\n";

  for($i = 1; $i <= 10; $i++)
    echo "\t<li>...</li>\n";

  echo "</ul>\n";
}
?>
<div>
  <?php pagination(); ?>
</div>

If I add another container DIV, this doesn't produce correctly indented code.

Is there any solution for the function to somehow know how many \t 's or spaces to add, or somehow automatically indent the html?

like image 658
thelolcat Avatar asked Feb 29 '12 02:02

thelolcat


1 Answers

Amazing question.

9 answers and 3 comments so far, and looks like nobody bothered to read the question body, but just repeated some gospel triggered by a keyword in the title - a most preferred manner to answer questions on the blessed site of stackoverflow.

Yet the question not that simple/one-layered.
I have to admit, it's ambiguous itself. So, we have to dig it out.

1) How do you indent your HTML?

Use templates, dude. Use templates. The only answer.

2) Is there any solution for the function to somehow know how many \t 's or spaces to add, or somehow automatically indent the html?

Of course there isn't.
PHP knows nothing of HTML, indents and such.
Especially when no HTML is ready yet(!)

3) If I add another container DIV, this doesn't produce correctly indented code.

The key question of the question.
The question for sake of which the question were asked.

Yet hardest of them all.

And the answer is kind of ones I showed total disagreement with, hehe:
Although relative order of tags is important, for the resulting large HTML it is possible to move some blocks out of row:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Hello</h1>
    <div>
<!-- news list -->
<div>
  <ul>
    <li>1..</li>
    <li>2..</li>
    <li>3..</li>
    <li>4..</li>
  </ul>
</div>
<!-- /news list -->
    </div>
    <div>
<!-- pagination -->
<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Black</li>
</ul>
<!-- /pagination -->
    </div>
</body>
</html>

It will let you have proper indention in the meaningful blocks, yet keep the main HTML in order.
As a side effect it will keep your lines on the screen :)

To keep good indentation inside sub-templates, I'd strongly suggest using PHP-based templates. Not ugly HEREDOC for goodness' sake!
Here is only one rule to follow with PHP templates:
always keep PHP blocks to the left side. That's all.
To keep indentation between PHP nested blocks, just indent them inside <? ?>

Example:

<ul>
<? foreach ($thelist as $color): ?>
  <li>
<?   if ($color == $current): ?>
    <b><?=$color?></b>
<?   else ?>
    <a href="?color=<?=$color?>"><?=$color?></a>
<?   endif ?>
  </li>
<? endforeach ?>
</ul>

This will produce correctly indented HTML, while keeping order of both HTML and PHP in the template, making developer's life easer both at development and debugging.

Do not listen to anyone who says "no need to indent your code at all!". They are merely hobbyists, not the real developers. Anyone who have an idea of what debugging is, who had hard times debugging their code, would tell you that proper indentation is essential.

like image 76
Your Common Sense Avatar answered Oct 24 '22 12:10

Your Common Sense