HTML Раздел Head

Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.

В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега Итак, тег является контейнерным (). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.

Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.

Даже учитывая то, что функция данного тега лишь в обозначении границ содержимого , он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию.

Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:

А вот что вы увидите, наведя курсор на документ с данным содержимым:

Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.

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

Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров . Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:

Текст после иконки и есть содержание тега . А теперь рассмотрим содержание , которое мы увидеть не можем, но которое является очень важной частью создания и продвижения сайта. В первую очередь это строка

Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега . Он указывает на связь с внешним документом. Например, строка

указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей .

Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack , поэтому они и присутствуют в пределах .

Мета теги в html - это группа специальных тегов, которые находятся между тегами и . Из названия сразу понятно, что располагаются они в начале кода.

Заголовочные теги выполняют две важные задачи:

• Сообщают информацию о html-странице браузеру;
• Сообщают информацию поисковым системам про конкретный html-страницу;

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

Эти теги можно разделить на 4 группы.

• Тег
• Теги
• Теги
• Тег

Давайте рассмотрим каждую группу в отдельности.

1. Тег

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

... Заголовок страницы ...

Грамотно составить для новичка непросто, поскольку нужно учесть несколько нюансов. Идеальный заголовочный тег должен быть привлекательным для пользователей и содержать ключевые фразы для поисковых систем. Нельзя делать этот тег очень длинным, поскольку поисковыми системами это может быть воспринято как спам. Для каждой страницы этот тег должен быть уникальным!

2. Теги

- эти группа служебных тегов, которые содержат в себе информацию о странице. Рассмотрим отдельно каждый из них.

2.1. Meta Content-Type

Синтаксис этого атрибута следующий:

... ...

Этот тег указывает кодировку страницы. Конкретное значение записывается через атрибут charset . В данном случае указана кодировка windows-1251 . Чаще всего на сайтах используется кодировка UTF-8 .

В случае, если кодировка сайта и конкретного html-страницы (или же в базе данных) не будут совпадать, то сайт может отображаться через иероглифы в некоторых браузерах.

2.2. Meta description ... ...

В атрибуте content содержится описание страницы. Чаще всего это описание используется как сниппет для поисковой системы. Description не является обязательным тегом. Например, поисковая система Яндекс на своё усмотрение определяет сниппет, Google же пользуется этим описанием и выводит так, как оно написано.

2.3. Meta keywords ... ...

Этот тег вызывает много споров о том, нужен ли он вообще. Поисковые машины не заявляют, что эти ключевые слова как-то участвуют при ранжировании сайта .

В атрибут content перечисляются ключевые слова. Вряд ли это кардинально повлияет на продвижение сайта, но при каких-то спорных моментах это может повлиять в вашу пользу. Ключевые слова должны быть написаны через запятую. Не пишите ключевые слова, которых нету на странице. Более подробно о Keywords Вы можете прочитать .

2.4. Meta refresh ... ...

Существуют множество других метатегов , но они не представляют никакой важности как для браузеров, так и для поисковых систем, поэтому нет смысла их использовать.

2.5. Meta viewport ... ... 3.3. Link rel=Alternate ... ... 4. Тег <script>

- подключение java-файлов со скриптами.

... ...

В атрибуте src указывается расположение подключаемых java-файлов. Используется для уменьшения кода на странице, а также в случае, если какие-то ява функции необходимо использовать при открытии страницы. Также это ускоряет загрузку страницы, т.к. браузеры обычно кэшируют скрипты.

Уважаемый читатель, мы рассмотрели заголовочные теги html документа. Теперь Вы лучше ориентируетесь в оптимизации сайта и в составлении грамотного кода.

Видно, что она состоит из трех основных секций.

• – корень любого HTML документа, в котором располагаются все остальные секции (данный тег должен быть в единственном экземпляре, и должен присутствовать на каждой странице).
• – заголовок в котором прописывается служебная информация и инструкции браузеру, по отображению контента.
• – основная секция в которой находится контент, то есть вся полезная информация (текст, картинки, видео). Помимо контента, в этой секции расположена сетка сайта, либо его макет – описано местоположения основных разделов сайта, таких как: шапка, подвал, главное меню, боковые колонки, и т.д.

