Кратко
СкопированоЭлемент <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> для дополнительной, служебной информации.