HTML-страницы целиком

НЕ ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Готовые целые HTML-файлы с разбором каждой важной строки: что делает тег, что увидите в браузере, что поменять под домашку. Скопировали блок от <!DOCTYPE html> до </html> → сохранили как index.html → открыли в Chrome — страница уже работает.

Подойдёт, если вы гуглите «html страница пример целиком», «готовый html сайт для школы», «html портфолио код», «форма обратной связи html» или «header main footer». Формат как у популярной галереи Turtle: сначала каркас, потом готовые «рецепты», под каждым — смысл, а не только код.

Здесь упор на разметку и семантику. Красивые сетки, Flexbox и адаптив — в соседней галерее HTML + CSS — готовые макеты. Оживление кнопок и форм — JavaScript DOM — 30 приёмов.

Основы целой веб-страницы

HTML-страница — один текстовый файл, который браузер читает сверху вниз и строит из тегов дерево документа. CSS добавляет внешний вид, JavaScript — поведение; без HTML не из чего собрать сайт.

С чего начать

Теория тегов и гипертекста — HTML и HTML — о разделе. Минимальный шаблон в одном блоке — Шаблоны. После того как каркас понятен, оформите макет в галерее HTML+CSS или через Tailwind. Стиль «популярной галереи» с построчным разбором — как в Turtle на Python.

Частые запросы в Google — куда смотреть

Ищут в интернете (RU / EN)	Раздел ниже
html страница пример / complete html page example	Обязательный каркас
html привет мир / hello world html code	Привет, мир
html структура страницы / html document structure	Как устроен файл
html статья h1 h2 / html blog post example	Статья с оглавлением
html список ul ol / ordered list html	Списки
html таблица table / html schedule table	Таблица
html форма обратной связи / contact form html	Форма
html img alt / insert image html	Изображение и ссылки
html details summary / accordion without js	FAQ на details
html портфолио сайт / personal portfolio html	Портфолио
html резюме cv / resume html template	Резюме
html landing page / одностраничный сайт html	Лендинг
header nav main footer / semantic html	Семантика
link stylesheet / подключить css к html	Отдельный CSS-файл
html проект для школы / лабораторная html	Чистая база

Какую страницу выбрать

Вам нужно…	Откройте пример	Что скопировать
Проверить, что файл открывается	Привет, мир	Весь блок — 15 строк
Реферат, конспект, блог	Статья	`header` + `nav` + `main` + `article`
Список шагов или покупок	Списки	`ul`, `ol` или `dl`
Расписание, оценки, тарифы	Таблица	`table`, `thead`, `tbody`
«Напишите нам» на сайте	Форма	`form`, `label`, `input`, `textarea`
Отчёт с картинкой	Медиа	`figure`, `img`, `alt`
Вопросы-ответы без JS	details	`details` + `summary`
Сдать портфолио в 11 классе	Портфолио	Секции `#about`, `#projects`
CV на одну страницу	Резюме	`section` + `time`
Сайт кружка / проекта	Лендинг	Hero + карточки + форма

Загрузка HTML-песочницы…

Вставьте любой пример из статьи в редактор — предпросмотр обновится через пару секунд. Так быстрее проверить разметку, чем каждый раз пересохранять файл на диске.

Как запустить страницу за 30 секунд

Скопируйте весь блок от <!DOCTYPE html> до </html> (включая эти строки).
VS Code или Блокнот → «Сохранить как» → index.html.
В VS Code внизу справа выберите UTF-8 (иначе кириллица сломается).
Откройте файл двойным щелчком или перетащите в Chrome / Edge / Firefox.
Правите текст → F5 — сразу видите изменение. Или вставьте код в HTMLPlayground выше на этой странице.

Проверка, что всё ок: на вкладке браузера — ваш <title>, на экране — не «лес» из тегов, а нормальный текст.

Где править	Зачем
Текст между `<p>…</p>`	Содержимое видно сразу
Атрибут `href` у `<a>`	Куда ведёт ссылка
`src` и `alt` у `<img>`	Картинка и подпись для доступности
Блок `<style>` в `<head>`	Только оформление; структура остаётся в HTML

Кому подойдёт эта страница

Школьникам — домашка «сделайте html-страницу», отчёт по информатике, первый сайт в портфолио.

Студентам — лабораторная по веб-технологиям, семантика, формы, таблицы данных.

Самоучкам — когда нужен рабочий файл «под ключ», а теорию вы дочитываете в энциклопедии.

Базовые термины

Термин	Простыми словами
Тег	Команда браузеру: «здесь заголовок», «здесь абзац»
Атрибут	Уточнение в теге: `href`, `src`, `alt`, `type`
`<head>`	Служебная часть: заголовок вкладки, кодировка, стили
`<body>`	Всё, что видит человек на экране
Семантика	Тег по смыслу (`<nav>`, `<article>`), а не голый `<div>`
DOM	Дерево элементов страницы; с ним работает JavaScript
Валидность	Страница без «сломанных» тегов; проще для поиска и скринридеров
Парный тег	Открывающий `<p>` и закрывающий `</p>` — пара обязательна
Одиночный тег	`<img>`, `<br>`, `<meta>` — закрывающего нет (в HTML5 можно без `/`)
Комментарий	`<!-- текст -->` — виден в коде, в браузере не показывается

Как устроен один HTML-файл

Браузер читает файл сверху вниз и строит дерево. Учебная схема (не код, а логика):

<!DOCTYPE html>          ← «режим HTML5»
<html>
  <head>                 ← вкладка, кодировка, стили (не на экране)
    <meta>, <title>, <style> или <link>
  </head>
  <body>                 ← всё, что видит человек
    <header>, <nav>, <main>, <footer> …
  </body>
</html>

