<html>

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <!DOCTYPE html><html>  <head>    ...  </head>  <body>    ...  </body></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 lang="ru">  ...</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

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

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

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

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

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

        
        
          
        
      

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

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