3 Ways to add Conditional and Loop within HTML

Last Updated on Mar 21, 2023

Introduction
First Way
Second Way
Third Way
Conclusion

Key takeaways

Introduction

Loops and Conditionals are two pieces of code that we keep writing so it's good to make sure our code is readable. When we write PHP withing HML it becomes even more important. Now we are going to learn about different ways that we can write PHP conditionals and loops within HTML and I will share the advantages and disadvantages of each one.

First let's see what we are going to do.

we have an array of names:

$names = ['pratham','simon','favor','oliver','amir'];

We want to write this list as a HTML list. so the final HTML code would look like this:

<ul>
    <li>pratham</li>
    <li>simon</li>
    <li>favor</li>
    <li>oliver</li>
    <li>amir</li>
</ul>

so let's start writing the loop in different ways.

First Way

The first possible way is to write the loop and echo the list items like string.

<?php
foreach($names as $name){
    echo '<li>' . $name . '</li>';
}
?>

the issue with this is that in a lot of IDEs if I write my code like this, I will not get autocompletion and tag closure and other useful features that I would get when I'll be writing pure HTML. so very soon it gets tricky.

Second Way

the second way is somehow a solution to the problem of the first way. so instead of echoing the HTML tags we will keep them outside the PHP code. like this:

<?php foreach($names as $name){ ?>
<li> <?php echo $name ?> </li>
<?php } ?>

this way we can enjoy all the features that our IDE offers for HTML and we still use the power of PHP. but the problem with this way is the last line:

<?php } ?>

Just a single closing bracket! for now for a simple example like this we know exactly what this is for but imaging a code that you have a loop and inside the loop you have a conditional and so on. very soon you will have 10 single brackets and you have no idea what they are for. and the solution for that is the third way.

Third Way

in this way, instad of using the typical opening and closing brackets for our loops and conditions we use the : and endfor and endif structure. so instead of writing:

<?php foreach($names as $name){ ?>

<?php } ?>

we will write

<?php foreach($names as $name):  ?>

<?php endforeach; ?>

and in case of our example the full code would look like this

<?php foreach($names as $name):  ?>
<li> <?php echo $name ?> </li>
<?php endforeach; ?>

this way even if we have 10 loops and conditions we know that one is for ending the loop and one is for ending the conditionals etc. it's much more readable and much more maintainable.

https://youtu.be/fwKmUrGOKqY