Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Задание 3: Исправление ошибок</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1 class="task-title">Задание 3: Исправление ошибок</h1>
    <p class="description">// Безликие блоки &lt;div&gt; успешно заменены на валидные семантические теги</p>

    <header>
        <span class="tag-badge">&lt;header&gt;</span>
        <nav>
            <span class="tag-badge">&lt;nav&gt;</span>
            <strong>[ Главная навигационная панель / Меню сайта ]</strong>
        </nav>
    </header>

    <main>
        <span class="tag-badge">&lt;main&gt;</span>
        <article>
            <span class="tag-badge">&lt;article&gt;</span>
            <strong>[ Основной контент страницы / Автономный пост ]</strong>
        </article>
    </main>

    <footer>
        <span class="tag-badge">&lt;footer&gt;</span>
        <strong>[ Нижняя панель / Подвал сайта ]</strong>
    </footer>
</div>

</body>
</html>
Вовоаоаоаоаоаоаоар
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Задание 2: Разметка статьи</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1 class="task-title">Задание 2: Разметка статьи</h1>

    <article>
        <header>
            <h2>Семантика в HTML и её важность</h2>
            <p style="font-style: italic; color: #6b21a8;">Автор статьи: Максим</p>
        </header>
        
        <section>
            <h3>Введение</h3>
            <p>Семантические теги делают ваш код структурированным и интуитивно понятным как для других разработчиков, так и для браузеров.</p>
        </section>
        
        <section>
            <h3>Основная часть</h3>
            <p>Использование таких элементов, как header, footer, section и article, позволяет отказаться от «синдрома избыточных div-ов». Поисковые роботы гораздо эффективнее индексируют семантически верные страницы, что улучшает SEO.</p>
        </section>
        
        <footer>
            <p>Опубликовано: 20 мая 2024 года | Категория: Веб-технологии</p>
        </footer>
    </article>
</div>

</body>
</html>
Оаоаоаоаоаоао
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Задание 1: Структура страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1 class="task-title">Задание 1: Структура страницы</h1>
    
    <header>
        <h1>Онлайн-курсы по веб-разработке</h1>
    </header>
    
    <main>
        <section>
            <h2>Наши курсы</h2>
            <p>Изучите HTML5, CSS3, JavaScript и основы веб-дизайна с абсолютного нуля до первых проектов.</p>
        </section>
        
        <section>
            <h2>Об авторе</h2>
            <p>Максим — практикующий фронтенд-разработчик с 10-летним стажем преподавания.</p>
        </section>
    </main>
    
    <footer>
        <p>Свяжитесь с нами: contact@example.com</p>
    </footer>
</div>

</body>
</html>