HTML5 генерация в PHP: от простых функций до сложных фреймворков

Расширенные примеры демонстрируют более сложные сценарии: генерация таблиц, форм, встраивание медиа, использование атрибутов HTML5.

Пример 1: Генерация навигационного меню с активными пунктами (класс Html5)

require 'Html5.php';

$menu = [
    'Главная'  => '/',
    'О нас'    => '/about',
    'Контакты' => '/contact',
];
$currentUrl = '/about';

$nav = Html5::tag('nav', '', ['class' => 'main-nav']);
$ul = '';
foreach ($menu as $text => $url) {
    $attrs = ['href' => $url];
    if ($url === $currentUrl) {
        $attrs['class'] = 'active';
    }
    $ul .= Html5::tag('li', Html5::tag('a', $text, $attrs));
}
$navContent = Html5::tag('ul', $ul);
$nav .= substr($navContent, 4); // грубое вложение (упрощение)

echo $nav;

<nav class="main-nav"><ul><li><a href="/">Главная</a></li><li><a href="/about" class="active">О нас</a></li><li><a href="/contact">Контакты</a></li></ul></nav>

Здесь наглядно видно, как просто построить иерархию. Недостаток - приходится манипулировать строками при вложении. Более чистый способ - объектная модель с методами appendChild.

Пример 2: Создание HTML5 формы с атрибутами validation

$form = Html5::tag('form', '', ['action' => 'send.php', 'method' => 'POST', 'novalidate' => '']);
$fields = [
    ['label' => 'Email', 'input' => ['type' => 'email', 'name' => 'email', 'required' => ''], 'error' => ''],
    ['label' => 'Возраст', 'input' => ['type' => 'number', 'name' => 'age', 'min' => 18, 'max' => 120]],
    ['label' => 'Согласие', 'input' => ['type' => 'checkbox', 'name' => 'agree', 'required' => '']],
];

foreach ($fields as $field) {
    $label = Html5::tag('label', $field['label'], ['for' => $field['input']['name']]);
    $input = Html5::tag('input', '', $field['input']);
    $form .= Html5::tag('p', $label . ' ' . $input);
}
$form .= Html5::tag('button', 'Отправить', ['type' => 'submit']);
// закрываем form
echo $form;

<form action="send.php" method="POST" novalidate><p><label for="email">Email</label> <input type="email" name="email" required /></p><p><label for="age">Возраст</label> <input type="number" name="age" min="18" max="120" /></p><p><label for="agree">Согласие</label> <input type="checkbox" name="agree" required /></p><button type="submit">Отправить</button></form>

Атрибут novalidate отключает встроенную валидацию браузера (если нужно использовать серверную).

Пример 3: Генерация аудио/видео плейера

function html5Media($type, $src, $controls = true) {
    $attrs = [
        'src' => $src,
        'controls' => $controls ? '' : null,
    ];
    if ($type === 'audio') {
        return Html5::tag('audio', 'Ваш браузер не поддерживает аудио', $attrs);
    } elseif ($type === 'video') {
        $attrs['width'] = '640';
        $attrs['height'] = '360';
        return Html5::tag('video', 'Ваш браузер не поддерживает видео', $attrs);
    }
    return '';
}

echo html5Media('video', 'movie.mp4');

<video src="movie.mp4" controls width="640" height="360">Ваш браузер не поддерживает видео</video>

Для добавления нескольких источников (source) потребуется более гибкая структура.

Пример 4: Генерация таблицы с помощью рекурсии

$data = [
    ['Имя' => 'Иван', 'Возраст' => 25, 'Город' => 'Москва'],
    ['Имя' => 'Ольга', 'Возраст' => 30, 'Город' => 'Санкт-Петербург'],
];

$table = Html5::tag('table', '', ['border' => '1']);
$thead = Html5::tag('thead', '');
$headers = array_keys($data[0]);
$headRow = '';
foreach ($headers as $h) {
    $headRow .= Html5::tag('th', $h);
}
$thead .= Html5::tag('tr', $headRow);

$tbody = Html5::tag('tbody', '');
foreach ($data as $row) {
    $cells = '';
    foreach ($row as $value) {
        $cells .= Html5::tag('td', $value);
    }
    $tbody .= Html5::tag('tr', $cells);
}

echo $table . $thead . $tbody . '</table>'; // упрощение закрытия

<table border="1"><thead><tr><th>Имя</th><th>Возраст</th><th>Город</th></tr></thead><tbody><tr><td>Иван</td><td>25</td><td>Москва</td></tr><tr><td>Ольга</td><td>30</td><td>Санкт-Петербург</td></tr></tbody></table>

В реальном проекте стоит инкапсулировать построение таблицы в отдельный метод, чтобы избежать ручного закрытия тегов.

Пример 5: Использование Twig для повторного использования блока (включение)

{# base.twig #}
<!DOCTYPE html>
<html>
<head>
    {% block head %}
        <meta charset="UTF-8">
        <title>{% block title %}Мой сайт{% endblock %}</title>
    {% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

{# page.twig #}
{% extends "base.twig" %}
{% block title %}О компании{% endblock %}
{% block content %}
    <section>
        <h2>История</h2>
        <p>Компания основана в 2020 году.</p>
    </section>
{% endblock %}

// PHP
echo $twig->render('page.twig', []);

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>О компании</title>
</head>
<body>
    <section>
        <h2>История</h2>
        <p>Компания основана в 2020 году.</p>
    </section>
</body>
</html>

Такой подход полностью избавляет от ручного построения строк и делает код легко поддерживаемым. Это наиболее рекомендуемый способ для крупных проектов.