🧩 Embedding PHP in HTML

How PHP and HTML Combine

A .php file is really an HTML file with "escape hatches". The server sends everything outside PHP tags to the browser untouched, and executes everything inside them, splicing the results into the output stream.

💡 Analogy: HTML is the fixed dining room and printed menu; PHP is the chef who fills in today's specials. Diners (browsers) only ever see the finished room — never the kitchen.

This design lets you build data-driven pages — a product grid, a personalised dashboard, a comment thread — without leaving your markup.

Tags & the Short Echo

Everything between <?php and ?> is PHP. In a file that mixes markup and code, you keep the closing tag (unlike pure-PHP files) so HTML can resume.

<p>The time is:
    <?php echo date("H:i"); ?>
</p>

The short echo tag

Because outputting a single value is so common, PHP provides <?= ?> — a shorthand for <?php echo ?>. It keeps templates readable:

<!-- These two lines are identical -->
<p>Hello, <?= $username ?>!</p>
<p>Hello, <?php echo $username; ?>!</p>

<?php
// Logic at the top
$user       = getUserById(123);
$joinedDate = date("F j, Y", strtotime($user['joined']));
$postCount  = countPosts($user['id']);
?>

<!-- Presentation below, kept simple -->
<div class="profile">
    <h2><?= htmlspecialchars($user['name']) ?></h2>
    <p>Joined: <?= $joinedDate ?></p>
    <p>Posts: <?= $postCount ?></p>
</div>

Outputting & Escaping Content

Printing a value is easy. Printing it safely is the part that matters. Any data that came from a user or a database must be escaped before it lands in HTML, or an attacker can inject their own markup and scripts — a Cross-Site Scripting (XSS) attack.

<!-- Unsafe: a comment containing <script> would execute -->
<p><?= $comment['text'] ?></p>

<!-- Safe: entities are shown literally -->
<p><?= htmlspecialchars($comment['text'], ENT_QUOTES, 'UTF-8') ?></p>

Typing htmlspecialchars() everywhere gets tedious, so define a tiny helper and use it throughout your templates:

<?php
function e(?string $text): string {
    return htmlspecialchars($text ?? '', ENT_QUOTES, 'UTF-8');
}
?>

<p><?= e($comment['text']) ?></p>

Formatting for display

PHP has built-in functions for common display formatting:

<!-- Currency -->
<p class="price">$<?= number_format($product['price'], 2) ?></p>

<!-- Dates -->
<time><?= date("F j, Y", strtotime($article['published'])) ?></time>

Conditional Markup

You can render entirely different HTML depending on your data. In templates, PHP's alternative syntax (if: … endif;) reads far better than curly braces buried in markup.

<?php if ($isLoggedIn): ?>
    <div class="dashboard">
        <h2>Welcome back, <?= e($username) ?></h2>
        <a href="/logout.php">Log out</a>
    </div>
<?php else: ?>
    <div class="login-prompt">
        <p>Please <a href="/login.php">log in</a> to continue.</p>
    </div>
<?php endif; ?>

Multiple branches and conditional classes

<div class="user-card">
    <?php if ($user['role'] === 'admin'): ?>
        <span class="badge admin">Administrator</span>
    <?php elseif ($user['role'] === 'moderator'): ?>
        <span class="badge moderator">Moderator</span>
    <?php else: ?>
        <span class="badge member">Member</span>
    <?php endif; ?>
</div>

<!-- Toggle a CSS class inline with a ternary -->
<div class="product <?= $product['in_stock'] ? '' : 'out-of-stock' ?>">
    <?= e($product['name']) ?>
</div>

Loops in Templates

Generating repetitive HTML — cards, rows, list items — is one of PHP's most common jobs. A foreach over an array is the workhorse pattern:

<div class="product-grid">
    <?php foreach ($products as $product): ?>
        <div class="product-card">
            <h3><?= e($product['name']) ?></h3>
            <p class="price">$<?= number_format($product['price'], 2) ?></p>
            <button data-id="<?= (int) $product['id'] ?>">Add to Cart</button>
        </div>
    <?php endforeach; ?>
</div>

Handle the empty case

Always account for "no data" — a blank grid confuses users. Combine a condition with the loop:

<table class="data-table">
    <thead>
        <tr><th>Name</th><th>Email</th></tr>
    </thead>
    <tbody>
        <?php if (count($users) > 0): ?>
            <?php foreach ($users as $user): ?>
                <tr>
                    <td><?= e($user['name']) ?></td>
                    <td><?= e($user['email']) ?></td>
                </tr>
            <?php endforeach; ?>
        <?php else: ?>
            <tr><td colspan="2" class="no-data">No users found.</td></tr>
        <?php endif; ?>
    </tbody>
</table>

Reusable Includes

Copy-pasting a header into every page is a maintenance nightmare. PHP's include and require pull one file into another at runtime — server-rendered components, years before frontend frameworks made the idea popular.

<!-- index.php -->
<?php
$pageTitle = "Home";
require __DIR__ . '/includes/header.php';   // opens <html>…<body>
?>

<main>
    <h1><?= e($pageTitle) ?></h1>
    <p>Welcome to the site.</p>
</main>

<?php require __DIR__ . '/includes/footer.php'; ?>

Security Essentials

Mixing PHP with HTML puts user data next to executable markup, so a few rules are non-negotiable.

Reading and checking input with the filter functions:

<?php
$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'Please enter a valid email.';
    }
}

Querying a database safely with PDO prepared statements — user input is sent separately from the query, so it can never alter its structure:

<?php
$categoryId = (int) ($_GET['category'] ?? 0);

$stmt = $db->prepare('SELECT * FROM products WHERE category_id = ?');
$stmt->execute([$categoryId]);
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<?php foreach ($products as $product): ?>
    <h3><?= e($product['name']) ?></h3>
<?php endforeach; ?>

Hands-on Exercise

<?php
function e(?string $t): string {
    return htmlspecialchars($t ?? '', ENT_QUOTES, 'UTF-8');
}

$products = [
    ['name' => 'Keyboard', 'price' => 79.50, 'category' => 'input'],
    ['name' => 'Mouse',    'price' => 29.00, 'category' => 'input'],
    ['name' => 'Monitor',  'price' => 199.0, 'category' => 'display'],
];

$filter = $_GET['category'] ?? null;

$filtered = $filter
    ? array_filter($products, fn($p) => $p['category'] === $filter)
    : $products;
?>

<h1>Products<?= $filter ? ": " . e($filter) : "" ?></h1>

<div class="grid">
    <?php if (count($filtered) > 0): ?>
        <?php foreach ($filtered as $product): ?>
            <div class="card">
                <h3><?= e($product['name']) ?></h3>
                <p>$<?= number_format($product['price'], 2) ?></p>
            </div>
        <?php endforeach; ?>
    <?php else: ?>
        <p>No products in that category.</p>
    <?php endif; ?>
</div>

Summary & Quiz

📚 Further Reading

• PHP Manual — Escaping from HTML
• PHP Manual — Alternative Syntax
• OWASP — Cross-Site Scripting
• PHP: The Right Way — Templating

🚀 What's Next?

You can now generate dynamic pages end to end. Next we shift from single languages to cross-language patterns, starting with Data Structures Across Languages — comparing arrays, objects, and collections in Node, Python, and PHP.