Manage browser history and URLs for proper navigation behavior with html★.
Push vs Replace
html★ provides two ways to update the browser URL:
| Attribute | History Effect | Back Button |
|---|---|---|
data-push | Adds new entry | Returns to previous |
data-replace | Replaces current entry | Skips this page |
| (neither) | No URL change | N/A |
When to Use Each
data-push (Navigation)
Use for navigation between pages:
<nav data-target="#main" data-push> <a href="/home">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a></nav>data-replace (Filters/Pagination)
Use when you don't want cluttered history:
<!-- Pagination shouldn't add history for each page --><div class="pagination" data-target="#results" data-replace> <a href="/search?page=1">1</a> <a href="/search?page=2">2</a> <a href="/search?page=3">3</a></div>No URL Change (Inline Updates)
Use when the update doesn't represent a new "page":
<!-- Inline edit doesn't need a URL --><button data-href="/users/123/edit" data-target="#user-form"> Edit</button>Back/Forward Navigation
html★ handles browser back/forward buttons by reloading the page. This ensures the correct state is shown without complex state management.
Why reload? html★ prioritizes simplicity over complexity. Rather than maintaining a JavaScript-based history stack, it lets the browser do what it does best — navigate to URLs.
Bookmarkable URLs
Because html★ uses real URLs, all your pages are bookmarkable and shareable. If someone shares a URL, they get the same page.
Example: SPA Navigation
<!DOCTYPE html><html lang="en" data-transitions><body data-target="#main"> <nav data-push> <a href="/">Home</a> <a href="/dashboard">Dashboard</a> <a href="/settings">Settings</a> </nav> <main id="main"> <!-- Content here --> </main></body></html>This gives you:
- ✓ SPA-like navigation (no full page reload)
- ✓ Working back/forward buttons
- ✓ Bookmarkable URLs
- ✓ Works without JavaScript (graceful degradation)
Inheritance
Both data-push and data-replace inherit from ancestors:
<nav data-target="#main" data-push> <!-- All links here will push --> <a href="/home">Home</a> <a href="/about">About</a></nav> <aside data-target="#sidebar"> <!-- These won't push (no data-push inherited) --> <a href="/help">Help</a></aside>