Note: Some of these articles assume a basic knowledge of PHP, HTML, JavaScript, CSS, and MySQL. If you are unfamiliar or need to brush up, useful tutorials and information can be found at W3Schools and Codecademy.
We discussed in a previous article how PHP can be used to make websites more modular, and in it, we touch upon how this was done by embedding some PHP inside our HTML markup. In this article we will touch on this in a little more detail, covering what exactly is going on when we embed the PHP, and how exactly we do so.
What’s Going On
When it actually comes to embedding PHP within HTML the process is surprisingly easy, but first lets cover what exactly is going on when we do. To start, a key thing to note is that, while we are technically embedding our PHP within HTML markup, the file itself is a .php file. This is because we can include HTML inside a .php file, but PHP can not be processed inside an .html file.
So, now that we know the type of file we are using, what’s going on inside it? When we say we are embedding within HTML markup, what we ultimately mean is that when we are coding our site, we can switch back and forth between HTML and PHP. This is commonly used when including HTML from another .php file in order to make our websites more modular. However, it can be used for a lot more than that. Say we want to display some information from a database in a table. We can code our site, and when we get to the point where we want to create our table, we can break from our HTML, use some PHP to contact the server, get the data, and then display it using a combination of HTML and PHP. Once we master this technique it will start to feel less like we are switching back and forth between HTML and PHP, and feel more like an single web language. To sum it up, when we embed our PHP, what we are doing is blending our HTML and PHP together inside a .php file.
How Do We Do It
As stated above, the actual process of embedding PHP within HTML is pretty straight forward and easy. The key thing to remember is that all our PHP needs to be enclosed within the PHP brackets…
<?php ?>
Once we have our brackets, we can put as much PHP code as we want between them, and that’s all there is to it. Some key things to note when embedding our PHP is that…
- We can have as many PHP sections as we want. We just have to remember to use our closing brackets when we want to switch back to HTML, and to open them again when we want to resume PHP.
- When we close our PHP brackets, it is not like closing a function. Any elements that we create or change are still active on the page, and can be used again.
In closing, let’s take a look at a short example to see how exactly this code can be used. Lets create a index.php file and save it in our htdocs. We will be testing this code in our browser, so if you are unfamiliar with how to set up a PHP environment, check out our article “Getting Started With PHP: Setting Up Your PHP Environment“. Now, inside our index.php let’s add some basic HTML code. Let’s had a basic navigation bar, a basic header, and a basic paragraph.
What this looks like in our browser is…
Now let’s embed some PHP. We will show two examples of this: including a external .php file containing HTML, and including some PHP generated content directly on the page. To include the external .php file, first cut out the navbar section and put it in a different .php file called navbar.php. Then in our index.php file we are going to add the line…
<?php include ‘navbar.php’; ?>
Our navigation bar should now be included. To complete our final step, inbetween our header and our paragraph, let’s add another paragraph but do it using PHP. So, between the two lines, include the line…
<?php echo”<p>This is a php generated paragraph</p> ?>
our index.php should now look like this…
Finally, let’s test our code in the browser and see what we get. It should look like this…
There we go. We have successfully embedded PHP within HTML markup, and are well on our way to making more dynamic and modular websites. With this technique we can do more than just include HTML, but can print PHP variables and even data from databases on our site. To learn more, feel free to check out some of our other articles about getting started with PHP.
