Клавиша / esc
Стена с граффити, которую начали закрашивать, а рядом ведро с краской
Иллюстрация: Кира Кустова

<html>

Содержит всю страницу внутри — и метаданные, и контент.

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

Кратко

Скопировано

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

Пример

Скопировано
        
          
          <!DOCTYPE html><html>  <head>    ...  </head>  <body>    ...  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

        
        
          
        
      

Как пишется

Скопировано

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

Атрибуты

Скопировано
  • title — добавляет всплывающую подсказку, которая появляется, когда курсор мыши задерживается в окне веб-страницы.
  • 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> для дополнительной, служебной информации.