Name: Sobes.tech
Rating: 4.9 (250 reviews)

HTML (HyperText Markup Language) — это стандартный язык разметки документов для просмотра в браузере.

Основные понятия:

Теги: Элементы разметки, заключенные в угловые скобки (<>). Большинство тегов парные (<tag>...</tag>), но есть и одиночные (<br>, <img>).
Атрибуты: Добавляют дополнительную информацию к тегам, определяют их свойства. Записываются в виде имя="значение" внутри открывающего тега.
Элементы: Состоят из открывающего тега, содержимого и закрывающего тега (или только из открывающего тега для одиночных).

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

<!DOCTYPE html>: Объявление типа документа.
<html>: Корневой элемент документа.
<head>: Содержит метаинформацию о документе (заголовок страницы, ссылки на стили, скрипты и т.д.).
- <title>: Заголовок страницы, отображается во вкладке браузера.
- <meta charset="UTF-8">: Указывает кодировку символов.
<body>: Содержит видимое содержимое страницы (текст, изображения, ссылки, таблицы и т.д.).

Примеры часто используемых тегов:

Заголовки: <h1> - <h6>
Параграф: <p>
Ссылка: <a href="url">Текст ссылки</a>
Изображение: <img src="путь_к_изображению" alt="Описание">
Список:
- Неупорядоченный (<ul>)
- Упорядоченный (<ol>)
- Элемент списка (<li>)
Таблица:
- <table>
- <tr> (строка)
- <th> (заголовок ячейки)
- <td> (ячейка данных)
Блочные элементы: <div> (универсальный контейнер)
Строчные элементы: <span> (универсальный контейнер)
Формы:
- <form>
- <input type="..."> (поле ввода)
- <button>

Важность для QA:

Проверка структуры и валидности: Убедиться, что HTML написан корректно согласно стандартам (W3C Validator).
Доступность (Accessibility): Проверка использования семантически правильных тегов и атрибутов (alt для изображений, aria атрибуты) для обеспечения доступности контента для пользователей с ограниченными возможностями и скрин-ридеров.
Тестирование кроссбраузерности: Как страницы отображаются в различных браузерах и устройствах.
Взаимодействие с элементами: Понимание HTML-структуры необходимо для написания локаторов при автоматизации тестирования UI (XPath, CSS Selectors).

<!DOCTYPE html>
<html>
<head>
    <title>Пример HTML</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Добро пожаловать!</h1>
    <p>Это простой параграф текста.</p>
    <a href="https://www.example.com">Посетите Example</a>
    <img src="/images/logo.png" alt="Логотип компании">
    <h2>Список покупок:</h2>
    <ul>
        <li>Яблоки</li>
        <li>Молоко</li>
        <li>Хлеб</li>
    </ul>
</body>
</html>

Что ты можешь рассказать о HTML?