Лекция 9: Основы HTML

1 / 18

<HTML/>

Основы HTML

Структура · Текст · Ссылки

ЛЕКЦИЯ 9 · КОНЦЕПТУАЛЬНОЕ ПРОЕКТИРОВАНИЕ САЙТОВ

2 / 18

Три кита веб-страницы

<HTML>

Смысл и структура

🦴

Скелет и органы

{ CSS }

Внешний вид

👗

Одежда и макияж

JS ( )

Поведение

💪

Мышцы и рефлексы

HTML — не язык программирования. Это язык разметки, описывающий смысл содержимого.

3 / 18

Структура HTML-документа

mysite.ru

🏷 Вкладка: «Заголовок страницы»

📍 Невидимый <head>: charset, viewport, title, meta

Привет, мир!

Это мой первый сайт.

← Видимый <body>

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт.</p>
</body>
</html>

4 / 18

Семантический HTML5

Теги, которые несут смысл, а не просто «коробки»

Тег	Назначение	Сколько на странице
`<header>`	Шапка сайта или секции	Несколько
`<nav>`	Основная навигация	Обычно 1
`<main>`	Главное содержимое	Строго 1
`<section>`	Тематический раздел	Несколько
`<article>`	Самодостаточный контент (статья, пост)	Несколько
`<aside>`	Боковой контент (реклама, ссылки)	Несколько
`<footer>`	Подвал (копирайт, контакты)	Несколько

💡 Если для блока можно подобрать осмысленный тег — используйте его. <div> — только когда ничего не подходит.

5 / 18

Семантика в действии

<body>
<header>
<h1>Блог о веб-дизайне</h1>
<nav>
<a href="/">Главная</a>
<a href="/articles">Статьи</a>
</nav>
</header>
<main>
<article>
<h2>10 ошибок начинающего дизайнера</h2>
<time datetime="2026-11-03">3 ноября 2026</time>
<p>Сегодня разберём самые частые...</p>
</article>
</main>
<footer><p>© 2026 Блог о веб-дизайне</p></footer> </body>

SEO: поисковики лучше понимают структуру
Доступность: скринридеры «читают» по семантике
Поддержка: код понятен другому разработчику

6 / 18

Заголовки h1 — h6

<h1>Главный заголовок страницы</h1>
<h2>Раздел</h2>
<h3>Подраздел</h3>
<h4>Пункт подраздела</h4>

Один на страницу. Обычно совпадает с <title>

h2 — h3

Разделы и подразделы. Идут по порядку

h4 — h6

Редко. Для глубокой вложенности

⚠️ Не пропускайте уровни! После <h2> не должно идти сразу <h4>.

7 / 18

Три типа списков

<ul>

Маркированный
Порядок не важен

<ul> <li>Яблоки</li> <li>Груши</li> </ul>

<ol>

Нумерованный
Порядок важен

<ol> <li>Откройте</li> <li>Создайте</li> </ol>

<dl>

Определений
Термин + описание

<dl> <dt>HTML</dt> <dd>Язык разметки</dd> </dl>

8 / 18

Семантическое выделение текста

Тег	Назначение	Внешний вид
`<strong>`	Сильная важность	Жирный
`<em>`	Смысловой акцент (интонация)	Курсив
`<mark>`	Подсветка (как маркером)	Жёлтый фон
`<del>`	Удалённый текст	~~Зачёркнутый~~
`<code>`	Фрагмент кода	`Моноширинный`
`<blockquote>`	Блочная цитата	Отступ слева
`<abbr>`	Аббревиатура	С пунктиром

💡 <strong> ≠ <b>. Первый говорит скринридеру: «Это важно». Второй — просто жирный.

9 / 18

Гиперссылки — основа веба

<a href="https://example.com">Текст ссылки</a>

<a> — anchor

«Якорь», создающий связь между документами

href

Hypertext REFerence — куда ведёт ссылка

Типы ссылок

Внешняя → Внутренняя # Якорь ✉ mailto: ☎ tel: ⬇ download

10 / 18

Типы URL-путей

