Кратко
СкопированоЭлемент <html>
открывает контейнер, в котором находится всё содержимое страницы. Это корневой, или родительский, элемент всего документа.
Пример
Скопировано<!DOCTYPE html><html> <head> ... </head> <body> ... </body></html>
<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>
Как пишется
СкопированоТег <html>
ставят сразу после <!
.
Атрибуты
Скопированоmanifest
— указывает URI (унифицированный идентификатор ресурса) манифеста, который сообщает браузеру, какие элементы страницы могут быть закэшированы.title
— добавляет всплывающую подсказку, которая появляется, когда курсор мыши задерживается в окне веб-страницы.version
— определяет версию шаблона HTML-документа, но необходимости в этом нет (устарел в HTML4.01; вышел из употребления с версии HTML5).xmlns
— необязательный для HTML5, но необходимый для XHTML-документов атрибут. Определяет пространство имён XML, в котором находится документ.prefix
— здесь прописывают open-graph разметку, типа<html lang
. Это чтобы при репосте с сайта в VK, Facebook и другие соцсети передавались те заголовки, картинки и описания, которые мы укажем.= "ru - R U" prefix = "og : [ http : / / ogp . me / ns # ] ( http : / / ogp . me / ns # ) ">
Подсказки
Скопировано💡 В HTML есть атрибут lang
, который подсказывает браузеру язык, на котором написан текст на странице. Если добавить lang
в <html>
, браузер правильно отобразит текст и подберёт подходящую для этого языка пунктуацию. Например, в английском тексте будут такие кавычки “ ”
, а в русском такие «»
. Пишется так: lang
.
Кроме того, атрибут 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
→ Tab.
В стандартной разметке «от Emmet» есть и тег <html>
. Остаётся лишь дописать атрибут lang
, если он вам нужен. И можно приступать к написанию разметки страницы.
🛠 Тегу <html>
можно добавить атрибут класса. Например, удобно при помощи JS добавлять класс в соответствии с операционной системой пользователя или по типу устройства, и, в зависимости от этого класса, менять поведение сайта. К примеру, на всех сайтах, где предусмотрены попапы, я подключаю скрипт, который проставляет класс .
для тега <html>
. Таким образом я могу добавлять дополнительные стили только тогда, когда попап открыт. К примеру, чтобы страница под попапом не прокручивалась, нужно добавить overflow
для <body>
. Но во всё остальное время это свойство не нужно. Я пишу следующий блок кода:
html._popup-opened body { overflow: hidden;}
html._popup-opened body { overflow: hidden; }
Попап открывается → скрипт добавляет класс _popup
для <html>
→ срабатывает стиль для <body>
→ попап закрывается → скрипт убирает класс → страница снова проматывается.
В общем, используй атрибут класса у <html>
для дополнительной, служебной информации.