Priygop - Leading Professional Development Platform

PHP & HTML Together

PHP's real power is generating dynamic HTML. Learn to mix PHP and HTML to create dynamic web pages. This is a foundational concept in server-side web development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world PHP experience. Take your time with each section and practice the examples

25 min•By Priygop Team•Last updated: Feb 2026

PHP's primary purpose is to generate HTML dynamically. You can embed PHP code directly inside HTML files. The server processes the PHP and sends the resulting HTML to the browser. This is how PHP creates dynamic pages — showing different content based on user input, database data, or conditions.

PHP + HTML Example

Example

<?php
$pageTitle = "My PHP Page";
$userName = "Alice";
$fruits = ["Apple", "Banana", "Mango", "Orange"];
$isLoggedIn = true;
?>
<!DOCTYPE html>
<html>
<head>
    <title><?= $pageTitle ?></title>
</head>
<body>
    <h1>Welcome, <?= $userName ?>!</h1>

    <?php if ($isLoggedIn): ?>
        <p>You are logged in.</p>
    <?php else: ?>
        <p>Please log in.</p>
    <?php endif; ?>

    <h2>Fruit List</h2>
    <ul>
    <?php foreach ($fruits as $fruit): ?>
        <li><?= $fruit ?></li>
    <?php endforeach; ?>
    </ul>

    <p>Today is: <?= date("d M Y") ?></p>
</body>
</html>

Try It Yourself: Dynamic HTML

Try It Yourself: Dynamic HTMLHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
    .page { background: white; padding: 24px; border-radius: 10px; max-width: 450px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    h1 { color: #8993be; }
    ul { padding-left: 20px; }
    li { padding: 4px 0; }
    .badge { background: #04AA6D; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.85em; }
    .date { color: #888; font-size: 0.9em; }
  </style>
</head>
<body>
  <div class="page">
    <h1 id="title"></h1>
    <p id="greeting"></p>
    <h2>Fruit List (PHP foreach)</h2>
    <ul id="fruits"></ul>
    <p class="date" id="date"></p>
  </div>
  <script>
    // Simulating PHP dynamic HTML generation
    const userName = "Alice";
    const isLoggedIn = true;
    const fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

    document.getElementById("title").textContent = "My PHP Page";
    document.getElementById("greeting").innerHTML =
      "Welcome, <strong>" + userName + "</strong>! " +
      (isLoggedIn ? '<span class="badge">Logged In</span>' : "Please log in.");

    const ul = document.getElementById("fruits");
    fruits.forEach(fruit => {
      const li = document.createElement("li");
      li.textContent = fruit;
      ul.appendChild(li);
    });

    document.getElementById("date").textContent =
      "Today is: " + new Date().toLocaleDateString("en-IN", { day: "numeric", month: "long", year: "numeric" });
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
    .page { background: white; padding: 24px; border-radius: 10px; max-width: 450px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    h1 { color: #8993be; }
    ul { padding-left: 20px; }
    li { padding: 4px 0; }
    .badge { background: #04AA6D; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.85em; }
    .date { color: #888; font-size: 0.9em; }
  </style>
</head>
<body>
  <div class="page">
    <h1 id="title"></h1>
    <p id="greeting"></p>
    <h2>Fruit List (PHP foreach)</h2>
    <ul id="fruits"></ul>
    <p class="date" id="date"></p>
  </div>
  <script>
    // Simulating PHP dynamic HTML generation
    const userName = "Alice";
    const isLoggedIn = true;
    const fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

document.getElementById("title").textContent = "My PHP Page";
    document.getElementById("greeting").innerHTML =
      "Welcome, <strong>" + userName + "</strong>! " +
      (isLoggedIn ? '<span class="badge">Logged In</span>' : "Please log in.");

const ul = document.getElementById("fruits");
    fruits.forEach(fruit => {
      const li = document.createElement("li");
      li.textContent = fruit;
      ul.appendChild(li);
    });

document.getElementById("date").textContent =
      "Today is: " + new Date().toLocaleDateString("en-IN", { day: "numeric", month: "long", year: "numeric" });
  </script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|44 lines|1514 chars|✓ Valid syntax

UTF-8

PHP & HTML Together

25 min•By Priygop Team•Last updated: Feb 2026

PHP + HTML Example

Example

<?php
$pageTitle = "My PHP Page";
$userName = "Alice";
$fruits = ["Apple", "Banana", "Mango", "Orange"];
$isLoggedIn = true;
?>
<!DOCTYPE html>
<html>
<head>
    <title><?= $pageTitle ?></title>
</head>
<body>
    <h1>Welcome, <?= $userName ?>!</h1>

    <?php if ($isLoggedIn): ?>
        <p>You are logged in.</p>
    <?php else: ?>
        <p>Please log in.</p>
    <?php endif; ?>

    <h2>Fruit List</h2>
    <ul>
    <?php foreach ($fruits as $fruit): ?>
        <li><?= $fruit ?></li>
    <?php endforeach; ?>
    </ul>

    <p>Today is: <?= date("d M Y") ?></p>
</body>
</html>

Try It Yourself: Dynamic HTML

Try It Yourself: Dynamic HTMLHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
    .page { background: white; padding: 24px; border-radius: 10px; max-width: 450px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    h1 { color: #8993be; }
    ul { padding-left: 20px; }
    li { padding: 4px 0; }
    .badge { background: #04AA6D; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.85em; }
    .date { color: #888; font-size: 0.9em; }
  </style>
</head>
<body>
  <div class="page">
    <h1 id="title"></h1>
    <p id="greeting"></p>
    <h2>Fruit List (PHP foreach)</h2>
    <ul id="fruits"></ul>
    <p class="date" id="date"></p>
  </div>
  <script>
    // Simulating PHP dynamic HTML generation
    const userName = "Alice";
    const isLoggedIn = true;
    const fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

    document.getElementById("title").textContent = "My PHP Page";
    document.getElementById("greeting").innerHTML =
      "Welcome, <strong>" + userName + "</strong>! " +
      (isLoggedIn ? '<span class="badge">Logged In</span>' : "Please log in.");

    const ul = document.getElementById("fruits");
    fruits.forEach(fruit => {
      const li = document.createElement("li");
      li.textContent = fruit;
      ul.appendChild(li);
    });

    document.getElementById("date").textContent =
      "Today is: " + new Date().toLocaleDateString("en-IN", { day: "numeric", month: "long", year: "numeric" });
  </script>
</body>
</html>

const ul = document.getElementById("fruits");
    fruits.forEach(fruit => {
      const li = document.createElement("li");
      li.textContent = fruit;
      ul.appendChild(li);
    });

document.getElementById("date").textContent =
      "Today is: " + new Date().toLocaleDateString("en-IN", { day: "numeric", month: "long", year: "numeric" });
  </script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|44 lines|1514 chars|✓ Valid syntax

UTF-8

PHP & HTML Together

PHP Inside HTML

PHP + HTML Patterns

PHP + HTML Example

Try It Yourself: Dynamic HTML

Quick Quiz

Topics in This Module

PHP & HTML Together

PHP Inside HTML

PHP + HTML Patterns

PHP + HTML Example

Try It Yourself: Dynamic HTML

Quick Quiz

Topics in This Module