Курсы

Основы web-разработки (HTML/CSS/JS)

Семантическая разметка

Модуль: Семантическая разметка

5. Упражнение: семантическая разметка

Добавьте в файл семантическую разметку.

1. Оберните заголовок первого уровня <h1> в тег <header>.
2. Оберните весь текст между header и footer в тег main
2. Каждый абзац вместе с заголовком оберните в тег <section>.
3. Последний абзац <p> оберните в тег <footer>.

Оформите web-страницу

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>План посещения Санкт-Петербурга</title>
</head>
<body>
    <!-- Оберните тег h1 в семантический тег header  -->

    <h1>Санкт-Петербург</h1>

   <!-- Между header и footer вставьте раздел main -->

      <!--  абзац со своим заголовком оберните в тег section -->

        <h2>О Санкт-Петербурге</h2>
        <p><u>Санкт-Петербург</u> — это город федерального значения, расположенный на северо-западе России. 
          Он был основан в 1703 году Петром I и является важным культурным, историческим и экономическим центром страны. 
          Санкт-Петербург славится своими архитектурными ансамблями, музеями и реками. 
          <a href="https://ru.wikipedia.org/wiki/Санкт-Петербург" target="_blank">Узнать больше</a>.
        </p>

    <!--  абзац со своим заголовком и изображением оберните в тег section -->

        <h4>Значение Санкт-Петербурга</h4>
        <p><em>Санкт-Петербург считается культурной столицей России. Здесь находятся такие всемирно известные достопримечательности, как Эрмитаж, Исаакиевский собор, Петергоф и Мариинский театр. Город также играл ключевую роль в истории России, будучи столицей империи на протяжении более двух веков.</em></p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Palace_Bridge_SPB_%28img2%29_Crop.jpg/2880px-Palace_Bridge_SPB_%28img2%29_Crop.jpg" alt="Санкт-Петербург" width="500px">

    <!-- Оберните тег p в семантический тег footer -->

    <p>&copy; 2025.  <br> Вы можете оставить обратную связь, написав на адрес: help@example.ru</p>

</body>
</html>

CSS

JS

Просмотр страницы

Результат проверки программы

Для проверки решения задачи необходимо зарегистрироваться или авторизоваться!

Курсы Основы web-разработки (HTML/CSS/JS) Семантическая разметка