LOHTML
LOHTML is an easy-to-use PHP library that allows you to generate and manage HTML documents and websites programmatically with a fluent, chainable syntax. It helps you write clean, readable, and maintainable code by replacing manual HTML string concatenation or complex templating systems.
In short, it’s a PHP-powered HTML builder that simplifies creating and modifying HTML structures. This webpage is built using LOHTML.
LOHTML Demo
Input
Refresh the webpage to see a new example.
<?php
require_once('lohtml.php');
$site = new LOHTML();
// Configure the document
$site->language('en');
$site->title('Our Team');
$site->description('Meet our amazing team.');
$site->meta('charset', 'utf-8');
$site->responsive(true);
// Team container
$team = $site->body->div('.team');
$team->h1()->content('Meet Our Team');
// Team members
$members = [
['name' => 'John Doe', 'role' => 'CEO', 'bio' => 'John is the founder and CEO of our company.', 'image' => 'john.jpg'],
['name' => 'Jane Smith', 'role' => 'CTO', 'bio' => 'Jane is our Chief Technology Officer.', 'image' => 'jane.jpg'],
['name' => 'Mike Johnson', 'role' => 'Lead Developer', 'bio' => 'Mike leads our development team.', 'image' => 'mike.jpg'],
];
foreach ($members as $member) {
$memberDiv = $team->div('.team-member');
$memberDiv->img()->attribute('src', $member['image'])->attribute('alt', $member['name']);
$memberDiv->h3()->content($member['name']);
$memberDiv->p('.role')->content($member['role']);
$memberDiv->p('.bio')->content($member['bio']);
}
echo $site->html();Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>Our Team</title>
<meta name="description" content="Meet our amazing team." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="charset" content="utf-8" />
</head>
<body>
<div class="team">
<h1>Meet Our Team</h1>
<div class="team-member">
<img src="john.jpg" alt="John Doe" />
<h3>John Doe</h3>
<p class="role">CEO</p>
<p class="bio">John is the founder and CEO of our company.</p>
</div>
<div class="team-member">
<img src="jane.jpg" alt="Jane Smith" />
<h3>Jane Smith</h3>
<p class="role">CTO</p>
<p class="bio">Jane is our Chief Technology Officer.</p>
</div>
<div class="team-member">
<img src="mike.jpg" alt="Mike Johnson" />
<h3>Mike Johnson</h3>
<p class="role">Lead Developer</p>
<p class="bio">Mike leads our development team.</p>
</div>
</div>
</body>
</html>
