Ты — стажёр в компании, которая поддерживает старый сайт. Кто-то до тебя «верстал» его только при помощи <div> и <span>. Браузер всё показывает, но структура страницы бессмысленна: поисковики не могут индексировать контент, а коллегам трудно разобраться в коде. Твоя задача — навести порядок.
news_raw.html.<div> и <span> на семантические теги.<header>, <article>, <time>, <a>, <section> и т.д.news_semantic.html.<article>).<time> для дат и <a> для ссылок.news_raw.html<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новости компании</title>
</head>
<body>
<div class="page">
<div class="header">
<div class="logo">ТехПроект</div>
<div class="nav">
<div><a href="#">Главная</a></div>
<div><a href="#">Новости</a></div>
<div><a href="#">О компании</a></div>
<div><a href="#">Контакты</a></div>
</div>
</div>
<div class="main">
<div class="content">
<div class="title">Новости компании</div>
<div class="news-item">
<div class="news-date">11 ноября 2025</div>
<div class="news-header">Открыт новый филиал в Казани</div>
<div class="news-text">
<div>Компания "ТехПроект" открыла новый филиал в Казани. Новый офис займется обслуживанием клиентов из Приволжского округа.</div>
</div>
<div class="news-link"><a href="#">Подробнее...</a></div>
</div>
<div class="news-item">
<div class="news-date">9 ноября 2025</div>
<div class="news-header">Запущен новый сайт компании</div>
<div class="news-text">
<div>Теперь вы можете оформить заявку онлайн и получать новости через электронную рассылку.</div>
</div>
<div class="news-link"><a href="#">Подробнее...</a></div>
</div>
<div class="news-item">
<div class="news-date">5 ноября 2025</div>
<div class="news-header">Обновлён парк служебных автомобилей</div>
<div class="news-text">
<div>Компания закупила 10 новых электромобилей для службы доставки оборудования.</div>
</div>
<div class="news-link"><a href="#">Подробнее...</a></div>
</div>
</div>
<div class="sidebar">
<div class="sidebar-title">Популярные разделы</div>
<div class="sidebar-links">
<div><a href="#">Карьера в ТехПроекте</a></div>
<div><a href="#">Пресс-релизы</a></div>
<div><a href="#">Наши партнёры</a></div>
</div>
<div class="sidebar-title">Последние комментарии</div>
<div class="comments">
<div class="comment">
<div><span class="comment-author">Анна:</span> Отличная новость, успехов!</div>
</div>
<div class="comment">
<div><span class="comment-author">Игорь:</span> Рад, что теперь филиал и у нас в Казани!</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="contacts">
<div>Телефон: +7 (999) 123-45-67</div>
<div>Email: info@techproject.ru</div>
<div>Адрес: г. Москва, ул. Ленина, 10</div>
</div>
<div class="copyright">© 2025 ТехПроект</div>
</div>
</div>
</body>
</html>
Ты работаешь в команде разработчиков новостного портала. Твоя задача — создать HTML-шаблон для блока “новости”, который потом будут использовать дизайнеры и фронтенд-разработчики. CSS пока нет, но код должен быть ясен и предсказуем.
Создай файл news_card.html.
Сверстай одну карточку новости, содержащую:
Используй логичные теги.
Придерживайся чистой структуры: чтобы по коду можно было понять, где что находится.
<article> для одной новости.<time>.href="#").Ты делаешь сайт ресторана. Разработчики планируют позже подключить систему (бота), которая будет автоматически считывать меню из HTML. Поэтому твоя задача — сверстать меню так, чтобы оно было удобно для бота.
Создай файл menu.html.
Сверстай меню, включающее:
Добавь к каждому пункту атрибут data-price с числовым значением.
Используй списки (<ul>, <li>) или таблицы (<table>). Объясни выбор.
data-price.Компания готовит лендинг для новой услуги. Тебе дали только текстовый файл с контентом — ни единого HTML-тега. Поисковая оптимизация важна, поэтому твоя задача — оформить документ так, чтобы поисковик правильно подгрузил информацию.
Используй предоставленный текстовый файл service_text.txt.
Разметь его в HTML, применяя:
<h1> — главный заголовок страницы,<h2>–<h3> — подзаголовки,<p> — абзацы,<strong>, <em> — смысловые выделения,<ul> — списки преимуществ.Добавь метаданные (<meta charset>, <meta name="description">).
Сохрани как service.html.
<h1>, несколько <h2>.<strong> подчеркивает важность, а не просто жирность.service_text.txtУслуга "Быстрый ремонт"
Почему выбирают нас:
Бесплатная диагностика
Выезд мастера за 30 минут
Гарантия на все работы
О компании:
Мы занимаемся ремонтом техники с 2010 года. Более 5000 довольных клиентов.
Ты получил задачу сверстать страницу профиля пользователя для корпоративной системы. Дизайна пока нет — нужно просто подготовить чистую и понятную структуру, которую потом стилизует другой разработчик.
Создай файл profile.html.
Сверстай страницу, содержащую:
photo.jpg),Используй семантические теги (<header>, <main>, <section>, <footer>).
Придумай логичные классы, чтобы будущий CSS-разработчик смог легко обратиться к нужным элементам.
<header> может содержать имя и фото.<address>.photo.jpg(можно использовать любую заглушку, например https://placehold.co/200x200)