HTML5: читаем структуру веб-страницы

1. Из чего состоит веб-страница

Откройте любую страницу Knowledge-Studio. Вы видите название, меню, блоки с информацией и контакты. HTML описывает, какие элементы есть на странице и как они связаны. Пока не думаем о цветах и оформлении — сначала собираем само содержимое.

<header>
  <h1>Knowledge-Studio</h1>
</header>
<main>
  <h2>Наши курсы</h2>
  <p>Практические занятия по веб-разработке.</p>
</main>

2. Каркас HTML-документа

Каждая HTML-страница начинается с одинакового каркаса. В head хранятся настройки документа и название вкладки. В body — то, что отображается внутри страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Курсы Knowledge-Studio</title>
</head>
<body>
  <h1>Курсы веб-разработки</h1>
  <p>Учимся создавать сайты.</p>
</body>
</html>

3. Теги, элементы и атрибуты

Посмотрим на ссылку «Программа курсов». Запись в угловых скобках — это тег. Весь фрагмент вместе с текстом — элемент. Дополнительные настройки внутри открывающего тега называются атрибутами.

<a href="program.html" class="program-link">
  Программа курсов
</a>

href сообщает браузеру, куда перейти. class — имя-метка, которую мы присвоили элементу. Значения атрибутов записаны в кавычках.

Есть пустые элементы без закрывающего тега и вложенного содержимого. Например, img показывает изображение, а meta хранит настройки документа.

4. Зачем нужны семантические теги и чем отличается div

Можно собрать шапку сайта из обычного div. Браузер покажет её содержимое — и визуально она может выглядеть точно так же. Но сам div не сообщает, что эта часть страницы является навигацией.

<!-- Нейтральная группа -->
<div>
  <a href="#courses">Курсы</a>
  <a href="#contacts">Контакты</a>
</div>

<!-- Семантическая навигация -->
<nav>
  <a href="#courses">Курсы</a>
  <a href="#contacts">Контакты</a>
</nav>

Внешне разницы почти нет. Но nav сообщает браузеру и вспомогательным технологиям: «это область навигации». Поэтому по смыслу здесь лучше использовать nav. div не плохой и не запрещённый — это нейтральная группа, когда специального смыслового тега не требуется.

Три элемента, которые часто встречаются вместе

<main>
  <section>
    <h2>Наши курсы</h2>
    <article>
      <h3>Открытое занятие</h3>
      <p>Познакомьтесь с веб-разработкой.</p>
    </article>
    <div>
      <p>Формат: для начинающих</p>
      <p>Продолжительность: 60 минут</p>
    </div>
  </section>
</main>

section объединяет тематическую часть страницы — здесь «Наши курсы». article обозначает самостоятельный материал — здесь анонс занятия. div группирует две строки с деталями: у самой группы нет отдельной роли вроде навигации или самостоятельной публикации.

Также часто встречаются header — шапка страницы или раздела, main — основное содержимое, footer — завершающая часть. aside используют для дополнительной информации, связанной с основным содержимым.

5. Заголовки и обычный текст

На странице курса есть название всей страницы, заголовок раздела и название отдельного курса. Для них используют разные уровни заголовков. Выбирайте уровень по структуре, а не по тому, какой текст выглядит крупнее.

<h1>Knowledge-Studio</h1>
<section>
  <h2>Наши курсы</h2>
  <article>
    <h3>Основы HTML</h3>
    <p>Учимся размечать веб-страницы.</p>
    <p><strong>Старт:</strong> для начинающих.</p>
  </article>
</section>

h1 — главная тема страницы. h2 — раздел внутри неё. h3 — подраздел или материал внутри раздела. Для обычных абзацев используйте p. strong отмечает важность фрагмента, em — смысловое ударение.

6. Вложенность элементов

Карточка курса состоит из заголовка и описания. Оба элемента находятся внутри самой карточки. Значит, карточка — родитель, а заголовок и абзац — её непосредственные дети.

<main>
  <article>
    <h2>Курс CSS</h2>
    <p>12 занятий с практикой.</p>
  </article>
</main>

main — родитель для article. article — непосредственный ребёнок main. Заголовок и абзац — дети article. Любой элемент внутри предка, даже через несколько уровней, называется его потомком.

7. Для чего нужны class и id

На странице несколько карточек курсов. Нам нужно пометить их одинаковым признаком, чтобы в следующем уроке можно было выбрать все такие элементы одним CSS-правилом. Для этого используют class.

