Welcome to a beginner’s tutorial on how to display PHP variables in HTML. So you have some PHP variables that you want to “insert” into an HTML element?
There are a couple of ways to display PHP variables in HTML:
- Use delimiters to weave between PHP and HTML –
<p><?php echo $VAR; ?></p>
- Use the PHP short tag –
<p><?=$VAR?></p>
- For multiple variables, we can echo an entire string of HTML.
echo "<input type='$TYPE' value='$VAL'>";
echo "<p>{$ARRAY["KEY"]} - {$ARRAY["KEY"]}<p>";
- Alternatively, we can do a formatted print –
printf("<p>%s</p>", $VAR);
That shall cover the basics, but let us walk through more examples in this guide – Read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
First, here is the download link to the example source code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
DISPLAYING PHP VARIABLES
All right, let us now get started with the example of displaying PHP variables in HTML.
EXAMPLE 1) USING PHP DELIMITERS
<?php
// (A) THE VARIABLES
$first = "foo";
$second = "bar";
?>
<!-- (B) OUTPUT VARIABLES -->
<p><?php echo $first; ?></p>
<p><?php echo $second; ?></p>
Ever since day 1 of learning PHP, we have been taught to “start a PHP script with <?php
and close it with ?>
“. That is correct, but more accurately – “PHP will only process the parts enclosed in <?php
and ?>
, the rest will output as-it-is”. So yes, at any point, we just “switch” into <?php
and use echo print print_r
to output the variables.
EXAMPLE 2) PHP SHORT TAGS
<?php
// (A) THE VARIABLES
$var = "foo";
$arr = ["Apple", "Beet", "Cherry"];
?>
<!-- (B) OUTPUT VARIABLE -->
<p><?=$var?></p>
<!-- (C) COMBINING THE USE OF DELIMITER AND SHORT TAG -->
<ul>
<?php foreach ($arr as $fruit) { ?>
<li><?=$fruit?></li>
<?php } ?>
</ul>
It is a real hassle to be switching between PHP and HTML using the delimiter all the time, so just use the “shorthand” <?=$var?>
to quickly output a single variable.
EXAMPLE 3) ECHO HTML STRING
<?php
// (A) ECHO STRING OF HTML
$first = "foo";
$second = "bar";
echo "<p>$first $second</p>";
// (B) DUMMY ARRAY
$person = [
"name" => "Jon Doe",
"email" => "jon@doe.com"
];
// (C) THIS WILL NOT WORK!
// echo "<p>$person["name"] - $person["email"]</p>";
// (D) WRAP VARIABLES IN CURLY BRACES
echo "<p>{$person["name"]} - {$person["email"]}</p>";
This should be self-explanatory… Things can get pretty ugly when you have multiple variables to output. So the smarter way is to just echo the entire string of HTML, with the variables “embedded” inside.
EXAMPLE 4) FORMATTED PRINT
<?php
// (A) DUMMY ARRAY
$person = [
"name" => "Jon Doe",
"email" => "jon@doe.com"
];
// (B) FORMATTED PRINT
foreach ($person as $k=>$v) {
printf("<div><strong>%s:</strong> %s</div>", $k, $v);
}
// (C) THE USEFUL PARTS...
$val = 123.45678;
printf("<p>ROUND OFF 2 DECIMAL PLACES %0.2f</p>", $val);
$val = 0.432;
printf("<p>PAD UP TO 5 ZEROS, 2 DECIMAL PLACES %08.2f</p>", $val);
$val = "123";
printf("<p>PAD WITH DOTS %'.10d</p>", $val);
printf()
function may just seem like a roundabout and confusing way of doing echo
. But take some time to run through the reference manual (links below), it provides a lot of ways to format the string to your liking – Padding with numbers, alphabets, restricting decimal places, alignment, and a lot more.
EXTRA BITS & LINKS
That’s all for the guide, and here are some extras that may be useful to you.
LINKS & REFERENCES
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Danke, mein Lehrer ist unfähig, jetzt habe ich endlich Ahnung.