Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов… И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке — <html>, <head> и <body>. Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — тег-декларация <!DOCTYPE>, поэтому затрагивать его мы не будем.
В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про теги форматирования документа (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.
И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги <html>, <head> и <body> ровно в таком порядке, в каком они написаны.
Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:
А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.
Функции тега <html>
Итак, тег <html> является контейнерным (понятие и виды тегов). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги <head> и <body>). Открывающий тег <html> идет сразу после декларации Doctype, а закрывающий </html> стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.
Теоретически, он и сам может понять что и как. Ведь что такое браузер? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.
Даже учитывая то, что функция данного тега лишь в обозначении границ содержимого, он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию.
Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. Атрибут title — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст.
Также и в случае с этим тегом:
А вот что вы увидите, наведя курсор на документ с данным содержимым:
Предпочтительнее использовать атрибут title не в теге <html>, а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.
Функция тега <head>
И следующим на очереди идет тег <head>. В нем содержится вся техническая информация о странице, которая служит для помощи браузеру и поисковым системам.
Тег является контейнерным и следует сразу после <html>, только в отличии от последнего, закрывающий тег </head> стоит не в конце документа, а перед открывающим тегом <body>.
Какую же информацию можно увидеть в <head>? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы.
Все содержимое этого тега предназначено для поисковых систем и браузеров. Единственное, что вы хоть как-то можете увидеть это тег <title>, который отвечает за заголовок окна веб-страницы. Вот пример:
Текст после иконки и есть содержание тега <title>. А теперь рассмотрим содержание <head>, которое мы увидеть не можем, но которое является очень важной частью создания и продвижения сайта. В первую очередь это строка
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content=»text/html; charset=UTF-8″). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка
<link href="https://monetavinternete.ru/.../style.css" rel="stylesheet" media="screen" type="text/css" /> |
указывает на то, что подключен (rel=»stylesheet») файл с каскадными таблицами стилей (type=»text/css»), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей.
Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с блогом на WordPress) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack, поэтому они и присутствуют в пределах <head>.
Все три являются частью внутренней оптимизации сайта. Тег описания может выступать в роли сниппета в поисковой выдаче (вопрос довольно спорный, но все-таки следует заполнить данный тег).
С ключевыми словами, думаю, итак все понятно. А вот тег canonical указывает поисковой системе дублированные страницы (страницы, на которых имеется схожий контент) для того, чтобы не попасть под фильтр за неуникальность контента.
Функции тега <body>
Вот он — основной тег интернет-страницы. Все, что вы видите в окне своего браузера — содержимое тега <body>. Здесь находится все: и текст, и html-код, и изображения, и скрипты. Так что много рассказывать про данный тег не буду. Из атрибутов могу отметить несколько:
- Background — устанавливает определенный фон на всю веб-страницу. Источник вы указываете сами
- text — устанавливает цвет текста. Цвет, обычно, указывают в html-коде. Например, #8958FC
- bgcolor — устанавливает цвет фона, если не задано фоновое изображение с помощью первого атрибута
- bgproperties — параметр динамичности фона — прокручивать его вместе со всей страницей, или же оставить на месте.
Атрибутов много, плюс подходят почти все универсальные, поэтому расписывать все нет смысла.
Один интересный факт. Все вы знаете, что браузеры появлялись версия за версией и каждый мог разбирать определенное количество тегов. Возьмем один из первых браузеров — Интернет Эксплорер.
Факт заключается в том, что в 1-ой версии поддерживался лишь <body>, во 2-ой — <html>, и, наконец, в 3-ей — <head>. Версии реализовывались довольно быстро, откуда можно сделать вывод о значимости тегов и скорости развития технологий.
Напоследок скажу, что не забывайте прописывать данные теги. Хотя сейчас каждая CMS — система управления контентом — делает это сама.