Часть	Видно на экране?	Типичная ошибка новичка
`<head>`	Нет (кроме `<title>` на вкладке)	Пишут заголовок `h1` в `head` — на странице пусто
`<body>`	Да	Забывают закрыть `</body>` — браузер «догадывается», но в отчёте снимут баллы
`<style>`	Нет (только эффект)	Путают с тегами: стили не внутри `<p>`

Обязательный каркас каждой страницы

Любой пример ниже можно вставить внутрь этого фундамента. Стили здесь минимальные — только чтобы текст читался; оформление добавите из галереи макетов.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Краткое описание страницы для поиска и соцсетей">
  <title>Название вкладки браузера</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      line-height: 1.55;
      color: #1e1e2e;
      background: #fff;
    }
    main { max-width: 42rem; margin: 0 auto; padding: 1rem 1.25rem 2rem; }
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <!-- header, main, footer — ваша разметка -->
</body>
</html>

Что увидите в браузере: белая страница с комментарием не видна — тело пустое, пока не вставите разметку вместо . Вкладка покажет текст из <title>.

Разбор по строкам (HTML).

Строка	Что делает	Зачем
`<!DOCTYPE html>`	Включает стандартный режим HTML5	Без этой строки старые браузеры рисуют страницу «наугад»
`<html lang="ru">`	Корень документа + язык	Скринридер выберет русское произношение; поиск понимает локаль
`<head>…</head>`	Служебный блок	Сюда не кладут видимый текст абзацев
`<meta charset="UTF-8">`	Кодировка файла	Иначе «Привет» превратится в `ÐŸÑ€Ð¸Ð²ÐµÑ‚`
`viewport` + `width=device-width`	Масштаб на телефоне	Без meta страница на iPhone — мелкая «уменьшенная копия ПК»
`meta name="description"`	Краткое описание сайта	Часто попадает в сниппет Google — пишите по сути, 1–2 предложения
`<title>…</title>`	Заголовок вкладки	То, что видно в закладках и истории
`<!-- … -->`	Комментарий для себя	В отчёте можно оставить подсказку «сюда вставить меню»

Разбор CSS внутри <style> (минимум для учёбы).

Правило	Что делает	Зачем на практике
`box-sizing: border-box`	Padding входит в ширину блока	Два блока по 50% реально встают в ряд
`body { margin: 0 }`	Убирает белую полоску браузера	По умолчанию у `body` есть отступ
`main { max-width: 42rem; margin: 0 auto }`	Колонка по центру, не на весь 4K	Текст удобно читать
`img { max-width: 100% }`	Картинка не вылезает за экран	Важно для мобильного отчёта

Что поменять под своё задание: замените description и title на тему работы; в <body> вставьте любой пример ниже целиком (можно без повторного DOCTYPE — только содержимое body).

Типичные ошибки (и что видите)

Файл index.html.txt — в браузере откроется код текстом, не сайт. Включите отображение расширений в Windows.
Заголовок h1 внутри head — на странице пусто, в инспекторе (F12) заголовок «потерян».
Незакрытый <div> — блоки наезжают друг на друга, таблица «ломается».
Два h1 на странице — для школьного отчёта лучше один h1 и подразделы h2.
Кириллица в имени файла на старых хостингах — сохраняйте index.html латиницей.

Стартовые страницы

Простые целые файлы — то, что чаще всего требуют на первом уроке HTML.

Привет, мир

Зачем ищут в Google: «html hello world», «первая html страница», «как создать index.html» — самый короткий рабочий файл, чтобы убедиться, что всё сохранено правильно.

Задача. Минимальная страница: один заголовок, два абзаца, одна внешняя ссылка.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая HTML-страница. Я сохранил файл как <strong>index.html</strong>.</p>
  <p><a href="https://developer.mozilla.org/ru/docs/Web/HTML">Учебник HTML на MDN</a></p>
</body>
</html>

Что увидите в браузере: крупный заголовок «Привет, мир!», обычный текст, слово index.html жирным, синяя подчёркнутая ссылка на MDN. На вкладке — «Моя первая страница».

Разбор по строкам.

Строка	Что делает	Зачем
`<!DOCTYPE html>`	Старт HTML5	Та же строка, что в каркасе
`<head>…</head>`	Служебная часть	Здесь только кодировка, viewport и title — без CSS
`<body>…</body>`	Видимая страница	Всё, что нужно для зачёта «страница создана»
`<h1>Привет, мир!</h1>`	Главный заголовок	Самый крупный текст на странице
`<p>…</p>`	Абзац	Каждый новый абзац — новый тег `<p>`
`<strong>index.html</strong>`	Логически важное слово	Жирный без «кричащего» визуала, в отличие от устаревшего `<b>`
`<a href="https://…">`	Гиперссылка	`href` — куда перейдёт браузер по клику

Что поменять под своё задание: в <title> — тема урока; в <h1> — ваше имя; в href — ссылка на школьный сайт или GitVerse с отчётом.

Попробуйте сами.

Поменяйте <title> — обновите вкладку (F5).
Добавьте <p>Автор: Ваше Имя</p> под первым абзацем.
Удалите <meta viewport> — откройте файл на телефоне и сравните масштаб (потом верните meta).

Для отчёта

Сделайте скриншот: окно браузера + вкладка с title + исходник в VS Code рядом. Учителю видно, что вы понимаете связь файла и экрана.

Статья с заголовками и оглавлением

Зачем: реферат, конспект, «html страница с разделами», «оглавление по якорям», «header main footer пример».

