Файл: Языки гипертекстовой разметки ( HTML, XML, XHTML, SGML ).pdf

Таким образом были рассмотрена история создания языков гипертекстовой разметки, основные виды языков (SGML, HTML, XML, XHTML, HTML5) и основные понятия – тег, элемент, атрибут.

Глава 2.

Во второй главе рассмотрена структуреа HTML документа: синтаксис и назначение основных элементов.

Теги верхнего уровня

Каждая веб-страница имеет общую структуру, которая содержит типичные элементы, общие для сайтов различных типов и направленностей. [25] Рассмотрим типичный код веб-страницы:

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

</body>

</html>

Разберем отдельные строки кода более подробно.

<html>…</html>

Тег <html> указывает на начало HTML-файла, внутри которого хранится заголовок (<head>) и тело документа (<body>). Закрывающий тег </html> всегда завершает HTML код.

<head>…</head>

Заголовок документа <head> может содержать текст и теги, однако содержимое этого раздела не показано напрямую на странице, за исключением контейнера <title>. Закрывающий тег </head> также должен присутствовать в обязательном порядке, для обозначения окончания блока заголовка.

<title>…</title>

Тег <title> обозначает заголовок веб-страницы (в Windows текст заголовка показывается в левом верхнем углу браузера). [26] Тег <title> дожжен присутствовать в коде в обязательном порядке.

<body>…</body>

В теле документа <body> размещаются теги и содержательная часть веб-страницы. [27] Закрывающий тег </body> указывает на завершение тела документа.

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

<!DOCTYPE>

Элемент <!DOCTYPE> указывает тип текущего документа — DTD (document type definition, описание типа документа). [28] Определение типа документа необходимо для того, чтобы браузер понимал, как именно следует интерпретировать данный код, поскольку в зависимости от используемого языка разметки (различные версии HTML, XHTML, и т.д.) документ интерпретируется по-разному, поскольку различные языки имеют различный синтаксис. Таким образом, с помощью <!DOCTYPE> определяется стандарт, согласно которому отображается веб-страница. Ниже <!DOCTYPE> будет рассмотрен более подробно.

Существует несколько типов <!DOCTYPE> , которые отличаются в зависимости от версии языка разметки, на которую они ориентированы. В таблице 1. приведены основные типы документов с их описанием.

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

Таблица 1

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

Например, в строгом HTML и XHTML наличие тега <title>, обязательно, а в переходном HTML его использование необязательно. Браузер будет показывать документ вне зависимости от того, соответствует ли он синтаксису или не соответствует. Проверка осуществляется валидатором и используется разработчиками для отслеживания ошибок в документе.

Иногда в коде HTML не указан <!DOCTYPE>, в этом случае документ все равно будет отображаться в браузере, однако есть вероятность, что один и тот же документ будет показан различным образом при использовании <!DOCTYPE> или при его отсутствии. Кроме того, подобные документы могут отображаться с ошибками, не так, как задумывал разработчик. Чтобы избежать подобных ситуаций, следует добавлять <!DOCTYPE> в начало документа в обязательном порядке.

Метатеги <meta>

Тег <meta> - универсальный тег. Он добавляет ряд дополнительных возможностей, например, при помощи метатегов можно изменить кодировку страницы, добавить описание документа, ключевые слова. Более подробно тег рассмотрен ниже.

Метатеги выполняют несколько важных функций:

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

В настоящее время мета теги не оказывают сильного влияния на продвижение, однако они по-прежнему учитываются при оценке поисковыми системами, и предпочтение отдается ресурсу с грамотно сформированными тегами. [30]

Мета теги для SEO (поисковой) оптимизации

К данной категории тегов относятся три тега: title, description, keywords. Данные атрибуты сообщают поисковому роботу информацию о сайте, которая помогает грамотно определить тематику ресурса и ранжировать (сортировать) в выдаче. Потому составляя метатеги, разработчики обязательно используют ключевые слова (слова и фразы, которые целевой пользователь вводит в строку поиска, чтобы найти нужный ресурс).

Title

