Web Development: How to Use PHP in HTML

How to Use PHP in HTML

In this article, I'll show you how to use PHP code in your HTML pages. It’s aimed at PHP beginners who are trying to strengthen their grip on the world's most popular server-side scripting language.

Again, PHP is a server-side scripting language. That means a PHP script is executed on the server, the output is built on the server, and the result is sent as HTML to the client browser for rendering. It's natural to mix PHP and HTML in a script, but as a beginner, it’s tricky to know how to combine the PHP code with the HTML code.

Learn PHP With a Free Online Course

If you want to learn PHP, check out our free online course on PHP fundamentals! In this course, you'll learn the fundamentals of PHP programming. You'll start with the basics, learning how PHP works and writing simple PHP loops and functions. Then you'll build up to coding classes for simple object-oriented programming (OOP). Along the way, you'll learn all the most important skills for writing apps for the web: you'll get a chance to practice responding to GET and POST requests, parsing JSON, authenticating users, and using a MySQL database.

FREE

PHP

PHP Fundamentals

Jeremy McPeak

Today, we’re going to discuss a couple of different ways you could choose from when you want to use PHP in HTML. I assume that you have a working installation of PHP so that you can run the examples provided in this article.

Different Ways to Combine PHP and HTML

Broadly speaking, when it comes to using PHP in HTML, there are two different approaches. The first is to embed the PHP code in your HTML file itself with the .html extension—this requires a special consideration which we’ll discuss in a moment. The other option, the preferred way, is to combine PHP and HTML tags in .php files.

Since PHP is a server-side scripting language, the code is interpreted and run on the server side. For example, if you add the following code in your index.html file, it won’t run out of the box.

<!DOCTYPE html>
<html>
<head>
<title>Embed PHP in a .html File</title>
</head>
<body>
<h1><?php echo "Hello World" ?></h1>
</body>
</html>

First of all, don’t worry if you haven’t seen this kind of mixed PHP and HTML code before, as we’ll discuss it in detail throughout this article. The above example outputs following in your browser:

<?php echo "Hello World" ?>

So as you can see, by default, PHP tags in your .html document are not detected, and they're just considered plain-text, outputting without parsing. That's because the server is usually configured to run PHP only for files with the .php extension.

If you want to run your HTML files as PHP, you can tell the server to run your .html files as PHP files, but it's a much better idea to put your mixed PHP and HTML code into a file with the .php extension.

That's what I'll show you in this tutorial.

How to Add PHP Tags in Your HTML Page

When it comes to integrating PHP code with HTML content, you need to enclose the PHP code with the PHP start tag <?php and the PHP end tag ?>. The code wrapped between these two tags is considered to be PHP code, and thus it'll be executed on the server side before the requested file is sent to the client browser.

Let’s have a look at a very simple example which displays a message using PHP code. Create the index.php file with the following contents under your document root.

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML - Simple Example</title>
</head>
<body>
<h1><?php echo "This message is from server side." ?></h1>
</body>
</html>

The important thing in the above example is that the PHP code is wrapped by the PHP tags.

The output of the above example looks like this:

Example Output

And, if you look at the page source, it should look like this:

As you can see, the PHP code is parsed and executed on the server side, and it's merged with HTML before the page is sent to the client browser.

Let’s have a look at another example:

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML- Date Example</title>
</head>
<body>
<div>This is pure HTML message.</div>
<div>Next, we’ll display today’s date and day by PHP!</div>
<div>
Today’s date is <b><?php echo date('Y/m/d') ?></b> and it’s a <b><?php echo date(‘l’) ?></b> today!
</div>
<div>Again, this is static HTML content.</div>
</body>
</html>

This will output the current date and time, so you can use PHP code between the HTML tags to produce dynamic output from the server. It’s important to remember that whenever the page is executed on the server side, all the code between the <?php and ?> tags will be interpreted as PHP, and the output will be embedded with the HTML tags.

In fact, there’s another way you could write the above example, as shown in the following snippet.

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML- Date Example</title>
</head>
<body>
<div>This is pure HTML message.</div>
<div>Next, we’ll display today’s date and day by PHP!</div>
<div>
<?php
echo 'Today’s date is <b>' . date('Y/m/d') . '</b> and it’s a <b>'.date('l').'</b> today!';
?>
</div>
<div>Again, this is static HTML content.</div>
</body>
</html>

In the above example, we’ve used the concatenation feature of PHP, which allows you to join different strings into one string. And finally, we’ve used the echo construct to display the concatenated string.

The output is the same irrespective of the method you use, as shown in the following screenshot.

And that brings another question: which is the best way? Should you use the concatenation feature or insert separate PHP tags between the HTML tags? I would say it really depends—there’s no strict rule that forces you to use one of these methods. Personally, I feel that the placeholder method is more readable compared to the concatenation method.

