Что такое HTML?

Что такое HTML

HTML (HyperText Markup Language) — это язык разметки для создания веб-страниц. HTML определяет ЧТО находится на странице, а CSS определяет КАК это выглядит.

Основная структура HTML

Кажда веб-страница начинается с DOCTYPE, который говорит браузеру, что это HTML5 документ. Затем идёт корневой элемент html, внутри которого находятся head и body.

Основные теги:

• html — корневой элемент
• head — метаинформация о странице
• body — видимое содержимое
• h1-h6 — заголовки разных уровней
• p — параграф текста
• a — ссылка
• img — изображение
• div — контейнер для группировки элементов
• button — кнопка
• input — поле ввода
• form — форма для отправки данных

Что тестируют QA при работе с HTML

Структура страницы:

• Правильный порядок элементов
• Наличие всех необходимых элементов
• Корректность вложенности тегов
• Валидность HTML

Доступность:

• Наличие alt текста для изображений
• Правильные aria-labels для интерактивных элементов
• Правильная иерархия заголовков
• Возможность навигации только с клавиатуры

Функциональность:

• Ссылки работают и ведут в правильные места
• Формы корректно отправляют данные
• Кнопки реагируют на клики
• Элементы интерактивны

SEO:

• Наличие title тега с описанием
• Meta description для каждой страницы
• Правильная структура заголовков

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

Семантический HTML использует теги, которые имеют значение для браузера и поисковых систем:

Семантические теги:

• header — шапка страницы
• nav — навигация
• main — основное содержимое
• article — независимый контент
• section — логический раздел
• aside — боковая панель
• footer — подвал страницы

Это лучше, чем использовать везде div элементы. Семантичный HTML улучшает доступность и SEO.

Практические примеры для QA

Проверка формы: При тестировании формы я проверяю:

• Заполняю поле некорректными данными
• Проверяю валидацию
• Заполняю корректные данные
• Отправляю форму
• Проверяю в DevTools, что запрос пошёл с правильным методом

Проверка ссылок:

• В DevTools проверяю, что href указывает на правильный URL
• Кликаю и проверяю переход
• Проверяю целевую страницу на наличие ошибок

Важные атрибуты для QA

• id — уникальный идентификатор элемента
• class — классы элемента
• data-* — custom attributes для селекторов
• aria-label — описание для screen readers
• alt — альтернативный текст для изображений

Как HTML связан с браузером

1. Браузер получает HTML файл
2. Парсит его и создаёт DOM
3. Загружает связанные CSS и JavaScript файлы
4. Рендерит страницу
5. Обрабатывает пользовательские взаимодействия

Вывод

HTML — это фундамент веб-разработки. QA инженер должен понимать HTML, чтобы корректно использовать DevTools, писать селекторы для автотестов, проверять доступность и находить баги в структуре страницы.