In this tutorial, I’ll show you how to output HTML from a PHP script.
This is very similar to our tutorial on outputting text using PHP (for example, creating your first script to output the text “hello world”), but we’ll be looking at HTML. HTML is the language of the web, so you’ll encounter it frequently when building websites.
Table of Contents
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span>
PHP Script to Output HTML #
Create a file called html.php with the following code and upload it to your webserver
<?php echo "<h1>Hello World!</h1>"; ?>
The output of this is the following HTML:
<h1>Hello World</h1>
Which looks like the following when you view it in the browser:
Explanation of code to output HTML #
Here, we use the echo command to send text to the browser, but the text contains HTML tags. The browser will recognise this as HTML and format the page as you tell it – here the <h2> tag will mean that the text Hello World! is formatted as a heading.
As before we saw in the previous tutorial, the <?php and ?> tags open execution of PHP code, the echo command says to output some text (i.e. send it to the browser), and we follow it with the string “<h1>Hello World</h1>", which contains HTML code.
We should say that the above code doesn’t really utilise PHP to do anything interesting – it just prints out text, which you could have done with a static HTML page. However, we’ll be able to build on this to do more interesting things soon.
Special Characters #
You might need to output some characters such as quotation marks " in your HTML, but you will notice that we used those to mark the start and end of the string above. So how does PHP distinguish between the " which marks the start of the string, and that which is part of it? You can do this using a backslash () before the quotation mark which is part of the string: \". This is known as an escape character.
Alternatively, you can use single quotes ' to mark the start and end of the string, and double quotes within the string will be output without any special treatment. You can see these in the examples below, which both result in the same HTML being output:
<?php echo '<img src="hello.jpg">'; echo "<img src=\"hello.jpg\">"; ?>
Line Breaks #
If you want to add a new line, you can do this using the \n special character (in a string which starts and ends with ". But remember, this will only show up in the source code of the page (which is the same as if you press enter when writing HTML code by hand), and won’t affect how it is shown to the visitor. If you want to add a new line which the visitor can see, use HTML to format it – such as the line break
.
{% highlight php %}
<?php echo "<p>Hello \nWorld</p>"; echo "<p>Hello <br>World</p>"; ?>
This example produces the following HTML source:
<p>Hello World</p> <p>Hello <br>World</p>
But it looks like the following to a visitor in a web browser – note the line breaks are different to those in the source code:
