Базовые теги

Информация, которая дана ниже, не является исчерпывающей, т.е. не будут перечислены абсолютно все параметры абсолютно всех тегов. Будет дан только тот материал, который имеет практический смысл в повседневной вёрстке.

Тег <html> открывает документ, всё что за пределами этого тега не будет обрабатываться как HTML. Атрибут lang содержит двухбуквенный код языка текущего документа. Этот параметр необязателен.

Теги <head> и <body> часто называют разделами. В стандарте HTML5 код документа будет валиден и без них, браузер, в случае их отсутствия, вставит их автоматически. Однако, не рекомендую пользоваться этим. Раздел <head> содержит метаинформацию о документе. Метаинформация — это информация об информации. Сейчас разберём вложенные теги раздела <head> и всё станет понятнее.

Тег <meta /> — основной источник метаинформации. Разберём первый тег <meta />. Напомню его:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Он содержит атрибут http-equiv, он подразумевает, что данный тег является эквивалентом HTTP-заголовка (HTTP header equivalent). На самом деле, в браузере отображается не всё, что приходит от сервера. Существуют HTTP-заголовки, они передаются непосредственно перед HTML-кодом страницы. Например, HTTP-заголовок X-Powered-By содержит информацию о системе управления сайтом, либо о разработчике сайта. Вот пример HTTP-заголовков сайта, на котором я писал этот курс/книгу.

Итак, первый атрибут самого первого тега <meta /> сообщает, что он является эквивалентом HTTP-заголовка. Второй параметр content содержит информацию о MIME-типе и кодировке. MIME-тип документа из листинга text/html, а кодировка — UTF-8. Когда сайт отдаёт карту сайта для поисковых роботов, обычно она лежит по адресу http://example.ru/sitemap.xml, вот тогда сервер посылает заголовок с MIME-типом text/xml. Ещё почти каждый сайт содержит файл robots.txt, в нём находится адрес файла sitemap.xml, зеркала сайта и список страниц, запрещённых к индексации. С ним сервер посылает заголовок, содержащий MIME-тип text/plain. Если вдруг когда-то вам придётся напрямую указывать MIME-тип отличный от этих трёх, то их легко найти хотя бы тут.

Второй тег <meta />.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Как видим, атрибут name содержит значение viewport. В контексте создания сайтов viewport означает первый экран сайта в данном браузере в данном разрешении. Последнее уточнение очень важно. Дело в том, что даже в одном браузере на одном устройстве первый экран может захватывать очень разную область.

Значение width=device-width, initial-scale=1.0 сообщает, что сайт адаптивен и каскадные таблицы стилей (CSS) адекватно отобразят сайт при разных разрешениях. Подробный разбор различных значений данного тега дано тут, но при обычной вёрстке обычных сайтов вы в 99,9% будете указывать именно это значение viewport.

Третий тег <meta />.

<meta name="author" content="" />

Нужен чтобы указать компанию-производитель сайта, либо же удовлетворить тщеславие веб-мастера :).

Тег <title>.

<title>Вёрстка - введение</title>

Этот тег нужен, чтобы выводить в вкладке браузера название документа. Очень важен для SEO. Фактически, этот тег должен включать в себя словосочетание, по которому владелец хочет выйти в топ выдачи поисковых систем.