Тег ничем особым не отличается, кроме того, что это есть корневой элемент – контейнер для всех остальных блоков. Поэтому приступим к более детальному рассмотрению секции .

Элементы данной секции напрямую не показываются на веб странице. Единственный тег из данной секции, который будет отображать информацию – это тег . В теге , секции , прописывается заголовок веб-страницы этот текст будет выведен в строке заголовка окна браузера.

Заголовок, будет выведен в строке заголовка браузера

Данный тег является единым обязательном тегом в секции .

Кроме тега , в этой секции можно размещать следующие теги: , , , .

Тег

Этот тег указывает браузеру где находятся некие внешние ресурсы, например, внешние стили (CSS). Также при помощи тега и указания соответствующего атрибута rel , можно указать адрес канала RSS, фавиконку для сайта, и другие внешние ресурсы.

Тег

Это универсальный тег, который описывает данные. Тег предоставляет метаданные о документе HTML браузеру. Метаданные, не отображаются, а только используются для служебных целей, либо движком браузера, либо поисковыми пауками. Мета элементы, как правило, используется для описания страницы (description ), указания ключевых слов (keywords ), указание автора документа (author ), указания типа контента и его кодировки, и другие метаданные.

Тег

С помощью данного тега, можно указать браузеру, где он должен искать внешние скрипты:

либо же, вставить скрипт прямо в данную секцию:

document.write("Hello World!")

Тег

Данный тег можно использовать, для того, чтобы задать стили, необходимые, только для этой странички, а также, если нету необходимости подключать внешний файл стилей, при помощи тега . Можно задавать более чем один тег

h1 {color: red} p {color: blue}

Вот и вся информация, которую необходимо знать о секции . Далее будем рассматривать секцию , которая будет содержать основной контент веб странички.

Все теги, которые расположены между и — это что-то вроде служебной технической информации. Взять для примера тег — это заголовок. Для чего он, спросите Вы?

Откройте браузер и взляните поверх всех командных строк (именно, на заглавие окна)... Увидели?

Элемент HEAD (обозначенный тегами и ) размещается непосредственно перед телом HTML-документа , которое определяется тегами и () .

Между тегами и могут находиться такие составляющие:

HEAD — определяет начало и конец элемента, внутри которого, находится вся служебная информация, предназначенная для браузера.

TITLE — указывает имя документа (интернет-страницы), которое отображается в окне обозревателя (браузера). Может быть указан, но не более одного раза.

BASE — определяет базовый адрес, от которого, в последствии, отсчитываются относительные ссылки внутри Вашего документа. Не имеет закрывающего тега . При этом, обязательным моментом здесь, является наличие хотя бы одного из параметров (атрибутов):

• HREF — определяет базовый адрес (URL) интернет-страницы;
• TARGET — определяет фрейм (его имя), который будет использован в гиперссылках по умолчанию .

Пример.

Создание сайта

...


Список
...

STYLE — служит для вставки в документ каскадной таблицы стилей CSS (Cascade Style Sheet) .

Имеет такие атрибуты:

• TYPE — определяет MIME-тип интегрируемой таблицы стилей. Является обязательным атрибутом и, как правило, имеет значение «text/css» .
• TITLE — определяет название каскадной таблицы стилей. В нем возникает необходимость, если планируют использовать в одном документе несколько правил STYLE . При этом, браузер будет вынужден спросить, какой именно из предложенных стелей будет применим к документу. Все современные браузеры игнорируют этот атрибут — можна не использовать.
  

Пример .

Использование таблицы стилей CSS

LINK — определяет взаимосвязь Вашего документа с иными объектами. Не имеет закрывающегося тега.

Атрибуты

