Как избежать типичных ошибок в верстке HTML и CSS

Верстка сайтов — это как сборка мебели из Икеи. Вроде бы всё просто, но стоит пропустить один винтик — и конструкция развалится. Многие разработчики, особенно новички, совершают одни и те же ошибки снова и снова. В этой статье я расскажу, как их избежать, и покажу примеры на PHP, HTML и CSS. Поехали!

Ошибка №1: Игнорирование семантики HTML

Семантическая верстка — это когда каждый тег используется по назначению. Часто можно увидеть, как для заголовков используют <div> с классом title, вместо <h1>-<h6>. Это плохо для SEO и доступности. Поисковики и screen reader'ы ориентируются на структуру документа. Правильный подход — использовать заголовки по иерархии.

<!-- Плохо -->
<div class="title">Главный заголовок</div>

<!-- Хорошо -->
<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>

То же самое касается списков. Не используй <div> с br для перечисления пунктов. Используй <ul> или <ol>.

Ошибка №2: Забываем про адаптивность

В 2025 году мобильный трафик превышает десктопный. Если сайт не адаптирован под разные экраны, ты теряешь пользователей. Самая частая ошибка — использование фиксированных размеров в пикселях. Вместо этого используй относительные единицы: %, em, rem, vw, vh.

/* Плохо */
.container {
    width: 1200px;
}

/* Хорошо */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

Также не забывай про @media запросы. Они помогут адаптировать дизайн под планшеты и телефоны.

Ошибка №3: Хаос в CSS (каскад и специфичность)

CSS — это каскадные таблицы стилей. Если не следить за порядком, можно получить «войну селекторов». Частая ошибка — использование !important везде, где лень разобраться. Это создаёт ад для поддержки. Лучше разберись со специфичностью селекторов.

/* Плохо: слишком много !important */
.button {
    background: red !important;
}

/* Хорошо: используй классы и вложенность */
.btn-primary {
    background: blue;
}

.card .btn-primary {
    background: green; /* специфичнее */
}

Ещё одна ошибка — глобальные стили. Например, div { margin: 0; } может сломать всё. Используй сброс стилей (reset.css) и нормализацию (normalize.css).

Ошибка №4: Неправильная работа с PHP в шаблонах

Если ты используешь PHP для генерации HTML, легко наделать ошибок. Например, забыть экранировать данные. Это ведёт к XSS-атакам. Всегда используй htmlspecialchars() для вывода пользовательских данных.

<?php
// Плохо: прямой вывод без экранирования
echo "<h1>" . $_GET['title'] . "</h1>";

// Хорошо: экранируем
echo "<h1>" . htmlspecialchars($_GET['title'], ENT_QUOTES, 'UTF-8') . "</h1>";
?>

Также не смешивай логику и представление. Используй шаблонизаторы вроде Twig или хотя бы разделяй PHP-код и HTML.

Ошибка №5: Забываем про валидацию форм на клиенте и сервере

Формы — это точка входа для данных. Если не проверять их, можно получить мусор в базе. На клиенте используй HTML5-атрибуты (required, pattern), но не полагайся только на них. Всегда проверяй на сервере.

<!-- Клиентская валидация -->
<input type="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<?php
// Серверная валидация
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
if ($email === false) {
    echo "Некорректный email";
}
?>

Не забудь про CSRF-токены для защиты от подделки запросов.

Ошибка №6: Неоптимизированные изображения и шрифты

Тяжёлые картинки тормозят загрузку. Используй форматы WebP или AVIF, сжимай изображения. А шрифты подключай с font-display: swap, чтобы текст отображался сразу.

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
}

Не используй слишком много шрифтов. Двух-трёх вполне достаточно.

Что в итоге?

Верстка — это не rocket science, но требует внимания к деталям. Запомни основные правила: семантика, адаптивность, порядок в CSS, безопасность в PHP, валидация форм и оптимизация. Если будешь следовать этим советам, сайты будут быстрыми, доступными и красивыми. И не бойся ошибаться — главное, учиться на них.

Студия WNDER