Создание сайтов — верстаем логотип семантически верно
Рассмотрим несколько подходов при вёрстке логотипа сайта во время создания макета страницы.
Обрамляем логотип элементом h1
Для ссылки внутри h1 задаём фоновый рисунок (свойство background), равный логотипу сайта. Ссылке назначаем блочный вид (display: block), и задаём высоту и ширину. Назначаем также высоту и длину элемента h1. Скрываем текст внутри ссылки: text-indent: 900 em.
HTML:
<body> <div class="header"> <h1 class="logo"> <a href="/" title="[важная информация]"> [важная информация] </a> </h1> </div> ......... </body>
CSS:
.header{
position: relative;
}
.logo{
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
}
.logo a{
display: block;
width: 200px;
height: 200px;
background: url([адрес логотипа]) top left no-repeat;
text-indent: 999em;
float: left;
}
Располагаем в макете страницы отдельно логотип сайта и заголовок h1
Собственно заголовок H1 располагаем при создании сайтов в макете страницы сразу после тега body, заключаем в него важную текстовую информацию и выносим его за пределы видимой области экрана с помощью абсолютного позиционирования.
Сам логотип сайта ставим картинкой в нужном месте страницы, обрамляем его ссылкой, которая ведёт на главную страницу сайта, подписываем атрибут title для ссылки и атрибут alt и title для изображения.
Преимущества такого стиля вёрстки логотипа: плюс одно изображение в контексте страницы для индексации поисковыми системами, нет необходимости прятать текст ссылки, и h1 всегда будет находиться в контексте страницы сразу после тега body, при первом способе такое позиционирование не всегда представляется возможным.
HTML:
<body>
<h1 class="logo">
[важная информация]
</h1>
<div class="header">
<a href="/" title="[просто подпись для посетителей]">
<img src="/[адрес логотипа]" alt="[подпись для поисковых роботов]" title="[просто подпись для посетителей]" />
</a>
</div>
............
</body>
CSS:
.logo{
position: absolute;
top: -999em;
left: -999em;
}
.header{
.....
}
Совет: логотип всегда обрамляем ссылкой на главную страницу сайта, связано это с менталитетом посетителей, web-мастера уже приучили, если логотип, значит щелчок по нему всегда моментально выведет на главную страницу проекта.
Примечание: помните, информация, заключённая в теге h1 должна быть уникальной и самой важной в контексте всей страницы. Тег h1 должен встречаться всего лишь единожды. Если Вам потребуется выделить информацию на странице снова, используйте теги с h2 по h6.
Примечание: негласное правило чем раньше после тега body располагается тег h1, тем лучше. В идеале же желательно сразу после тега body. Но как же быть тогда с положением логотипа на странице? Ставим на место логотип при вёрстке шаблона с помощью абсолютного позиционирования (position: absolute). В следующей статье мы подробно рассмотрим оптимизация и продвижение сайта.