Что представляет из себя HTML-документ с минимальным набором
атрибутов, имеющий вид полноценной страницы, успешно индексируемый
поисковыми системами и, вообще, имеющий право на жизнь в Интернете?
Такой документ можно использовать в качестве отправной точки (шаблона)
на этапе проектирования вебсайта.
Ненавязчивый DOCTYPE
Правила хорошего тона требуют в первой строке HTML-кода указать
DOCTYPE, декларирующий стандарт, которым следует документ
. DOCTYPE облегчает работу браузерам и валидатору.
Выражение DOCTYPE состоит из следующих частей: TopElement Availability "Registration//Organization//Type
Label//Definition Language""URL"
TopElement
Спецификация типа документа (по умолчанию HTML)
Availability
Открытая (PUBLIC) или системная (SYSTEM)
Registration
Зарегистрирована ли организация, создавшая стандарт в International
Organization for Standardization (ISO) ? Если зарегистрирована
— ставится "+", иначе ставится "-".
Organization
Организация, создавшая стандарт
Type
Cпособ ссылки на стандарт. Обычно DTD (Document Type Definition)
Label
Описание типа документа с указанием версии
Definition
Описание вида документа: Frameset (с использованием фреймов),
Strict ( строгую, окончательную модель), Transitional (переходная
модель, без Frameset)
Language
Двухбуквенное обозначение языка (EN,RU,..). По умолчанию
EN
URL
Необязательная ссылка на документ стандарта
Примеры DOCTYPE:
Версия HTML
DOCTYPE
Любая
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN"
"http://www.w3.org/TR/html/loose.dtd">
HTML 2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN//">
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
HTML 4.0 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
HTML 4.0 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
HTML 4.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"xhtml-basic10.dtd">
Далее, так как документ у нас типа HTML, — не забываем написать
<html></html> .
Head всему голова
Внутри <html></html> обязательно указываем
заголовок <head></head>. Заголовок
— это техническая часть документа, предназначенная для программ
(браузера, роботов, пауков и т.д.) , а не для пользователей.
Важнейший и обязательный элемент заголовка — заглавие страницы<title>Моя
страница</title>. Так как поисковые системы обращают
пристальное внимание на содержание заглавия, в нем приветствуется
наличие ключевых слов. Однако, не стоит переусердствовать в этом,
действительно важны только первые 20-25 слов (70-80 символов).
При огромном количестве повторяющихся ключевых слов поисковые
машины могут расценить содержимое заглавия как спам, со всеми
вытекающими отсюда последствиями. Кроме того, не следует ставить
точку в конце заглавия — это резко снижает релевантность
сайта для поисковых систем.
Далее идет семейство <meta>-тэгов:
<meta http-equiv="Content-Type" content="text/html">
(чтобы теперь никто не сомневался, что у нас классический текстовый
HTML документ)
<meta name="description" content="Описание
страницы, состоящее, по возможности, из ключевых слов">
<meta name="keywords" content="Ключевые
слова, разделенные запятыми или пробелами">
(данный тэг практически уже потерял актуальность, однако, возможно
еще остались поисковики, учитывающие его)
Ближе к телу
Наконец-то мы дорвались до тела HTML-страницы <body></body>,
следующее сразу после заголовка. Тело — это то, что лицезреет
пользователь, в отличие от написанного выше. По этой причине на
данный момент в окне браузера пустота.
В принципе, получившуюся страницу уже можно использовать в качестве
искомой, но мы пойдем дальше и введем базовые элементы разметки
страницы:
Так как мы делаем гипертекстовый документ, по тексту разрешается
рассыпать гиперссылки <a href="www.shushenskoe.ru">Шушенское</a>.
Рассыпать ссылки следует согласно внутреннему представлению о
прекрасном — по поводу, в умеренном количестве и с внятными
обозначениями. Ссылка должна иметь название, отличное от «нажми
сюда» («click here»).
В качестве контейнеров для блоков используем тэг <div>,
в результате чего получаем «дивную» верстку. Альтернативный
вариант — «табличная» верстка. В этом случае
потребуются тэги <table>,<tr>,<td>.
Все вместе
Разобьем документ на логические части:
Меню (горизонтальное)
Основной текст
Подвал
В качестве основного текста используем «рыбу» «Lorem
ipsum ...» .Если пугает незнакомый язык — можно попробовать
сгенерировать философское
эссe.
В итоге, в качестве пробной страницы должно получится что-то
вроде этого:
Такая страница выглядит довольно скромно и представляет собой
образец академического стиля, но уже может выступать в роли носителя
информации и достойна публикации в Интернете. В поисковых системах
по запросу «Мантра lorem ipsum dolor» страница способна
попасть на вершины топов благодаря четкой структуре, умеренной
плотности ключевых слов и близости их началу текста.
Кстати, у самых популярных поисковиков (Google, Yandex) весьма
простой дизайн, что ничуть не мешает, а скорее помогает в работе.
Кто-то ведь не зря сказал, что лучший дизайн — тот, который
незаметен...
Как раскрасить и облагородить нашу страницу, привести ее к более
привычному виду — отдельный разговор, об этом будет сказано
в следующих статьях.
