Explain Codes LogoExplain Codes Logo

How can I echo HTML in PHP?

php
echo
heredoc
template-engines
Anton ShumikhinbyAnton Shumikhin·Sep 19, 2024
TLDR

To output HTML in PHP, use the echo function:

<?php echo '<h1>Welcome!</h1>'; ?>

This sends the message "Welcome!" wrapped in an <h1> tag to the browser, which renders this as a headline.

Streaming HTML with echo

In addition to one-line statements, echo is effective for streamlining HTML content in PHP.

Multiline echo

The echo construct supports multiline statements, improving the readability of larger HTML content:

<?php echo '<div class="container"> <h2>All your bases are belong to us</h2> <!-- little gaming throwback --> <p>Yup, they all do.</p> <!-- No, seriously --> </div>'; ?>

PHP shorthand

You can utilise PHP's shorthand <?= ?> syntax when less verbosity is beneficial:

<p><?= 'One does not simply walk into Mordor.' ?></p> <!-- LOTR fans, anyone? -->

Enter, Heredoc and Nowdoc

For more complex blocks of HTML, using the Heredoc and Nowdoc syntax can be helpful. Heredocs will parse any variables in the string, whilst Nowdocs will not.

<?php $profile = 'Darth Vader'; // Intergalactic badass $htmlContent = <<<HTML <div class="profile"> <img src="profile.jpg" alt="Profile Picture"> <p>$profile's Profile</p> <!-- Come to the dark side... --> </div> HTML; echo $htmlContent; ?>

Template engines: A step further

When your PHP application grows, maintaining a clear separation between your business logic and presentation logic becomes crucial. Template engines like Smarty and Twig facilitate this.

HTML in PHP: Advanced tactics

Beyond echoing, there are other ways to incorporate HTML into your PHP code.

Separate files inclusion

Including .php files that contain the majority of your HTML content helps establish a clear structure:

<?php include 'header.php'; ?> <!-- This is where the magic happens -->

Embedded HTML

Closer to HTML's natural habitat, you can embed PHP within HTML tags for a fluid structure:

<h1><?php echo 'Hello, World!'; ?></h1> <!-- We had to do this at least once -->

Dynamic HTML with control structures

PHP's control structures are not only there for executing logic but can also be cleverly integrated into your HTML code, producing output based on different conditions:

<?php if ($loggedIn): ?> <p>Welcome back, <?= $username ?>! <!-- Back for more, huh? --></p> <?php endif; ?>

Conquering the chaos: Comments

Comments are your silent guide in the sea of codes. They make your code much more readable:

<?php // Ring the opening bell echo '<div class="main-container">'; // ... // Throw in the kitchen sink here // Close the shop echo '</div>'; ?>

Safety first: Handle your quotes

Fond of double quotes as we are for HTML attributes, we must escape them or alternate with single quotes when working with echo to prevent syntax errors:

<?php echo '<input type="text" name="username" placeholder="Talk to me, user">'; ?>

Or, use single quotes outside and double quotes inside:

<?php echo "<input type='text' name='username' placeholder='Username, by any other name...'>"; ?>