Заголовок страницы. В индексе это крупная синяя ссылка на сайт, в браузерных вкладках — название.

Атрибут должен содержать основные ключевые слова и конкурентные преимущества. Важно, чтобы пользователь сразу понял, что сайт ему предлагает, и почему данный ресурс ему подойдет. Основная сложность — вместить нужную информацию в четко заданный поисковыми системами лимит символов. У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов). Пример приведен в таблице 2.

Дано	Неудачный title	Удачный title
Ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»	Купить кресло. Купить удобное кресло, купить кресло недорого	Как купить удобное кресло недорого с доставкой и получить скидку 15%?

Таблица 2

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

Description

Description – это краткий «анонс» страницы в результатах поиска, несколько коротких предложений, в которых используются наиболее значимые ключевые слова конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.

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

С помощью meta name description поисковым роботом описание страницы (сниппет) отображается в результатах поиска под title.

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

Дано	Неудачный Description	Удачный Description
Магазин продажи книг; ключевые слова «интересная книга», «купить книгу»	Книги издавна являются одними из самых близких «друзей» человека. Интересная книга помогает скоротать время, дает полезные знания, раскрывает занимательные факты, пробуждает эмоции. Потому стоит задуматься о том, чтобы купить книгу в нашем магазине.	Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.

Таблица 3

Первый вариант — не специально составленный meta тег, а взятый со страницы кусок статьи. Возможно, пользователю интересно почитать литературный текст, но, обращаясь к поисковой системе, он предпочтет получить ответ на конкретный запрос о покупке. Потому метатеги для сайта второго типа более привлекательны: они сразу дают понимание, какой ассортимент и преимущества предлагает магазин.

Keywords

Сообщает поисковому роботу ключевые слова, под которые «заточен» контент. Поисковый робот сверяет фразы в содержимом страницы с указанными в данном теге, а полученные результаты учитывает в дальнейшем при определении позиций ресурса.

Сейчас поисковики не придают данному атрибуту такой вес, как раньше. Но грамотное использование его не будет лишним.

Используйте 3-6 ключевых слов/фраз через запятую. Чрезмерное употребление может расцениваться поисковиком как переспам. В список должны включаться только используемые на странице запросы, под которые оптимизирован текст, названия товаров и т.д.!

Мета теги технического характера

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

Наиболее распространенные технические метатеги приведены в таблице 4.

Пример	Описание
<meta http-equiv="Content-type" content="text/html;charset=windows-1251">	Content-type. Включает данные о типе документа и кодировке. Влияет на то, насколько корректно страница будет отражаться в браузере. Особенно актуален при неверной настройке браузера или сервера. В такой ситуации документ будет показан на другой кодировке, и пользователь не сумеет ничего изменить даже попыткой переключить вручную. Для кириллицы используется атрибут windows-1251 или KOI-8R
<meta http-equiv="Content-Language" content="ru">	Содержит информацию о языке контента (содержимого). Как и с предыдущим тегом, сейчас браузеры определяют язык автоматически. Но в случае неверных настроек данный тег будет полезен.
<meta name="robots" content="noindex">	Показывает поисковому роботу, какие страницы следует включать в индекс, а какие — нет. Данный тег предполагает ряд дополнительных атрибутов: index/noindex (можно/нельзя индексировать); follow/nofollow (учитывать/не учитывать гиперссылки); all/none (открыть/закрыть для индексации страницу и гиперссылки).
<meta http-equiv="refresh" content="N; url=URL">	Позволяет задать время обновления страницы при загрузке либо переадресации пользователя в другой раздел. Тег полезен в случае обновления сайта: вместо страницы ошибки 404 или длительной загрузки перенаправляет пользователя в новый раздел.
	Author и Copyright. Этими тегами можно прописать авторство графического и текстового содержимого страницы.
<meta name="Author" content="Иван Иванович Иванов">	автор страницы
<meta name="Copyright" content="Петр Петрович Петров">	принадлежность авторских прав
<meta name="Address" content="г. Москва, Ярославское шоссе 25">	адрес автора/собственника