Тег <html> - корневой элемент страницы: он идёт сразу после <!DOCTYPE html> и оборачивает собой весь остальной код. Внутри него - ровно два прямых потомка: <head> со служебной информацией и <body> с тем, что видит посетитель. Сам по себе тег ничего не отображает - но у него есть один атрибут, от которого реально зависит поведение страницы.
<!DOCTYPE html>
<html lang="ru">
<head>...</head>
<body>...</body>
</html>Атрибут lang - единственный, который важен
lang сообщает браузеру и поисковику, на каком языке написана страница. От него зависит произношение текста экранными дикторами для незрячих пользователей, язык проверки орфографии в браузере, а ещё - какие CSS-правила сработают для конкретного языка через селектор :lang(). Перенос длинных слов по слогам (hyphens: auto) тоже завязан на язык, но здесь стоит быть честным: сама расстановка переносов у разных браузеров поддержана для разных языков неодинаково - например Chrome умеет переносить по слогам далеко не любой язык, поэтому в живом примере ниже показан более надёжный эффект - смену кавычек.
Пример: как lang меняет оформление текста
Нажмите на переключатель - в русской типографике кавычки-ёлочки «такие», в английской - прямые "такие". Браузер выбирает нужные через CSS-селектор :lang(), который смотрит именно на атрибут lang:
Дизайнер сказал: простота - это сложно.
Атрибут переключается на самом абзаце, а не на реальном <html> страницы, - иначе демонстрация поменяла бы язык всей странице целиком. Кавычки меняются мгновенно и без перезагрузки, потому что CSS сам следит за атрибутом lang через :lang() - это не хитрость конкретно этого примера, а обычное поведение браузера, которым можно пользоваться в своей вёрстке.
Атрибуты
| Атрибут | Для чего |
|---|---|
lang | Язык страницы: ru, en и т.д. Нужен почти всегда - влияет на перенос слов, экранные дикторы и подсказки браузера |
dir | Направление текста: ltr (слева направо, по умолчанию) или rtl - для страниц на арабском, иврите и т.п. Нужен редко |
Частые ошибки
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Забыли атрибут lang | Перенос длинных слов не работает, экранный диктор может читать русский текст с английским произношением | Добавить lang="ru" (или нужный код языка) в открывающий тег |
На странице два тега <html> | Браузер использует только первый, остальное - невалидная разметка с непредсказуемым поведением | В документе должен быть ровно один <html> |
Текст или теги стоят прямо внутри <html>, не в <head> и не в <body> | Невалидная разметка - браузер молча пытается сам исправить структуру, не всегда так, как ожидалось | Всё содержимое должно быть либо в <head>, либо в <body> |