Задача. Текст с разделами; клик по «Введение» в меню прокручивает к нужному заголовку на этой же странице.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Как устроена HTML-страница</title>
  <style>
    body { font-family: Georgia, serif; max-width: 40rem; margin: 0 auto; padding: 1.25rem; line-height: 1.6; }
    nav { background: #f4f4f9; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; }
    nav a { margin-right: 1rem; }
  </style>
</head>
<body>
  <header>
    <p><small>Учебный пример · 2026</small></p>
    <h1>Как устроена HTML-страница</h1>
    <p>Краткий конспект для урока информатики.</p>
  </header>

  <nav aria-label="Содержание">
    <strong>Содержание:</strong>
    <a href="#vvedenie">Введение</a>
    <a href="#tegi">Теги</a>
    <a href="#itog">Итог</a>
  </nav>

  <main>
    <article>
      <h2 id="vvedenie">Введение</h2>
      <p>Браузер читает файл и строит <strong>DOM</strong> — дерево элементов.</p>

      <h2 id="tegi">Теги</h2>
      <p>Теги бывают парными: <code>&lt;p&gt;…&lt;/p&gt;</code> и одиночными: <code>&lt;img&gt;</code>, <code>&lt;br&gt;</code>.</p>

      <h2 id="itog">Итог</h2>
      <p>Сохраните страницу в UTF-8 и откройте локально — сервер для первого урока не обязателен.</p>
    </article>
  </main>

  <footer>
    <p>Автор: Иван Иванов · <a href="mailto:ivan@example.com">ivan@example.com</a></p>
  </footer>
</body>
</html>

Что увидите в браузере: шапка с датой и h1, серый блок «Содержание» с тремя ссылками, три раздела с подзаголовками, внизу подвал с почтой. Клик по «Теги» — страница прокрутится к середине.

Разбор по строкам (главное).

Строка / блок	Что делает	Зачем
`<header>` в начале	Шапка всей страницы	Не путать с `<header>` внутри статьи (там тоже бывает — для даты поста)
`<nav aria-label="Содержание">`	Блок меню	`aria-label` озвучивается скринридером: «навигация, Содержание»
`<a href="#vvedenie">`	Якорная ссылка	`#` + `id` на той же странице — без перезагрузки
`<h2 id="vvedenie">`	Заголовок + метка	`id` должен точно совпадать с частью после `#` в ссылке
`<main>`	Основной контент	Один на страницу — главная часть для поисковиков и доступности
`<article>`	Текст статьи	Можно вынести на отдельную страницу в большом сайте
`<code><p></code>`	Показать тег как текст	`<` — это символ `<`, иначе браузер подумает, что вы открыли тег
`<footer>`	Подвал	Контакты, копирайт
`mailto:ivan@…`	Открыть почтовый клиент	Схема ссылки, не обычный https

Разбор CSS (коротко).

Правило	Эффект
`max-width: 40rem; margin: 0 auto`	Текст по центру, узкая колонка
`nav { background: #f4f4f9 }`	Подсветка блока оглавления

Что поменять: замените три h2 на разделы вашего реферата; в nav добавьте четвёртую ссылку и id на новый h2.

Попробуйте сами. Опечатайте href="#vvedenye" вместо #vvedenie — клик никуда не ведёт; исправьте и запомните: якорь = точное имя id.

Типичные ошибки

href="#Введение" и id="vvedenie" — якорь не сработает (разный регистр и язык).
Два одинаковых id на странице — нарушение стандарта, скролл ведёт к первому.
Всё в div без main — страница работает, но в отчёте по семантике снимут баллы.

Списки — маркированный и нумерованный

Зачем: «html маркированный список», «нумерованный список ul ol», «список определений dl».

Задача. На одной странице — три типа списков: пункты без порядка, шаги по порядку, термин + определение.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Списки в HTML</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.25rem; max-width: 36rem; }
    h2 { margin-top: 1.5rem; }
  </style>
</head>
<body>
  <h1>Подготовка к уроку веб-разработки</h1>

  <h2>Что взять с собой</h2>
  <ul>
    <li>Ноутбук с браузером Chrome или Firefox</li>
    <li>Блокнот для конспекта</li>
    <li>Флешка с резервной копией <code>index.html</code></li>
  </ul>

  <h2>Порядок действий на уроке</h2>
  <ol>
    <li>Создать файл <code>index.html</code></li>
    <li>Вставить каркас с <code>DOCTYPE</code></li>
    <li>Добавить заголовок и два абзаца</li>
    <li>Открыть страницу в браузере и сделать скриншот</li>
  </ol>

  <h2>Глоссарий (список определений)</h2>
  <dl>
    <dt>HTML</dt>
    <dd>Язык разметки гипертекста</dd>
    <dt>CSS</dt>
    <dd>Таблица стилей для оформления</dd>
  </dl>
</body>
</html>

Что увидите: три блока подряд — точки у «Что взять», цифры 1–4 у «Порядок действий», пары «HTML — язык…» в глоссарии.

Разбор по строкам.

Строка	Что делает	Зачем
`<ul>…</ul>`	Маркированный список	Порядок не важен
`<ol>…</ol>`	Нумерованный	Лабораторная, рецепт, инструкция
`<li>`	Один пункт	Внутри `ul` или `ol`, не напрямую в `body`
`<dl>`	Список определений	Словарь, глоссарий
`<dt>`	Термин	Жирный по умолчанию в браузере
`<dd>`	Определение	Отступ слева под термином
`<code>index.html</code>`	Моноширинный фрагмент	Имя файла в тексте

Что поменять: замените пункты на свой список покупок или план домашки.

Попробуйте сами. Вложите <ul> внутрь <li> — получите подсписок (многоуровневый список для содержания реферата).

Таблица — расписание

Зачем: «html table пример», «таблица расписание html», «thead tbody».

