4 Ways To Display PHP Variables in HTML (Simple Examples)

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 – <?php echo $VAR; ?>
Use the PHP short tag – <?=$VAR?>
For multiple variables, we can echo an entire string of HTML.
- echo "<input type='$TYPE' value='$VAL'>";
- echo "{$ARRAY["KEY"]} - {$ARRAY["KEY"]}";
Alternatively, we can do a formatted print – printf("%s", $VAR);

That shall cover the basics, but let us walk through more examples in this guide – Read on!

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

DISPLAYING PHP VARIABLES

All right, let us now get started with the example of displaying PHP variables in HTML.

EXAMPLE 1) USING PHP DELIMITERS

1-delimiter.php

<?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

2-short-tag.php

<?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

3-echo.php

<?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

4-printf.php

<?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);

At first sight, the 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.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

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

How to Display PHP Variables in HTML (Click to Enlarge)

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!