Семантическая HTML-разметка и основы доступности (презентация)
1. Основы HTML и разметки
-
Языки разметки для веба:
-
HTML (HyperText Markup Language) — стандартный язык для создания веб-страниц.
-
Облегченные языки: Markdown (для документации), Pug (препроцессор HTML).
-
-
Версии HTML:
-
HTML4, XHTML, HTML5 (современный стандарт с семантическими тегами).
-
2. Структура HTML-документа и принципы семантической разметки
-
Тэговая модель документа:
-
Элементы (теги) как строительные блоки веб-страниц.
-
Структура тега:
<тег атрибут="значение">содержимое</тег>.
-
-
Базовый шаблон HTML-документа.
3. Препроцессоры HTML: Pug
-
Введение в Pug: синтаксис, преимущества.
-
Основные возможности: шаблонизация, миксины, наследование.
-
Пример использования Pug для упрощения верстки.
4. Введение в теги, атрибуты HTML и их использование для доступности
-
-
Основные группы элементов:
-
Теги документа:
<html>,<head>,<body>,<title>. -
Мета-теги:
<meta charset="UTF-8">,<meta name="viewport">. -
Текст:
<h1>-<h6>,<p>,<span>,<strong>,<em>. -
Ссылки:
<a href="...">. -
Списки:
<ul>,<ol>,<li>. -
Изображения и медиа:
<img>,<audio>,<video>. -
Таблицы:
<table>,<tr>,<td>,<th>. -
Формы:
<form>,<input>,<textarea>,<button>.
-
-
Группы атрибутов:
-
Универсальные:
class,id,style,title. -
События:
onclick,onmouseover,onload(для JavaScript). -
Специальные символы (мнемоники):
,©,<,>.
-
-
-
Роль атрибутов в доступности (accessibility):
altдля изображений,aria-labelдля описания элементов.
5. Формы и валидация
-
Создание форм:
<form>,<input>,<textarea>,<select>,<button>. -
Типы полей: текст, пароль, email, число, дата, чекбоксы, радиокнопки.
-
Валидация форм: атрибуты
required,pattern,min,max. -
Кастомная валидация с использованием JavaScript.
6. Семантическая верстка
-
Семантические теги HTML5:
-
<header>: Шапка страницы или раздела. -
<nav>: Навигационное меню. -
<section>: Логический раздел контента. -
<article>: Самостоятельный контент (пост, статья). -
<aside>: Боковая панель или дополнительный контент. -
<footer>: Подвал страницы или раздела. -
<figure>и<figcaption>: Медиа с описанием. -
<time datetime="...">: Указание времени.
-
-
WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications):
-
Роли (
role="navigation",role="banner"). -
Атрибуты для доступности:
aria-label,aria-describedby,aria-hidden. -
Пример:
<nav role="navigation" aria-label="Основное меню">.
-
7. SEO-технологии для улучшения поисковой видимости
-
-
Ключевые принципы:
-
Использование семантических тегов (
<h1>,<header>,<main>). -
Метатеги:
<title>,<meta name="description">,<meta name="keywords">. -
Атрибут
altдля изображений:<img src="cat.jpg" alt="Рыжий кот">.
-
-
Микроразметка:
-
Schema.org: Разметка для улучшения отображения в поисковой выдаче.
-
Пример:
<div itemscope itemtype="http://schema.org/Product">...</div>.
-
-
Индексация:
-
Файл
robots.txt: Управление доступом поисковых роботов. -
Карта сайта
sitemap.xml.
-
-
8. Инструменты:
-
-
VS Code (редактор).
-
Плагины:
-
Emmet: Ускорение верстки.
-
ESLint + HTMLHint: Проверка кода.
-
Prettier: Форматирование.
-
-
Валидаторы:
-
Дополнительно:
-
Pug: Для экспериментов с препроцессорами HTML.
-
Can I use: Проверка поддержки тегов браузерами.
-
-