Всё, что было в курсе - теги, формы, семантика, доступность - соединяется в одном простом проекте: странице-визитке. Это одностраничный макет с шапкой, фото, коротким "обо мне", списком навыков и формой для связи - классический первый учебный проект. Ничего нового учить не придётся: вся страница ниже собрана из тегов, уже разобранных в предыдущих 31 уроке.
В этом уроке
Это полностью рабочий макет - можешь скопировать код, поменять имя, текст "обо мне" и фото-заглушку на свои, и получится твоя собственная первая страница-визитка. Стилей здесь по минимуму, ровно чтобы блоки не наезжали друг на друга - настоящее оформление начнётся с CSS.
Структура страницы-визитки в HTML: header, main и footer
Разметка начинается с того же скелета, что и в самом первом уроке курса: doctype, html, head, body. Внутри - три смысловых блока вместо div-супа: header с именем в единственном h1 и навигацией по разделам страницы, main со всем содержательным контентом и footer с копирайтом. Навигация внутри header - это nav, а не голый список ссылок в div, потому что она ведёт по-настоящему значимым разделам страницы, а не одной случайной ссылке.
<header><h1>Имя Фамилия</h1><nav aria-label="Разделы страницы">...</nav></header> - один h1, значимая навигация со своим aria-label.
<div class="header"><div class="title">Имя Фамилия</div></div> - визуально может выглядеть так же, но div не даёт странице ни одного смыслового ориентира.
Контент страницы-визитки в HTML: фото, текст о себе и список навыков
У фотографии в разделе "Обо мне" обязателен содержательный alt - не "фото" и не пустая строка, а описание того, что изображено. Список навыков - это ul с отдельным li на каждый пункт, а не одна строка текста с навыками через запятую: так браузер, поисковик и скринридер видят, что это именно список из нескольких отдельных пунктов, а не сплошное предложение. У каждого раздела - свой h2, продолжающий заголовок из header без пропуска уровня.
<ul><li>HTML</li><li>Доступность</li></ul> - список из отдельных пунктов, понятный и человеку, и машине.
<p>Навыки: HTML, доступность</p> - визуально похоже, но это один сплошной абзац, а не список - у скринридера нет способа сообщить, сколько в нём пунктов.
Форма обратной связи на странице-визитке: как её правильно оформить
У каждого поля формы - свой label, связанный с полем через совпадающие for и id, а не просто placeholder, который исчезает при вводе текста. Поле email - type="email" с required, чтобы браузер сам подсказал, если поле пустое или заполнено не похожим на email текстом. Кнопка отправки - button без явного type или с type="submit": по умолчанию она и так отправляет форму.
<label for="v-email">Ваш email</label><input type="email" id="v-email" required> - подпись и поле связаны программно, а не просто расположены рядом.
<input type="email" placeholder="Ваш email"> без label - подсказка исчезнет, как только начнёшь печатать, а у скринридера не будет способа понять, что это поле для email.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Фото без alt или с alt="фото" | Скринридер либо промолчит про картинку, либо просто повторит бесполезное слово "фото" | Писать alt, который реально описывает, что на фото |
| Список навыков одной строкой текста через запятую | Выглядит как список, но структурно это один сплошной абзац | Оформлять как ul с отдельным li на каждый пункт |
| Поле формы с placeholder вместо label | Подсказка исчезает при вводе, а скринридер не может определить назначение поля | Добавлять label, связанный с полем через for/id |
| Несколько h1 или h2 сразу после h1 без промежуточного уровня | Структура страницы становится нелогичной для скринридеров и поисковиков | Один h1 в шапке, дальше заголовки разделов по порядку |
Шпаргалка: анатомия страницы-визитки
| Блок | Из чего состоит |
|---|---|
| header | Один h1 с именем + nav с навигацией по разделам |
| section "Обо мне" | h2 + img с содержательным alt + p с коротким текстом |
| section "Навыки" | h2 + ul/li со списком навыков |
| section "Контакты" | h2 + form с label+input/textarea, связанными через for/id |
| footer | Короткая строка с копирайтом |
Коротко: отвечаем на вопросы
Что обязательно должно быть на простой странице-визитке?
Минимум: заголовок с именем (h1), короткий раздел обо мне, список навыков или интересов и способ связаться - форма или хотя бы контактная информация. Этого достаточно для первого проекта - оформление и стиль уже относятся к CSS, а не к HTML.
Нужен ли JavaScript, чтобы форма на визитке действительно работала?
На уровне HTML - нет. Задача этого урока - правильная семантика и разметка формы: label, связанный с полем, нужные типы input, кнопка отправки. Настоящая отправка данных на сервер - это уже задача backend или JavaScript, и относится к более позднему этапу обучения.
Можно ли обойтись без настоящей фотографии?
Можно, на первом этапе достаточно любой картинки-заглушки. Но alt у неё всё равно должен описывать итоговый смысл изображения - например, Портрет автора страницы - а не оставаться пустым только потому, что картинка временная.
Что делать дальше, когда HTML-часть визитки готова?
Переходить к CSS. Вся смысловая структура уже на месте - CSS отвечает за то, как это будет выглядеть: отступы, цвета, шрифты, расположение блоков. HTML-часть при этом не меняется, только обрастает стилями.
На этом все 32 урока раздела «HTML - основы» пройдены. Дальше по программе - CSS - стили: оформление того, что уже осмысленно размечено.
