Any programmer will tell you how important it is to maintain readable code. Not only does this make updating easier for the original coder and anyone that follows, but it makes commenting much more sparsely needed.

Naturally, this is all easier said than done. That's never truer than when your code consists of two different languages intertwined. For instance, adding just a few PHP features to HTML can quickly have your entire file looking more like PHP than HTML.

Fortunately, PHP offers us a way around this when it comes to control structures like if, for, and switch. Using a bit of alternative syntax can make your code more easily readable regardless of whether you are a PHP programmer dabbling in web design or a web designer dabbling in programming.

Typical syntax control structures in PHP

Note: If this section gets too confusing, skip to the next section. This is only to demonstrate why this is a problem.

Here is a typical example of an if in PHP.

<?php
if ($currentTime == "noon")
  {
    /* Do some stuff... */
  }
  elseif ($currentTime == "midnight")
{
    /* Or do something else... */
  }
  else
  {
   /* Otherwise, just do this... */
  }
?>

Not too bad, right? Well, not until we start sprinkling in some HTML. First, let's add some output without any HTML.

<?php
if ($currentTime == "noon")
  {
    echo "It's noon.";
  }
  elseif ($currentTime == "midnight")
{
    echo "It's midnight.";
  }
  else
  {
   echo "It's either AM or PM.";
  }
?>

Let's say we want these sentences (at least, that is, the one that gets displayed) to be inside of a single paragraph. That means we need to use <p> and </p> to our code.

The question is, where do we add them? One option is that we can put them outside the PHP.

<p>
<?php
.
  .
  .
?>
</p>

That will work fine as it is, but we may need to do different things with each possible output. For example, maybe one sentence needs to be bolded or italicized. So our other option is to place the tags within our PHP code.

<?php
if ($currentTime == "noon")
  {
    echo "<p>It's noon.</p>";
  }
  elseif ($currentTime == "midnight")
  {
    echo "<p>It's midnight.</p>";
  }
  else
  {
    echo "<p>It's either AM or PM.</p>";
  }
?>

This isn't too bad, but what if we need to center those paragraphs? This is where our HTML starts to look pretty brutal as we will have to start backslashing our double-quotes to keep our PHP from getting parse errors.

<?php
if ($currentTime == "noon")
  {
    echo "<p align=\"center\">It's noon.</p>";
  }
elseif ($currentTime == "midnight")
  {
   echo "<p align=\"center\">It's midnight.</p>";
  }
  else
  {
    echo "<p align=\"center\">It's either AM or PM.</p>";
}
?>

Pretty ugly, huh? I'll stop there, but this doesn't even begin to address the line-break issue. Suffice to say, the more HTML we use the more ridiculous our code is going to look.

But cheer up – there is a better way!

Alternative syntax for control structures in PHP

The good news is that with PHP there is almost always more than one way to code a cat. When it comes to control structures, that even means making code that looks more like HTML coding and less like programming.

Instead of looking like this,

<?php
if ($currentTime == "noon")
  {
    /* Do some stuff... */
  }
  elseif ($currentTime == "midnight")
{
    /* Or do something else... */
  }
  else
  {
   /* Otherwise, just do this... */
  }
?>

we can code the same thing so that it looks like this.

<?php if ($currentTime == "noon"): ?>
  <!-- Do some stuff... -->
<?php elseif ($currentTime == "midnight"): ?>
  <!-- Or do something else... -->
<?php else: ?>
  <!-- Otherwise, just do this... -->
<?php endif; ?>

Do you see the subtle difference in the syntax of our control structures? Instead of enclosing everything in braces, we are ending condition checks with colons and finish things up with endif.

The reason this is so handy for HTML is demonstrated in the comments. Notice how those are HTML comments instead of PHP comments now? That's because the chunks of code we put there can be good old HTML, tags and all!

Now our final code is changed from the complicated and ugly

<?php
if ($currentTime == "noon")
  {
    echo "<p align=\"center\">It's noon.</p>";
  }
elseif ($currentTime == "midnight")
  {
   echo "<p align=\"center\">It's midnight.</p>";
  }
  else
  {
    echo "<p align=\"center\">It's either AM or PM.</p>";
}
?>

to something much more readable.

<?php if ($currentTime == "noon"): ?>
  <p align="center">It's noon.</p>
<?php elseif ($currentTime == "midnight"): ?>
  <p align="center">It's midnight.</p>
<?php else: ?>
  <p align="center">It's either AM or PM.</p>
<?php endif; ?>

Not only is that more readable, but it's much more compact. You can even use multiple lines of HTML in those chunks, something that would have been troublesome before.

Conclusion

Although we only used ifs in the examples above, alternative syntax is available for plenty of other control structures. More details of this are available on PHP.net.

This is hopefully another example to you web designers out there just how easy it can be to implement PHP without being a hardcore programmer. By simply using this syntax for control structures, you will single-handedly avoid some of the most common pitfalls of PHP while keeping your HTML looking like HTML.