Практика: создание адаптивной страницы с семантической структурой

Почему семантика и адаптивность — must have? 🌐

Современный сайт — это не просто "красивая картинка". Он должен:

📱 Корректно отображаться на любом устройстве (от смартфона до 4K-экрана)
🦮 Быть доступным для скринридеров и поисковых систем
🧱 Иметь четкую логическую структуру

Сегодня соберем страницу, которая соответствует всем этим требованиям!

Подготовка HTML-каркаса 🏗️

Начнем с семантической разметки. Вот базовый каркас:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивный блог о путешествиях</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="main-header">
        <h1>TravelX</h1>
        <nav class="main-nav">
            <!-- Навигация появится здесь -->
        </nav>
    </header>

    <main class="content">
        <article class="featured-post">
            <!-- Главная статья -->
        </article>

        <section class="gallery">
            <!-- Галерея фотографий -->
        </section>
    </main>

    <aside class="sidebar">
        <!-- Дополнительная информация -->
    </aside>

    <footer class="main-footer">
        <!-- Подвал сайта -->
    </footer>
</body>
</html>

🔍 Что особенного:

<header>, <main>, <footer> задают основную структуру
<article> для независимого контента (посты блога)
<section> для тематической группировки

Делаем адаптивность без боли 🛠️

Добавим в CSS три ключевых breakpoint'а:

/* Базовые стили для мобильных */
.container {
    width: 100%;
    padding: 0 15px;
}

/* Планшеты (768px и выше) */
@media (min-width: 768px) {
    .content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }
}

/* Десктоп (1200px и выше) */
@media (min-width: 1200px) {
    body {
        max-width: 1400px;
        margin: 0 auto;
    }
}

🎯 Стратегия: Mobile First — сначала стили для маленьких экранов, потом постепенно добавляем адаптацию для более крупных.

Наполняем контентом: пример статьи ✨

Добавим семантичную статью с адаптивными изображениями:

<article class="featured-post">
    <h2>Как собрать рюкзак для треккинга</h2>

    <figure>
        <img src="hiking.jpg" 
             alt="Турист с рюкзаком в горах" 
             class="responsive-img">
        <figcaption>Подготовка к горному походу</figcaption>
    </figure>

    <div class="post-meta">
        <time datetime="2023-11-15">15 ноября 2023</time>
        <span>Автор: Алексей Горный</span>
    </div>

    <p>Основные принципы укладки рюкзака для многодневного похода...</p>
</article>

💡 Важные моменты:

<figure> + <figcaption> для семантичной связи изображения и подписи
datetime для машинного чтения даты
.responsive-img с max-width: 100% в CSS

Гибкая галерея на CSS Grid 🖼️

Создадим адаптивную галерею, которая меняет количество колонок:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

📐 Как это работает:

auto-fill автоматически заполняет доступное пространство
minmax(250px, 1fr) задает минимальный размер 250px, максимальный — равную долю пространства
На мобильных будет 1 колонка, на планшетах — 2, на десктопе — 3+

Тестируем и улучшаем 🔍

Проверяем наш сайт:

Открываем DevTools (F12) → режим адаптивного дизайна
Проверяем через WAVE Evaluation Tool на доступность
Тестируем тач-интерактивность на реальном смартфоне

/* Улучшаем доступность */
:focus {
    outline: 3px solid #4d90fe;
}

@media (hover: hover) {
    button:hover {
        opacity: 0.9;
    }
}

Итоговый результат 🏆

Мы создали страницу, которая:

✅ Четко структурирована семантическими тегами
✅ Идеально адаптируется под любой экран
✅ Доступна для всех пользователей

Попробуйте добавить свои элементы — например, адаптивное меню-бургер или dark mode! Ваши идеи могут сделать этот шаблон еще лучше.