Базовые теги

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

Тег <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. Фактически, этот тег должен включать в себя словосочетание, по которому владелец хочет выйти в топ выдачи поисковых систем.

Основные теги стартовой страницы

Тег <link />.

<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />

Из названия понятно, что он нужен для присоединения к документу чего-то. Как правило, для вставки CSS-файлов (они же «таблицы стилей», они же «каскадные таблицы стилей»). Этот же тег нужен для указания, где искать фавикон. Фавикон — это иконка, которая видна на вкладке текущей веб-страницы.

В первом теге у нас указывается, что тег ссылается (rel="stylesheet") на таблицу стилей, а искать её надо по адресу css/style.css. Атрибут href всегда содержит URL-адрес. Ниже расскажу подробнее о принятой адресации.

Во втором теге мы сообщаем браузеру, что содержимым будет фавиконка (rel="shortcut icon"), искать надо по адресу ico/favicon.png. Если этот тег не указать, то браузер всё равно запросит у сервера иконку по адресу /favicon.ico. Если сервер не ответит ничего (а точнее, ответит в HTTP-заголовкеError 404. Not found.), то браузер особо не расстроится.

Тег <body> содержит тело документа, т.е. ту его часть, которую он отобразит на экране.

<h1>Привет мир!</h1>

<h1> — ещё один важный для SEO тег. Для поисковой системы желательно, чтобы его содержимое совпадало или сильно пересекалось с содержимым тега <title>. В крайнем случае он должен содержать продвигаемую фразу или её модификацию.

Всего предусмотрено 7 уровней заголовков, <h1> — самый главный, должен быть на странице в единственном экземпляре. <h2> — уровнем пониже, может содержать не более 2-х на странице. Поисковики прислушиваются к содержимому тега <h2>. <h3> — ещё ниже уровнем, тут мнения сеошников расходятся. Кто-то говорит, что их может быть до 3-х, кто-то, что до 5 на странице. Содержимому этого тега поисковики уделяют незначительно внимание, но всё же большее, чем просто тексту. <h4> — крайне редко использовал этот тег в вёрстке. Как правило, хватает трёх уровней заголовков. На всякий случай при вёрстке предусматриваем стилевое оформление до тега <h5> включительно. <h6>, <h7> — эти заголовки видел только на страницах-примерах.

Немного дополним нашу первую веб-страницу основными тегами. Вот листинг обновлённого кода страницы:

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />

</head>

<body>

	<h1>Привет мир!</h1>
	<p>Это моя первая веб-страница <a href="https://ru.wikipedia.org/wiki/Элементы_HTML">со ссылкой</a>, <em>курсивным текстом</em>, <strong>жирным текстом</strong> и <u>подчёркнутым текстом</u>.</p>

</body>

</html>

<p> — это тег, содержащий параграф. Пожалуй, один из самых распространённых.

<a> — тег гиперссылки, в параметре href содержит URL, на который перейдёт пользователь после клика на ссылке.

<em> — делает содержимое курсивным. Даёт понять поисковой системе, что на этот тег надо обратить внимание.

<strong> — выделяет текст полужирным, обращает на себя внимание поисковика.

<u> — подчёркивает текст, но почти не используется в практике, ибо такой текст легко спутать со ссылкой из-за того, что подчёркивают как правило ссылки.