Базовые теги 2

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