• HREF — определяет URL документ (интернет-страницы).
• REL — определяет как взаимосвязан документ с объектом, который определен параметром HREF. Может иметь такие значения:

stylesheet — указывает на файл, котрый содержит таблицу стилей CSS. Браузер загрузит css-файл с адреса, указанного в параметре HREF и потом применит его к документу.

home — указывает на главную страницу сайта.

toc, contents — указывают на файл, который содержит оглавление документа.

index — указывает на файл, котрый содержит информацию для индексного поиска по документу.

glossary — указывает на файл который, содержит перечень терминов, что относятся к документу.

copyright — указывает на страницу сайта, в которой предоставлена информация о авторских правах, его создателях и т.п.

up, parent — указывает на «родительскую» страницу (страницу, которая стоит на ступеньку выше всех страниц).

child — указывает на «дочернюю» страницу (страницу, которая стоит на ступеньку ниже определенной).

next — указывает на следующую страницу.

previous — указывает на предыдущую страницу.

last, end — указывает на последнюю страницу.

first — указывает на первую страницу.

help — указывает на страницу с подсказкой.

• TYPE — определяет MIME-тип для объекта, указанного в параметре HREF.

Примеры .

Элемент DIV

Полдневье

META — служит для вставки мета-данных. Этот тег позволяет вставлять в элемент HEAD разную полезную техническую информацию, которая, в итоге, не будет видна пользователю, но браузер ее распознает. Такая инфа просто необходима для правильной индексации страниц сайта поисковыми роботами (о них мы поговорим, когда наступит нужный момент в обучении). Не имеет закрывающегося тега.

Имеет в своем распоряжении такие атрибуты:

NAME — указывает имя мета-данных. Есть болшое количество предопределенных имен.

HTTP-EQUIV — указывает имя мета-данных. Он почти идентичен параметру NAME , но с одним отличием: используется лишь тогда, когда имеет место необходимость передачи дополнительной информации в http-заголовке .

CONTENT — присваивает значение мета-данным, определенным в параметре NAME (или HTTP-EQUIV ).

А теперь — пример .

...

Сегодня мы разберем, как настроить сайт, чтобы на него не стыдно было отправлять клиентов. Скорее всего, дизайн Вы уже подготовили. Осталось только настроить домены и опубликовать сайт!

Название и описание сайта

Переходим в «настройки » сайта, и прописываем seo-текст (текст для поисковых систем).

Заголовок вкладки (виден посетителям) = описание сайта, которое отображается во вкладке браузера. В заголовке опишите вашу сферу деятельности с конкретикой.
Пример "Итальянские шкафы-купе с доставкой по Москве"

Ключевые слова (не видны посетителям) = вписывайте ключевые слова, которыми характеризуется Ваш сайт.
ВАЖНО: эти ключевые слова никак не связаны с Яндекс.Директом. Слова могут быть различны.
Пример "Италия, кухни, шкафы, купе, Москва, доставка"

Описание (не видны посетителям) = описание Вашего сайта в 200 символов. Кратко в 1-2 предложениях опишите Ваш сайт.
Пример "ООО "Компания" занимается прямыми поставками итальянской мебели с доставкой в Москве. Мы даем гарантию на всю фурнитуру 10 лет. Более 100 моделей в наличие и под заказ."

Вставка в тег Head и Вставка в тег Body = необязательны для заполнения. Используется профессиональными пользователями для вставки особого кода.

Подключение домена

Любой сайт, созданный в нашем сервисе, получает бесплатно поддомен (site.lpmotortest.ru). В данном разделе Вы можете изменить его.

Либо Вы можете подключить свой домен. Для этого нажмите "Прикрепить домен" и пропишите название домена. Чтобы домен прикрепился, необходимо прописать правильные dns:

DNS1: ns1.сайт
DNS2: ns2.сайт

SMS и Email-уведомления

Для каждого лендинга можно настроить уведомления о новых заявках и клиентах. Изначально все уведомления включены автоматически. В любой момент Вы можете менять настройки на свое усмотрение.