The overall structure of the PHP page combined with HTML and PHP code should look like this:

<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
HTML...
<?php PHP code ... ?>
HTML...
<?php PHP code ... ?>
HTML...  
</body>
</html>

In the next section, we’ll see how you could use PHP loops with HTML.

How to Use PHP Loops in Your HTML Page

Iterating through the arrays to produce HTML content is one of the most common tasks you'll encounter while writing PHP scripts. In this section, we’ll see how you could iterate through an array of items and generate output.

In most cases, you’ll need to display array content which you’ve populated from the database or some other sources. In this example, for the sake of simplicity, we’ll initialize the array with different values at the beginning of the script itself.

Go ahead and create a PHP file with the following contents.

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML - foreach Example</title>
</head>
<body>
<?php
$employees = array(‘John’, ‘Michelle’, ‘Mari’, ‘Luke’, ‘Nellie’);
?>
<h1>List of Employees</h1>
<ul>
<?php foreach ($employees as $employee) { ?>
<li><?php echo $employee ?></li>
<?php }  ?>
</ul>
</body>
</html>

Firstly, we’ve initialized the array at the beginning of our script. Next, we’ve used the foreach construct to iterate through the array values. And finally, we’ve used the echo construct to display the array element value.

And the output should look like this:

Output showing a list of employees The same example with a while loop looks like this:

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML - foreach Example</title>
</head>
<body>
<?php
$employees = array(‘John’, ‘Michelle’, ‘Mari’, ‘Luke’, ‘Nellie’);
$total = count($employees);
?>
<h1>List of Employees</h1>
<ul>
<?php
$i = 0;
?>
<?php while ($i < $total) { ?>
<li><?php echo $employees[$i] ?></li>
<?php  ++$i ?>
<?php }  ?>
</ul>
</body>
</html>

And the output will be the same. So that’s how you can use foreach and while loops to generate HTML content based on PHP arrays.

In the next section, we’ll see how you could use PHP short tags syntax.

How to Use PHP Short Tags

In the examples we’ve discussed so far, we’ve used the <?php as a starting tag everywhere. In fact, PHP comes with a variation, <?=, which you could use as a short-hand syntax when you want to display a string or value of the variable.

Let’s revise the example with the short-hand syntax which we discussed earlier.

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML - Simple Example</title>
</head>
<body>
<h1><?= "This message is from server side." ?></h1>
</body>
</html>

As you can see, we can omit the echo or print construct while displaying a value by using the shorthand syntax. The shorthand syntax is short and readable when you want to display something with echo or print.

So these are different ways you can use to add PHP in HTML content. As a beginner, you can learn from trying different ways to do things, and it's fun too!

Including Code from Different Files

There are a lot of situations where you need to use the same code on multiple pages of a website. One such example would be the header and footer section of a website. These sections usually contain the same HTML throughout the website.

Think of this like moving the common CSS rules of a website into a stylesheet instead of placing them inside the style tags on individual pages.

There are four functions available in PHP to help you include other files within a PHP file. These are include(), include_once(), require() and require_once().

The function include() will include and evaluate the specified file and give you a warning if it cannot find the file. The require() function does the same thing but it gives you an error instead of a warning if the file cannot be found.

When working on big projects, it is possible that you might unintentionally include the same file multiple times. This could cause problems like function redifinition. One way to avoid these issues is to use the include_once() and require_once() functions in PHP.

Lets use code from a previous section to show you how to use these functions. I will be using include() in this example. Create a file called header.php and place the following code inside it.

<!DOCTYPE html>
<html>
<head>
<title>How to put PHP in HTML</title>
</head>
<body>
<div>This is pure HTML message.</div>
<div>Next, we’ll display today’s date and day using PHP!</div>

Create another file called date.php and place the following code in it.

<?php
include('header.php');
?>
<div>
<?php
echo 'Today’s date is <b>' . date('Y/m/d') . '</b>!';
?>
</div>
</body>
</html>

Create one more file called day.php and place the following code in it.

<?php
include('header.php');
?>
<div>
<?php
echo 'Today is <b>'.date('l').'</b>!';
?>
</div>
</body>
</html>

Notice that we have included the path to header.php at the top of both day.php and date.php. Make sure that the three files are in the same directory. Opening up date.php in browser should now show you the following output.

Opening up day.php should show you the following output.

As you can see, the code we put inside header.php was included in both our files. This makes web development a lot easier when you are working with a lot files. Just make the changes at one place and they will be reflected everywhere.

Conclusion

Today we discussed how you can mix PHP and HTML to create dynamic HTML. We discussed different methods with a handful of examples to see how things work.

The Best PHP Scripts on CodeCanyon

Explore thousands of the best PHP scripts ever created on CodeCanyon. With a low-cost one-time payment, you can purchase one of these high-quality PHP scripts and improve your website experience for you and your visitors.