<section id="courses">
  <h2>Наши курсы</h2>
  <article class="course-card">
    <h3>HTML</h3>
    <p>Структура страницы.</p>
  </article>
  <article class="course-card">
    <h3>CSS</h3>
    <p>Внешний вид страницы.</p>
  </article>
</section>

<a href="#courses">Перейти к курсам</a>

Обе карточки получили одинаковый class="course-card". Класс может повторяться на странице. Позже CSS сможет выбрать обе карточки по этой метке.

id — уникальное имя конкретного элемента. В примере id="courses" задаёт имя разделу, а ссылка href="#courses" ведёт к нему. Один и тот же id не следует повторять у разных элементов одной страницы.

У элемента может быть несколько классов: их записывают через пробел, например class="course-card featured". Это две отдельные метки, а не одно имя.

8. Ссылки, изображения и пути к файлам

Ссылка нужна, чтобы перейти на страницу или к разделу. Изображение нужно, чтобы показать картинку. Это разные задачи, поэтому используются разные элементы.

<a href="#contacts">Перейти к контактам</a>

<img src="../../assets/logo.png"
     alt="Логотип Knowledge-Studio">

<footer id="contacts">
  Контакты Knowledge-Studio
</footer>

Так браузер отобразит ссылку и изображение

Перейти к контактам

href задаёт адрес перехода. src указывает путь к изображению. alt содержит короткое описание картинки: оно пригодится, если изображение не загрузится или если страницу читает скринридер.

Путь считается относительно HTML-файла. Если рядом с index.html есть папка assets, а в ней logo.png, укажите src="assets/logo.png". Для перехода к папке уровнем выше используют ../.

9. Элементы формы, которые понадобятся в CSS

Перед оформлением формы важно узнавать её HTML-элементы. form объединяет поля и кнопки. label даёт полю понятную подпись. Атрибут for у label должен совпадать с id поля. input создаёт поле ввода или переключатель, а button — кнопку.

<form>
  <label for="email">Электронная почта</label>
  <input id="email" type="email">

  <label>
    <input type="checkbox">
    Согласен с условиями
  </label>

  <button type="submit">Отправить</button>
  <button type="button" disabled>Пока недоступно</button>
</form>

• type="email" сообщает браузеру, что поле предназначено для адреса электронной почты.
• type="checkbox" создаёт флажок, который можно отметить.
• disabled отключает поле или кнопку.
• type="submit" обозначает кнопку отправки формы, а type="button" — обычную кнопку без автоматической отправки.

Какой результат нужно получить

Это визуальный ориентир по содержанию и порядку блоков. Не копируйте оформление — соберите HTML-разметку, чтобы на странице были те же части и информация.

ВИЗУАЛЬНЫЙ ОБРАЗЕЦ ДОМАШНЕГО ЗАДАНИЯ · БЕЗ КОДА

1. Что нужно создать

Сделайте одну страницу с анонсом бесплатного открытого занятия. Посетитель должен понять, что это за занятие, какие темы будут затронуты и как перейти к блоку записи.

Файлы проекта

open-class/
├── index.html
└── assets/
    └── logo.png

В папке assets уже лежит логотип Knowledge-Studio. Используйте его в HTML.

2. Требования к HTML

• Создайте каркас HTML5 с head и body.
• Укажите язык документа, кодировку UTF-8, viewport и понятный title.
• В header разместите логотип и навигационные ссылки на разделы страницы.
• В main создайте основной анонс с одним главным заголовком h1 и коротким описанием.
• Добавьте тематический раздел программы с заголовком h2 и списком из трёх тем.
• Добавьте сведения о формате занятия и отдельную ссылку для записи.
• В footer укажите название Knowledge-Studio.
• Используйте понятные классы для повторяющихся или связанных элементов и уникальные id для разделов, к которым ведут ссылки.
• Добавьте логотип через img с корректными src и alt.
• Не используйте CSS и атрибут style.

3. Порядок работы

1. Создайте папку и откройте стартовый файл index.html.
2. Заполните каркас: название вкладки, язык, кодировку и viewport.
3. Соберите шапку, основное содержимое и нижнюю часть страницы.
4. Добавьте программу занятия, список тем и ссылку для записи.
5. Проверьте вложенность тегов, пути к логотипу и ссылки на разделы.
6. Откройте файл в браузере и сравните содержание с визуальным ориентиром.

4. Что сдать

Передайте преподавателю папку open-class с файлом index.html и папкой assets. Дополнительно приложите скриншот открытой страницы в браузере.

Критерии проверки · 100 баллов