Введение
HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц. В этой статье мы рассмотрим основы HTML и научимся создавать структурированные веб-страницы.
Что такое HTML?
- Язык разметки: Структурирование контента
- Семантика: Придание смысла элементам
- Доступность: Создание инклюзивного контента
- SEO: Оптимизация для поисковых систем
Структура HTML-документа
1. Базовый шаблон
Основная структура
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!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>
<header>
<h1>Добро пожаловать</h1>
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contact">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Основной контент</h2>
<p>Текст статьи...</p>
</article>
</main>
<footer>
<p>© 2024 Все права защищены</p>
</footer>
</body>
</html>
|
2. Метаданные
Важные мета-теги
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <head>
<!-- Кодировка -->
<meta charset="UTF-8">
<!-- Адаптивность -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Описание -->
<meta name="description" content="Описание вашей страницы">
<!-- Ключевые слова -->
<meta name="keywords" content="ключевые, слова, через, запятую">
<!-- Автор -->
<meta name="author" content="Ваше имя">
<!-- Подключение стилей -->
<link rel="stylesheet" href="styles.css">
<!-- Подключение скриптов -->
<script src="script.js" defer></script>
</head>
|
Семантические элементы
1. Основные семантические теги
Структура страницы
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!-- Шапка сайта -->
<header>
<h1>Название сайта</h1>
<nav>
<!-- Навигация -->
</nav>
</header>
<!-- Основной контент -->
<main>
<!-- Статья -->
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи...</p>
</article>
<!-- Боковая панель -->
<aside>
<h3>Дополнительная информация</h3>
<p>Содержание боковой панели...</p>
</aside>
</main>
<!-- Подвал сайта -->
<footer>
<p>Контактная информация</p>
</footer>
|
2. Группировка контента
Организация контента
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- Секция -->
<section>
<h2>Название раздела</h2>
<p>Содержание раздела...</p>
</section>
<!-- Группа элементов -->
<div class="card">
<h3>Заголовок карточки</h3>
<p>Описание...</p>
</div>
<!-- Список -->
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
|
Формы и ввод данных
1. Создание форм
Базовая форма
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <form action="/submit" method="POST">
<!-- Текстовое поле -->
<div class="form-group">
<label for="name">Имя:</label>
<input
type="text"
id="name"
name="name"
required
placeholder="Введите ваше имя">
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
required>
</div>
<!-- Пароль -->
<div class="form-group">
<label for="password">Пароль:</label>
<input
type="password"
id="password"
name="password"
required>
</div>
<!-- Кнопка отправки -->
<button type="submit">Отправить</button>
</form>
|
2. Дополнительные элементы форм
Расширенные элементы
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!-- Чекбокс -->
<div class="form-group">
<input
type="checkbox"
id="subscribe"
name="subscribe">
<label for="subscribe">Подписаться на новости</label>
</div>
<!-- Радио кнопки -->
<div class="form-group">
<p>Выберите пол:</p>
<input
type="radio"
id="male"
name="gender"
value="male">
<label for="male">Мужской</label>
<input
type="radio"
id="female"
name="gender"
value="female">
<label for="female">Женский</label>
</div>
<!-- Выпадающий список -->
<div class="form-group">
<label for="country">Страна:</label>
<select id="country" name="country">
<option value="">Выберите страну</option>
<option value="ru">Россия</option>
<option value="us">США</option>
<option value="uk">Великобритания</option>
</select>
</div>
|
Мультимедиа
1. Изображения
Работа с изображениями
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!-- Обычное изображение -->
<img
src="image.jpg"
alt="Описание изображения"
width="800"
height="600"
loading="lazy">
<!-- Изображение с разными размерами -->
<picture>
<source
media="(max-width: 768px)"
srcset="small.jpg 300w,
medium.jpg 600w"
sizes="100vw">
<img
src="large.jpg"
alt="Описание изображения"
width="1200"
height="800">
</picture>
|
2. Видео и аудио
Медиа-элементы
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!-- Видео -->
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>Ваш браузер не поддерживает видео.</p>
</video>
<!-- Аудио -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>Ваш браузер не поддерживает аудио.</p>
</audio>
|
Доступность
1. ARIA-атрибуты
Улучшение доступности
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!-- Кнопка с ARIA -->
<button
aria-label="Закрыть меню"
aria-expanded="false"
aria-controls="menu">
<span class="icon">×</span>
</button>
<!-- Форма с ARIA -->
<form aria-labelledby="form-title">
<h2 id="form-title">Регистрация</h2>
<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
aria-required="true"
aria-describedby="email-error">
<div id="email-error" class="error" role="alert"></div>
</div>
</form>
|
2. Семантическая структура
Улучшение семантики
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!-- Навигация -->
<nav aria-label="Основное меню">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contact">Контакты</a></li>
</ul>
</nav>
<!-- Основной контент -->
<main>
<article>
<header>
<h1>Заголовок статьи</h1>
<p class="meta">Автор: Иван Иванов</p>
</header>
<section aria-labelledby="section-title">
<h2 id="section-title">Раздел статьи</h2>
<p>Текст раздела...</p>
</section>
</article>
</main>
|
Оптимизация
1. SEO-оптимизация
Мета-теги для SEO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <head>
<!-- Заголовок -->
<title>Оптимизированный заголовок | Название сайта</title>
<!-- Описание -->
<meta name="description" content="Подробное описание страницы для поисковых систем">
<!-- Open Graph -->
<meta property="og:title" content="Название страницы">
<meta property="og:description" content="Описание для социальных сетей">
<meta property="og:image" content="url-изображения">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Название для Twitter">
<meta name="twitter:description" content="Описание для Twitter">
</head>
|
2. Производительность
Оптимизация загрузки
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!-- Предзагрузка критических ресурсов -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">
<!-- Отложенная загрузка изображений -->
<img
src="image.jpg"
alt="Описание"
loading="lazy"
decoding="async">
<!-- Асинхронная загрузка скриптов -->
<script src="analytics.js" async></script>
|
Заключение
HTML - это фундамент веб-разработки. Понимание принципов HTML и правильное использование семантических элементов поможет создать качественные, доступные и оптимизированные веб-страницы.