Задача. Таблица с подписью, шапкой столбцов и двумя уроками — как в дневнике или журнале.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Расписание — HTML table</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    table { border-collapse: collapse; width: 100%; max-width: 32rem; }
    th, td { border: 1px solid #ccc; padding: 0.5rem 0.75rem; text-align: left; }
    th { background: #eef2ff; }
    caption { caption-side: top; font-weight: 700; margin-bottom: 0.5rem; }
  </style>
</head>
<body>
  <h1>Расписание на понедельник</h1>
  <table>
    <caption>8 «А» класс</caption>
    <thead>
      <tr>
        <th scope="col">Урок</th>
        <th scope="col">Время</th>
        <th scope="col">Предмет</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>08:30–09:15</td>
        <td>Информатика</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>09:25–10:10</td>
        <td>Математика</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Что увидите: заголовок «Расписание…», подпись «8 «А» класс», таблица с синей шапкой и рамками.

Разбор по строкам.

Строка	Что делает	Зачем
`<table>`	Начало таблицы	Только для данных, не для всей вёрстки сайта
`<caption>`	Название таблицы	Озвучивается до ячеек — «таблица: 8 А»
`<thead>`	Блок заголовков	«Урок
`<tbody>`	Данные	Уроки 1, 2, …
`<tr>`	Строка	Table row
`<th scope="col">`	Заголовок столбца	Связь «эта ячейка — заголовок колонки»
`<th scope="row">1</th>`	Заголовок строки	Номер урока — логическая подпись строки
`<td>…</td>`	Обычная ячейка	Данные

Что поменять: добавьте <tr> с третьим уроком — скопируйте блок <tr>…</tr> и поменяйте ячейки.

Попробуйте сами. Уберите <thead> — таблица останется, но для слабовидящих станет непонятнее, что заголовок.

Важно

Таблицу не используют, чтобы «разложить весь сайт в клетки» — для макета есть Flexbox и Grid и готовые макеты.

Форма обратной связи

Зачем: «html форма пример», «input label for», «форма обратной связи html код», «required html».

Задача. Страница с полями, выпадающим списком, галочкой согласия и кнопкой «Отправить».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Обратная связь</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 28rem; margin: 2rem auto; padding: 0 1rem; }
    label { display: block; margin-top: 0.75rem; font-weight: 600; }
    input, textarea, select { width: 100%; padding: 0.5rem; margin-top: 0.25rem; font: inherit; }
    button { margin-top: 1rem; padding: 0.6rem 1.2rem; font-weight: 600; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Обратная связь</h1>
  <p>Заполните форму. Для учебного примера данные никуда не отправляются.</p>

  <form action="#" method="post">
    <label for="name">Имя</label>
    <input id="name" name="name" type="text" required autocomplete="name">

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required autocomplete="email" placeholder="you@mail.ru">

    <label for="topic">Тема</label>
    <select id="topic" name="topic">
      <option value="lesson">Вопрос по уроку</option>
      <option value="bug">Ошибка на сайте</option>
      <option value="other">Другое</option>
    </select>

    <label for="msg">Сообщение</label>
    <textarea id="msg" name="message" rows="5" required minlength="10"></textarea>

    <label>
      <input type="checkbox" name="agree" required>
      Согласен с обработкой данных (учебный пример)
    </label>

    <button type="submit">Отправить</button>
  </form>
</body>
</html>

Что увидите: поля с подписями, при пустом email браузер подсветит ошибку, при коротком сообщении (< 10 символов) — предупреждение. Кнопка «Отправить» с action="#" перезагрузит страницу наверх — данные никуда не уйдут (учебная заглушка).

Разбор по строкам.

Строка	Что делает	Зачем
`<form action="#" method="post">`	Контейнер полей	`action` — URL сервера; `#` = «та же страница»
`<label for="name">` + `<input id="name">`	Связка подписи и поля	Клик по «Имя» ставит курсор в input
`name="name"`	Имя поля при отправке	На сервере придёт `name=Иван`
`type="email"`	Поле почты	Без `@` браузер не даст отправить
`placeholder="you@mail.ru"`	Подсказка в пустом поле	Не заменяет `<label>`
`<select>` + `<option value="…">`	Выпадающий список	`value` уходит на сервер, текст — для человека
`<textarea rows="5">`	Многострочный текст	Отзыв, сообщение
`minlength="10"`	Минимум символов	Встроенная проверка HTML5
`type="checkbox" required`	Галочка обязательна	Без неё submit заблокирован
`<button type="submit">`	Отправка формы	Не путать с `<button>` без type — поведение другое

Что поменять: добавьте <option> «Другое»; поле name должно совпадать с тем, что ждёт ваш PHP/Node на сервере.

Попробуйте сами. Нажмите Submit с пустым email — увидите всплывающую подсказку браузера (без JavaScript).

Отправку на сервер и FormData в JS — DOM — формы.

Изображение, подпись и ссылки

Зачем: «html вставить картинку», «img src alt», «как сделать ссылку html», «figure figcaption».

Задача. Иллюстрация с подписью «Рис. 1» и список ссылок (внешняя, относительная, почта).

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Галерея — один снимок</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 0 auto; padding: 1.25rem; }
    figure { margin: 1.5rem 0; }
    figcaption { color: #555; font-size: 0.95rem; margin-top: 0.35rem; }
  </style>
</head>
<body>
  <h1>Школьный проект «Мой город»</h1>
  <p>Источники и материалы для отчёта.</p>

  <figure>
    <img
      src="https://picsum.photos/640/360"
      alt="Панорама города на закате — учебная иллюстрация"
      width="640"
      height="360"
      loading="lazy"
    >
    <figcaption>Рис. 1 — вид на центр (фото для примера с picsum.photos).</figcaption>
  </figure>

  <h2>Полезные ссылки</h2>
  <ul>
    <li><a href="https://www.w3.org/" rel="noopener noreferrer" target="_blank">W3C — стандарты веба</a></li>
    <li><a href="../index.html">Вернуться на главную (относительная ссылка)</a></li>
    <li><a href="mailto:teacher@school.ru">Написать учителю</a></li>
  </ul>
</body>
</html>

Что увидите: заголовок проект, фото с picsum (нужен интернет), подпись под фото, три ссылки разного цвета/поведения.

Разбор по строкам.

Строка	Что делает	Зачем
`<figure>`	Блок «иллюстрация + подпись»	В отчёте: «рисунок 1»
`<img src="https://…">`	Адрес картинки	Локально: `src="img/foto.jpg"`
`alt="Панорама…"`	Текстовое описание	Обязателен: иначе пустой прямоугольник при ошибке сети
`width` и `height`	Размер в разметке	Браузер резервирует место до загрузки
`loading="lazy"`	Ленивая загрузка	Картинка внизу длинной страницы не тормозит старт
`<figcaption>`	Подпись к рисунку	«Рис. 1 — …» для тетради
`target="_blank"`	Новая вкладка	Для внешних сайтов
`rel="noopener noreferrer"`	Безопасность	Вместе с `target="_blank"` — стандарт 2020-х
`href="../index.html"`	Относительный путь	На уровень выше по папкам
`mailto:teacher@…`	Почтовый клиент	Открывает «написать письмо»

Что поменять: положите foto.jpg в папку img/ и замените src на img/foto.jpg — работает офлайн для отчёта.

Типичные ошибки

src="C:\Users\…\foto.jpg" — на другом ПК путь не сработает; только относительный путь от HTML-файла.
Нет alt — в отчёте по доступности и на ЕГЭ/олимпиадках по вебу снимают баллы.
alt="" у смыслового фото — скринридер «молчит»; пустой alt только у декора.

FAQ на `<details>` и `<summary>`

Зачем: «html раскрывающийся список без javascript», «details summary пример», «аккордеон html».

Задача. Три вопроса; второй открыт сразу (open), остальные — по клику на заголовок.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Частые вопросы</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 36rem; margin: 2rem auto; padding: 0 1rem; }
    details { border: 1px solid #ddd; border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <h1>Частые вопросы</h1>

  <details>
    <summary>Нужен ли сервер, чтобы открыть HTML?</summary>
    <p>Нет. Достаточно сохранить файл и открыть в браузере. Сервер понадобится позже для форм и API.</p>
  </details>

  <details open>
    <summary>Чем HTML отличается от CSS?</summary>
    <p>HTML задаёт <strong>структуру</strong>, CSS — <strong>внешний вид</strong>. Оба файла можно связать через <code>&lt;link rel="stylesheet"&gt;</code>.</p>
  </details>

  <details>
    <summary>Где учить дальше?</summary>
    <p>См. <a href="/encyclopedia/3-data-markup/3-09-html/1">раздел HTML</a> в энциклопедии и <a href="/lab/Примеры/110">готовые макеты</a>.</p>
  </details>
</body>
</html>

Что увидите: три «плашки»; у средней ответ виден сразу; у остальных — только вопрос, по клику раскрывается абзац.

Разбор по строкам.

Строка	Что делает	Зачем
`<details>`	Блок вопрос-ответ	Встроено в HTML5, JS не нужен
`<summary>`	Заголовок, по нему кликают	Единственный обязательный ребёнок по смыслу
`<details open>`	Раскрыт при загрузке	Удобно для «самого важного» FAQ
`<p>` внутри	Текст ответа	Можно вставить ссылки и списки

Попробуйте сами. Добавьте четвёртый <details> с вопросом из вашей темы урока.

Готовые страницы целиком

Типовые «целые сайты» из одного файла — для портфолио, кружка и отчёта.

Портфолио школьника или студента

Зачем: «html портфолио сайт», «личный сайт html пример», «сайт визитка html», проект 11 класс информатика.

Задача. Одна страница: меню в шапке, три секции по якорям, карточки проектов, контакты в <address>.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Портфолио ученика 11 класса — проекты по информатике и вебу">
  <title>Анна Смирнова — портфолио</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.55; color: #1a1a2e; }
    header { background: #1e1e2e; color: #cdd6f4; padding: 1rem 1.25rem; }
    header a { color: #89b4fa; text-decoration: none; margin-right: 1rem; }
    header a:hover { text-decoration: underline; }
    main { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
    .projects { display: grid; gap: 1rem; }
    article.project { border: 1px solid #e5e5e5; border-radius: 10px; padding: 1rem; }
    footer { text-align: center; padding: 1rem; background: #f4f4f9; font-size: 0.9rem; }
  </style>
</head>
<body>
  <header>
    <p><strong>Анна Смирнова</strong> · ученица 11 «Б»</p>
    <nav aria-label="Разделы">
      <a href="#about">Обо мне</a>
      <a href="#projects">Проекты</a>
      <a href="#contact">Контакты</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h1>Обо мне</h1>
      <p>Интересуюсь веб-разработкой и анализом данных. Цель — поступить на программную инженерию.</p>
      <ul>
        <li>Языки: HTML, CSS, Python</li>
        <li>Кружок: робототехника и 3D-печать</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Проекты</h2>
      <div class="projects">
        <article class="project">
          <h3>Сайт кружка «Робот»</h3>
          <p>Одностраничный HTML+CSS, адаптив под телефон.</p>
          <p><a href="#">Скриншот в отчёте (ссылка-заглушка)</a></p>
        </article>
        <article class="project">
          <h3>Игра на Turtle</h3>
          <p>Графика на Python, <a href="/lab/Примеры/111">по мотивам галереи Turtle</a>.</p>
        </article>
      </div>
    </section>

    <section id="contact">
      <h2>Контакты</h2>
      <address>
        Email: <a href="mailto:anna@example.com">anna@example.com</a><br>
        Город: Казань
      </address>
    </section>
  </main>

  <footer>
    <p>© 2026 Анна Смирнова · Учебное портфолио</p>
  </footer>
</body>
</html>

Что увидите: тёмная шапка с именем и тремя ссылками; при клике «Проекты» — прокрутка; две карточки в сетке; подвал с копирайтом.

Разбор по блокам (что написать в отчёте).

Блок кода	Что делает	Зачем учителю
`<header>` + `<nav>`	Шапка и меню	Семантика: не `div class="menu"`
`href="#about"`	Якорь к секции	Одностраничный сайт без JS
`<section id="about">`	Раздел «Обо мне»	`id` совпадает с якорем
`<h1>` внутри about	Главный заголовок страницы	Один `h1` на документ
`<ul>` навыков	Список технологий	HTML, CSS, Python — видно содержание
`.projects` + `display: grid`	Сетка карточек	Минимальный CSS; подробнее — макеты 110
`<article class="project">`	Один проект	Отдельная сущность в списке
`<address>`	Контакты	Тег для email, не «просто div»
`<footer>`	Подвал	Копирайт, год

Что поменять: ФИО, класс, проекты, mailto: на свою почту; ссылку на Turtle замените на свой GitHub.

Попробуйте сами. Удалите display: grid — карточки встанут столбиком; верните — снова в ряд (на широком экране).

Резюме одной страницей

Зачем: «html resume template», «резюме html страница», «cv html пример».

Задача. CV с контактами, навыками, опытом и датами — печать через Ctrl+P → «Сохранить как PDF».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Резюме — Петр Козлов</title>
  <style>
    body { font-family: "Segoe UI", system-ui, sans-serif; max-width: 50rem; margin: 1.5rem auto; padding: 0 1.25rem; line-height: 1.5; }
    h1 { margin-bottom: 0.25rem; }
    .meta { color: #555; margin-bottom: 1.5rem; }
    section { margin-bottom: 1.25rem; }
    ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
  </style>
</head>
<body>
  <header>
    <h1>Петр Козлов</h1>
    <p class="meta">Junior Frontend · Казань · <a href="tel:+79001234567">+7 900 123-45-67</a></p>
  </header>

  <section>
    <h2>О себе</h2>
    <p>Вёрстка учебных лендингов, основы JavaScript. Ищу стажировку.</p>
  </section>

  <section>
    <h2>Навыки</h2>
    <ul>
      <li>HTML5, семантика, формы, таблицы</li>
      <li>CSS — Flexbox, адаптив, переменные</li>
      <li>Git — commit, branch, pull request</li>
    </ul>
  </section>

  <section>
    <h2>Опыт</h2>
    <article>
      <h3>Волонтёр — школьный сайт</h3>
      <p><time datetime="2025-09">Сентябрь 2025</time> — <time datetime="2026-05">май 2026</time></p>
      <p>Вёрстка страниц новостей, проверка в Lighthouse.</p>
    </article>
  </section>

  <section>
    <h2>Образование</h2>
    <p>Колледж информационных технологий, 2 курс</p>
  </section>
</body>
</html>

Что увидите: имя крупно, серая строка с должностью и телефоном (tel: откроет набор на телефоне), блоки «О себе», «Навыки», «Опыт» с датами.

Разбор по строкам.

Строка	Что делает	Зачем
`<a href="tel:+7900…">`	Ссылка на звонок	На мобильном — сразу набор номера
`<section>` без `id`	Логический блок	Разделы резюме
`<article>` в «Опыт»	Одна позиция	Можно добавить второй `<article>`
`<time datetime="2025-09">`	Машинная дата	`datetime` — для парсеров; текст — «Сентябрь 2025» для человека

Что поменять: подставьте свои навыки и даты стажировки.

Попробуйте сами. Ctrl+P → PDF — приложите к заявке на стажировку вместе с ссылкой на портфолио.

Лендинг кружка или проекта

Зачем: «html landing page», «одностраничный сайт html», «сайт кружка html», hero section html.

Задача. Яркая шапка-hero, три карточки преимуществ, форма записи внизу, кнопка «Записаться» ведёт к форме.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Кружок робототехники для школьников 5–9 классов">
  <title>Кружок «Робот» — запись</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .hero { background: linear-gradient(135deg, #4361ee, #3a0ca3); color: #fff; padding: 3rem 1.25rem; text-align: center; }
    .hero h1 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); }
    .btn { display: inline-block; margin-top: 1rem; padding: 0.65rem 1.25rem; background: #fff; color: #3a0ca3; font-weight: 700; text-decoration: none; border-radius: 8px; }
    section { max-width: 48rem; margin: 0 auto; padding: 2rem 1.25rem; }
    .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .card { border: 1px solid #e5e5e5; border-radius: 10px; padding: 1rem; }
  </style>
</head>
<body>
  <header class="hero">
    <h1>Кружок «Робот»</h1>
    <p>Собираем моторы, пишем код, участвуем в соревнованиях.</p>
    <a class="btn" href="#signup">Записаться</a>
  </header>

  <section>
    <h2>Почему к нам</h2>
    <div class="cards">
      <article class="card">
        <h3>Наставники</h3>
        <p>Инженеры из вуза и IT-компаний.</p>
      </article>
      <article class="card">
        <h3>Оборудование</h3>
        <p>Arduino, 3D-принтер, полигон для роботов.</p>
      </article>
      <article class="card">
        <h3>Расписание</h3>
        <p>Суббота 10:00–13:00, 2 раза в месяц — соревнования.</p>
      </article>
    </div>
  </section>

  <section id="signup">
    <h2>Запись</h2>
    <form action="#" method="post">
      <p>
        <label for="child">Имя ученика</label><br>
        <input id="child" name="child" required>
      </p>
      <p>
        <label for="parent">Телефон родителя</label><br>
        <input id="parent" name="phone" type="tel" required>
      </p>
      <button type="submit">Отправить заявку</button>
    </form>
  </section>

  <footer>
    <p>© Кружок «Робот», школа №12 · <a href="mailto:robot@school.ru">robot@school.ru</a></p>
  </footer>
</body>
</html>

Что увидите: синий градиент вверху, белая кнопка «Записаться» (скролл к форме), три карточки в ряд на широком экране, форма с двумя полями.

Разбор по строкам (ключевое).

Строка	Что делает	Зачем
`<header class="hero">`	Шапка-баннер	Можно `header` + класс для стиля
`linear-gradient(…)`	Фон градиент	Чистый CSS, без картинки
`font-size: clamp(1.5rem, 4vw, 2.25rem)`	Адаптивный заголовок	На телефоне мельче, на мониторе крупнее
`<a class="btn" href="#signup">`	Кнопка-ссылка	Не `<button>` — переход к якорю формы
`grid-template-columns: repeat(auto-fit, …)`	Адаптивные карточки	Сами перестраиваются в столбик на узком экране
`<section id="signup">`	Блок записи	Цель якоря `#signup`
`<input type="tel">`	Поле телефона	На мобильном — цифровая клавиатура

Что поменять: название кружка, тексты карточек, поля формы под вашу школу.

Utility-версия тех же блоков — Tailwind 1117. Сетка и hero подробнее — макеты 110.

Семантика — что выбрать вместо «голого div»

Задача	Лучше тег	Не лучше
Шапка сайта	`<header>`	`<div class="header">`
Меню ссылок	`<nav>`	`<div class="menu">`
Основной текст	`<main>`	`<div id="content">`
Отдельная статья	`<article>`	`<div class="post">`
Боковая колонка	`<aside>`	`<div class="sidebar">`
Подвал	`<footer>`	`<div class="footer">`
Дата публикации	`<time datetime="…">`	`<span>2026</span>`
Цитата	`<blockquote>` + `<cite>`	`<p>«…»</p>`

Скринридеры и поисковые системы опираются на такую структуру. Внешний вид по-прежнему задаёт CSS.

Страница блога — один пост

Зачем: «html blog post», «страница статьи html», «blockquote html».

Задача. Пост с датой, автором, цитатой учителя и нумерованным списком шагов.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Как я сдал проект по HTML</title>
  <style>
    body { font-family: Georgia, serif; max-width: 42rem; margin: 0 auto; padding: 1.25rem; line-height: 1.65; }
    .meta { color: #666; font-size: 0.95rem; }
  </style>
</head>
<body>
  <header>
    <p><a href="index.html">← Все записи</a></p>
  </header>
  <main>
    <article>
      <header>
        <h1>Как я сдал проект по HTML</h1>
        <p class="meta">
          <time datetime="2026-05-15">15 мая 2026</time> ·
          <span>Автор: <cite>Мария К.</cite></span>
        </p>
      </header>
      <p>Сначала собрала каркас из этой галереи, потом добавила стили из <a href="/lab/Примеры/110">макетов CSS</a>.</p>
      <blockquote>
        <p>Главное — один <code>h1</code> и понятные заголовки разделов.</p>
        <footer>— отзыв учителя</footer>
      </blockquote>
      <h2>Что сделала</h2>
      <ol>
        <li>index.html с семантикой</li>
        <li>Проверка в DevTools (F12)</li>
        <li>Скриншоты в отчёт</li>
      </ol>
    </article>
  </main>
</body>
</html>

Разбор.

Элемент	Зачем в отчёте
Вложенный `<header>` в `<article>`	Шапка статьи (дата), не всей сайта
`<cite>`	Имя автора как цитата/ссылка на персону
`<blockquote>` + `<footer>`	Цитата с подписью «— отзыв учителя»
`<footer>` внутри blockquote	Подпись источника цитаты (допустимо в HTML5)

Подключить отдельный файл стилей

Зачем: «как подключить css к html», «link rel stylesheet», структура папок проекта.

Когда CSS выносится из HTML (привычка для «взрослых» проектов и курсовых):

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мой сайт</title>
  <link rel="stylesheet" href="css/style.css">
</head>

Файлы на диске:

my-site/
  index.html
  css/
    style.css
  img/
    logo.png

Строка	Что делает	Зачем
`<link rel="stylesheet" href="css/style.css">`	Подключает внешний CSS	Один раз стили — на всех страницах сайта
`href="css/style.css"`	Путь от HTML-файла	Файлы в одной папке `my-site/`

src у картинки: img/logo.png. Путь относительный — переносите папку целиком на флешку или хостинг.

Чистая база для своего проекта

Зачем: «html шаблон сайта», «скелет html страницы», старт курсовой или хакатона.

Скопируйте и наращивайте секции внутри <main>.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Краткое описание вашего сайта">
  <title>Мой проект</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.55; }
    .skip { position: absolute; left: -9999px; }
    .skip:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem; z-index: 9; }
  </style>
</head>
<body>
  <a class="skip" href="#main">Перейти к содержимому</a>
  <header>
    <p><strong>Название проекта</strong></p>
    <nav aria-label="Главное меню">
      <a href="#main">Главная</a>
      <a href="#about">О проекте</a>
    </nav>
  </header>
  <main id="main">
    <h1>Заголовок</h1>
    <p>Текст страницы.</p>
  </main>
  <footer>
    <p><small>© 2026</small></p>
  </footer>
</body>
</html>

Разбор по строкам.

Строка	Что делает	Зачем
`<link rel="icon" href="favicon.ico">`	Иконка вкладки	Мелочь, но портфолио выглядит «как сайт»
`<a class="skip" href="#main">`	Skip link	Tab с клавиатуры — сразу в контент
`.skip { left: -9999px }`	Ссылка скрыта	Видна только при фокусе — стандарт a11y
`<main id="main">`	Цель skip-link	`id` совпадает с `href="#main"`

Что поменять: пункты в <nav>, секции #about как в портфолио.

Типовые задания из школы и вуза — что копировать

Формулировка в задании	Возьмите из главы
«Создайте HTML-страницу с заголовком и абзацем»	Привет, мир
«Страница с гиперссылкой на источник»	Привет или Медиа
«Таблица расписания / оценок»	Таблица
«Форма регистрации / обратной связи»	Форма
«Сайт-портфолио / визитка»	Портфолио
«Одностраничный сайт организации»	Лендинг
«Использовать семантические теги»	Семантика + любой полный пример

Частые вопросы

Чем эта глава отличается от HTML + CSS — макеты?
Здесь — целые страницы с разбором тегов (формы, таблицы, семантика, портфолио). В 110 — упор на вёрстку и CSS (центрирование, Grid, адаптив).

Нужен ли интернет?
Для локальных примеров — нет. Картинки с https://… (picsum) требуют сеть при открытии файла.

Почему форма не отправляет письмо?
В учебных файлах action="#" — заглушка. Нужен backend (PHP, Node, форма на хостинге) или сервис форм.

Как сдать работу учителю?
Папка с index.html, картинками и css/; архив ZIP или ссылка на GitHub / GitVerse.

Когда подключать JavaScript?
Когда нужны вкладки без перезагрузки, проверка формы, галерея — см. DOM — 30 приёмов.

Что изучить дальше

Тема	Куда перейти
Все теги и гипертекст	HTML
Сетки, центрирование, адаптив	HTML + CSS — макеты
Utility-классы	Tailwind — блоки
Скрипты в странице	JavaScript DOM
Запросы к API	Fetch / axios
Компоненты React	React — рецепты
Статика в Docker	Dockerfile — образы

Для отчёта и портфолио

В описании работы укажите, какие семантические теги использовали: «шапка на header, навигация в nav, проекты в article». Одно точное название тега показывает, что вы понимаете разметку, а не только скопировали шаблон.

См. также

Другие статьи этого же раздела в боковом меню (как на странице "О разделе").

HTML-страницы целиком

Основы целой веб-страницы

Частые запросы в Google — куда смотреть

Какую страницу выбрать

Как запустить страницу за 30 секунд

Базовые термины

Как устроен один HTML-файл

Обязательный каркас каждой страницы

Стартовые страницы

Привет, мир

Статья с заголовками и оглавлением

Списки — маркированный и нумерованный

Таблица — расписание

Форма обратной связи

Изображение, подпись и ссылки

FAQ на `<details>` и `<summary>`

Готовые страницы целиком

Портфолио школьника или студента

Резюме одной страницей

Лендинг кружка или проекта

Семантика — что выбрать вместо «голого div»

Страница блога — один пост

Подключить отдельный файл стилей

Чистая база для своего проекта

Типовые задания из школы и вуза — что копировать

Частые вопросы

Что изучить дальше

См. также

📄️Готовые решения

📄️Простой консольный чат на CSharp

📄️HTML + CSS — готовые макеты

📄️Примеры фигур Turtle на Python

📄️Примеры фигур Panda3D на Python

📄️Docker Compose — готовые стеки

📄️Nginx — конфиги под задачу

📄️Dockerfile — 10 типовых образов

📄️Prometheus + Grafana — запросы

📄️Kubernetes YAML — минимальные манифесты

📄️Matplotlib — графики

📄️Pandas — типовые операции

Основы целой веб-страницы​

Частые запросы в Google — куда смотреть​

Какую страницу выбрать​

Как запустить страницу за 30 секунд​

Базовые термины​

Как устроен один HTML-файл​

Обязательный каркас каждой страницы​

Стартовые страницы​

Привет, мир​

Статья с заголовками и оглавлением​

Списки — маркированный и нумерованный​

Таблица — расписание​

Форма обратной связи​

Изображение, подпись и ссылки​

FAQ на <details> и <summary>​

Готовые страницы целиком​

Портфолио школьника или студента​

Резюме одной страницей​

Лендинг кружка или проекта​

Семантика — что выбрать вместо «голого div»​

Страница блога — один пост​

Подключить отдельный файл стилей​

Чистая база для своего проекта​

Типовые задания из школы и вуза — что копировать​

Частые вопросы​

Что изучить дальше​

Связанные темы

См. также

📄️Готовые решения

📄️Простой консольный чат на CSharp

📄️HTML + CSS — готовые макеты

📄️Примеры фигур Turtle на Python

📄️Примеры фигур Panda3D на Python

📄️Docker Compose — готовые стеки

📄️Nginx — конфиги под задачу

📄️Dockerfile — 10 типовых образов

📄️Prometheus + Grafana — запросы

📄️Kubernetes YAML — минимальные манифесты

📄️Matplotlib — графики

📄️Pandas — типовые операции

Основы целой веб-страницы

Частые запросы в Google — куда смотреть

Какую страницу выбрать

Как запустить страницу за 30 секунд

Базовые термины

Как устроен один HTML-файл

Обязательный каркас каждой страницы

Стартовые страницы

Привет, мир

Статья с заголовками и оглавлением

Списки — маркированный и нумерованный

Таблица — расписание

Форма обратной связи

Изображение, подпись и ссылки

FAQ на `<details>` и `<summary>`

Готовые страницы целиком

Портфолио школьника или студента

Резюме одной страницей

Лендинг кружка или проекта

Семантика — что выбрать вместо «голого div»

Страница блога — один пост

Подключить отдельный файл стилей

Чистая база для своего проекта

Типовые задания из школы и вуза — что копировать

Частые вопросы

Что изучить дальше