Clean HTML Sourcecode with PHP

Question

i'm looking for a way to keep my HTML code output via PHP clean.

If you look into the source code, the result looks like this:

<section><div class="card">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
  <p class="card-text">With supporting text below as a natural lead-in</p>
  <a href="#" class="btn btn-primary">Go somewhere</a> </div>
  </div>
</section><section><div class="card">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
  <p class="card-text">With supporting text below as a natural lead-in content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a> </div>
  </div></section>

I want it to look like this:

<section>
  <div class="card">
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in</p>
        <a href="#" class="btn btn-primary">Go somewhere</a> </div>
    </div>
</section>
<section>
  <div class="card">
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in</p>
        <a href="#" class="btn btn-primary">Go somewhere</a> </div>
    </div>
</section>

this is my php output code:

ob_start();
include_once ROOT.'/global/header.php';

print $content_output; // the included files
include_once ROOT.'/global/footer.php';

$output = ob_get_contents();
ob_end_clean();

echo $output;

The reason for this is that I am building a scaffold where blocks are created for a website. For example the start page consists of block2, block7, block1 and block5. At the end the customer gets a clean HTML, which consists of the above mentioned blocks.

Answer 1

You can use DOMDocument to process & format HTML. DOMDocument is tough to use & much of it could use better documentation.

If all you want to do is pretty print the html, something like this should do what you need:

$html = '<div>Happy Coding todayyy</div>';
$doc = new \DOMDocument($html);
$doc->formatOutput = true;
$cleanHtml = $doc->saveHTML();

You could also look for an html beautifier, but it doesn't look like there's any particularly mature projects for that.

I also want to add that running DOMDocument on every single request to format html adds additional overhead. More cpu cycles means more energy, so something to be mindful of. You probably won't see any real change in script execution time though.

Some existing projects that might make DOM work easier for you. Things to maybe try if DOMDocument doesn't do quite what you want (I'm not 100% sure the code above will do the trick, nor do I know if any of these repos can definitely solve your problem):

• Voku's port of simple_html_dom <- simple_html_dom has been around for awhile. Haven't tried Voku's port, but his repos that I've reviewed are usually very good quality.
• A DomDocument extension by ivopetkov <- I think this one is the most mature
• Another option by scotteh <- Don't know anything about it
• A DomDocument extension by me. Stable, small but nice feature set

Answer 2

If your PHP fully renders the HTML, why would you want it to look good? It is not like any other developer is going to look inside the compiled HTML, right?

The browser does not care how your HTML is formatted, if it is valid HTML, it is valid HTML. This should also not affect the SEO of your webpage.

In the case you are manually writing HTML in PHP code. You should avoid echoing full HTML strings. You can do this by using as much inline PHP as you can. For example:

<?php if(//Statement): ?>
  <h1><?= $test ?></h1>
<?php endif; ?>

This way you know PHP is not going to affect the indentation of the markup.