skip to main content

<html>

html

Кратко 🔗

Элемент <html> открывает контейнер, в котором находится всё содержимое страницы. Это корневой, или родительский, элемент всего документа.

Пример 🔗

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Как пишется 🔗

Тег <html> ставят сразу после <!DOCTYPE>.

💡 Атрибуты 🔗

  • manifest — указывает URI (унифицированный идентификатор ресурса) манифеста, который сообщает браузеру, какие элементы страницы могут быть закэшированы.
  • title — добавляет всплывающую подсказку, которая появляется, когда курсор мыши задерживается в окне веб-страницы.
  • version — определяет версию шаблона HTML-документа, но необходимости в этом нет (устарел в HTML4.01; вышел из употребления с версии HTML5).
  • xmlns — необязательный для HTML5, но необходимый для XHTML-документов атрибут. Определяет пространство имён XML, в котором находится документ.
  • prefix — здесь прописывают open-graph разметку, типа <html lang="ru-RU" prefix="og: [http://ogp.me/ns#](http://ogp.me/ns#)">. Это чтобы при репосте с сайта в VK, Facebook и другие соцсети передавались те заголовки, картинки и описания, которые мы укажем.

Подсказки 🔗

💡 В HTML есть атрибут lang, который подсказывает браузеру язык, на котором написан текст на странице. Если добавить lang в <html>, браузер правильно отобразит текст и подберёт подходящую для этого языка пунктуацию. Например, в английском тексте будут такие кавычки “ ”, а в русском такие «». Пишется так: lang="en".

Кроме того атрибут lang позволяет браузеру понять, отличается ли язык страницы от языка вашей системы. Если да, то браузер предложит пользователю использовать онлайн-переводчик.

HTML 🔗

<html lang="ru">
...
</html>
Коды всех языков
ЯзыкКод
Абхазскийab
Азербайджанскийaz
Аймарскийay
Албанскийsq
Английскийen
Американский английскийen-us
Арабскийar
Армянскийhy
Ассамскийas
Африкаансaf
Башкирскийba
Белорусскийbe
Бенгальскийbn
Болгарскийbg
Бретонскийbr
Валлийскийcy
Венгерскийhu
Вьетнамскийvi
Галисийскийgl
Голландскийnl
Греческийel
Грузинскийka
Гуараниgn
Датскийda
Зулуzu
Ивритiw
Идишji
Индонезийскийin
Интерлингва (искусственный язык)ia
Ирландскийga
Исландскийis
Испанскийes
Итальянскийit
Казахскийkk
Камбоджийскийkm
Каталанскийca
Кашмирскийks
Кечуаqu
Киргизскийky
Китайскийzh
Корейскийko
Корсиканскийco
Курдскийku
Лаосскийlo
Латвийский, латышскийlv
Латыньla
Литовскийlt
Малагасийскийmg
Малайскийms
Мальтийскийmt
Маориmi
Македонскийmk
Молдавскийmo
Монгольскийmn
Науруna
Немецкийde
Непальскийne
Норвежскийno
Пенджабиpa
Персидскийfa
Польскийpl
Португальскийpt
Пуштунскийps
Ретороманскийrm
Румынскийro
Русскийru
Самоанскийsm
Санскритsa
Сербскийsr
Словацкийsk
Словенскийsl
Сомалиso
Суахилиsw
Суданскийsu
Тагальскийtl
Таджикскийtg
Тайскийth
Тамильскийta
Татарскийtt
Тибетскийbo
Тонгаto
Турецкийtr
Туркменскийtk
Узбекскийuz
Украинскийuk
Урдуur
Фиджиfj
Финскийfi
Французскийfr
Фризскийfy
Хаусаha
Хиндиhi
Хорватскийhr
Чешскийcs
Шведскийsv
Эсперанто (искусственный язык)eo
Эстонскийet
Яванскийjw
Японскийja
💡 Если после открывающего тега <html> или перед закрывающим тегом <html> нет комментария, но внутри есть заполненная конструкция <body> ... </body>, теги <html> и </html> можно не писать.

В работе 🔗

Алёна,

🛠 Программисты не пишут стандартную разметку страницы руками. Для этого чаще всего используется плагин Emmet, который позволяет развернуть эту самую стандартную разметку по сочетанию клавиш ! ⟶ Tab. Альтернатива восклицательному знаку — html:5 ⟶ Tab.

В стандартной разметке «от Emmet» есть и тег html. Остаётся лишь дописать атрибут lang если он вам нужен. И можно приступать к написанию разметки страницы.

🛠 Тегу html можно добавить атрибут класса. Например, удобно при помощи JS добавлять класс в соответствии с операционной системой пользователя или по типу устройства, и, в зависимости от этого класса, менять поведение сайта. К примеру, на всех сайтах, где предусмотрены поп-апы, я подключаю скрипт, который проставляет класс ._popup-opened для тега html. Таким образом я могу добавлять дополнительные стили только тогда, когда поп-ап открыт. К примеру, чтобы страница под поп-апом не прокручивалась, нужно добавить overflow: hidden для body. Но во всё остальное время это свойство не нужно. Я пишу следующий блок кода:

CSS

html._popup-opened body {
overflow: hidden;
}

Попап открывается ⟶ скрипт добавляет класс _popup-opened для html ⟶ срабатывает стиль для body ⟶ попап закрывается ⟶ скрипт убирает класс ⟶ страница снова проматывается.

В общем, используй атрибут класса у html для дополнительной, служебной информации.


Автор: Макс 👨‍🔧