Тип	Пример	Когда использовать
Абсолютный	`https://site.com/img/logo.png`	Внешние ресурсы, email-рассылки
От корня	`/images/logo.png`	Навигация внутри сайта ✅
Относительный	`images/logo.png`	Файл рядом
Родительская папка	`../images/logo.png`	Файл на уровень выше
Якорь	`#section1`	Внутри страницы

💡 Используйте относительные пути от корня (/images/logo.png). Избавит от проблем при переносе сайта.

11 / 18

Атрибуты ссылок

Атрибут	Что делает	Пример
`href`	URL цели	`href="/about"`
`target`	Где открыть	`target="_blank"` — новая вкладка
`rel`	Отношение	`rel="noopener noreferrer"`
`download`	Скачать файл	`download="price.pdf"`
`title`	Подсказка при наведении	`title="Подробнее"`

<a href="https://external.com" target="_blank" rel="noopener noreferrer"> Внешний сайт </a>

12 / 18

Состояния ссылки (для CSS)

:link

Не посещена

:visited

Посещена

:hover

Наведение

:focus

В фокусе

:active

В момент клика

/* Правило LVHFA — порядок важен! */ a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:focus { outline: 2px solid orange; } a:active { color: orange; }

13 / 18

SEO-теги в <head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Веб-дизайн в Москве — Студия «Пиксель»</title>
 <meta name="description"
content="Создаём сайты, которые продают. 10 лет опыта.">

<meta property="og:title" content="Веб-дизайн в Москве">
<meta property="og:image" content="preview.jpg">

<link rel="icon" href="/favicon.svg">
</head>

14 / 18

Доступность (a11y)

✅ Правильно

alt у всех изображений
Связанные <label> и <input>
Иерархия заголовков h1 → h2 → h3
Контраст ≥ 4.5:1
Управление с клавиатуры

❌ Неправильно

<img src="cat.jpg"> без alt
alt="image001.jpg"
Пропуск уровней заголовков
Серый текст на белом фоне
Только цвет передаёт смысл

<img src="cat.jpg" alt="Рыжий кот спит на подоконнике">

<img src="divider.png" alt="">

15 / 18

DOM-дерево

Как браузер «видит» ваш HTML

document └── html ├── head │ └── title │ └── "Мой сайт" └── body ├── h1 │ └── "Привет!" └── p ├── "Это " ├── strong │ └── "мой" └── " сайт."

Зачем: JS обращается к элементам через DOM, CSS-селекторы работают по дереву.

16 / 18

НЕ используйте

Устаревший тег	Чем заменить
`<font>`, `<basefont>`	CSS: `font-family`, `color`
`<center>`	CSS: `text-align: center`, `margin: 0 auto`
`<marquee>`	CSS-анимации или JS
`<blink>`	Ничем. И не нужно!
`<frame>`, `<frameset>`	`<iframe>` (с осторожностью)
`<strike>`	`<del>` или `<s>`

Правило: HTML описывает смысл, CSS описывает вид. Никогда не используйте HTML для оформления.

17 / 18

Чек-лист перед публикацией

<!DOCTYPE html> в первой строке
lang="ru" у <html>
<meta charset="UTF-8"> и viewport
<title> описывает страницу (до 60 символов)
<meta name="description"> (до 160 символов)
Один <h1> на странице
Заголовки идут по порядку (без пропусков)
Семантические теги (header, nav, main, footer)
Все <img> имеют alt
Ссылки имеют понятный анкор (не «нажми сюда»)
Внешние ссылки: rel="noopener noreferrer"
Код валиден (validator.w3.org)

18 / 18

Итоги

HTML — скелет сайта. Без него нет веба
Семантика — теги со смыслом (header, article, nav)
Текст — заголовки h1-h6, абзацы p, списки ul/ol/dl
Ссылки — основа гипертекста. Внешние, внутренние, якорные, mailto, tel
SEO — title, description, OG-теги
Доступность — alt, иерархия, контраст, label

 СР №6: Создание семантической HTML-страницы «Обо мне» (3-5 страниц)

            Срок: до начала 10-й пары (HTML-формы)

← → или Пробел · Home / End