How to Pass Variables Between HTML Pages

Plain HTML files cannot pass variables between pages on their own because HTML is a static markup language with no server-side processing. However, there are several approaches you can use, ranging from simple URL parameters to PHP sessions.

01. URL Query Strings (Simplest)

Append data to the URL as query parameters. This is the simplest method and works with plain HTML files.

Create the Link

<a href="page2.html?name=John&color=blue">Next Page</a>

Read the Parameters on page2.html

<script>
const params = new URLSearchParams(window.location.search);
const name = params.get('name');   // "John"
const color = params.get('color'); // "blue"
document.getElementById('greeting').textContent = 'Hello, ' + name;
</script>

02. Use PHP for Server-Side Variables

For more robust variable passing, rename your files from .html to .php and use PHP. This is the recommended approach for anything beyond simple values. PHP is fully supported on all Ultra hosting accounts.

$_GET - URL Parameters

Works like query strings but PHP reads them server-side:

// Link: page2.php?name=John
// On page2.php:
$name = $_GET['name']; // "John"
echo "Hello, " . htmlspecialchars($name);

$_POST - Form Submissions

For form data (not visible in the URL):

// form on page1.php:
<form method="post" action="page2.php">
  <input type="text" name="email">
  <button type="submit">Submit</button>
</form>

// On page2.php:
$email = $_POST['email'];

$_SESSION - Persist Across Multiple Pages

For data that needs to follow the user across many pages (shopping carts, login state):

// On any page - start session and store data:
session_start();
$_SESSION['username'] = 'John';

// On any other page - read it:
session_start();
echo $_SESSION['username']; // "John"

03. JavaScript localStorage

For client-side persistence across pages without any server processing. Data is stored in the visitor's browser and persists even after closing the tab.

// On page1.html - store data:
localStorage.setItem('name', 'John');
localStorage.setItem('color', 'blue');

// On page2.html - read data:
const name = localStorage.getItem('name');   // "John"
const color = localStorage.getItem('color'); // "blue"

// When done - clean up:
localStorage.removeItem('name');

04. Which Method to Use

• Simple values, no security concern - URL query strings. Quick, no server-side code needed
• Form data, user input - PHP $_POST. Data isn't in the URL, can be validated server-side
• Data across many pages (login, cart) - PHP $_SESSION. Server-side, secure, persists until session ends
• Client-side only, no PHP - JavaScript localStorage. Works with plain HTML but less secure

For most websites on Ultra Web Hosting, PHP is the best choice since it's pre-installed, secure, and handles all these use cases. See our Server Paths guide for PHP binary locations.

Last updated March 2026 · Browse all General articles · See also: Parse HTML as PHP