Семантична верстка сайту
Розглянемо кілька підходів під час верстки логотипу сайту під час створення макета сторінки.
Обрамляємо логотип елементом h1
Для посилання всередині h1 задаємо фоновий малюнок (властивість background), що дорівнює логотипу сайту. Посилання призначаємо блоковий вигляд (display: block), і задаємо висоту та ширину. Призначаємо також висоту та довжину елемента h1. Приховуємо текст усередині посилання: text-indent: 900 em.
HTML:
CSS:
Маємо в макеті сторінки окремо логотип сайту та заголовок h1
Власне заголовок H1 маємо у своєму розпорядженні при створенні сайтів у макеті сторінки відразу після тега body, укладаємо в нього важливу текстову інформацію і виносимо його за межі видимої області екрана за допомогою абсолютного позиціонування.
Сам логотип сайту ставимо картинкою у потрібному місці сторінки, обрамляємо його посиланням, яке веде на головну сторінку сайту, підписуємо атрибут title для посилання та атрибут alt та title для зображення.
Переваги такого стилю верстки логотипу: плюс одне зображення в контексті сторінки для індексації пошуковими системами, немає необхідності ховати текст посилання, і h1 завжди перебуватиме в контексті сторінки відразу після тега body, при першому способі таке позиціонування не завжди можливе.
HTML:
CSS:
Рада : логотип завжди обрамляємо посиланням на головну сторінку сайту, пов'язано це з менталітетом відвідувачів, web-майстри вже привчили, якщо логотип, отже клацання по ньому завжди миттєво виведе на головну сторінку проекту.
Примітка : пам'ятайте, інформація, що міститься в тезі h1, повинна бути унікальною і найважливішою в контексті всієї сторінки. Тег h1 має зустрічатисялише один раз. Якщо Вам потрібно виділити інформацію на сторінці знову, використовуйте теги з h2 до h6.
Примітка : негласне правило чим раніше після тега body розташовується тег h1, тим краще. В ідеалі бажано відразу після тега body. Але як бути тоді з положенням логотипу на сторінці? Ставимо місце логотип при верстці шаблону з допомогою абсолютного позиціонування (position: absolute). У наступній статті ми докладно розглянемо оптимізацію та просування сайту.