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!

ⓘ 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

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

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.

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!