Семантично оформление на сайта
Нека разгледаме няколко подхода при налагане на лого на уебсайт, докато създаваме оформление на страницата.
Оформяне на логото с елемента h1
За връзката в h1 задайте фоново изображение (свойство на фона), равно на логото на сайта. Задайте връзката на блок изглед (дисплей: блок) и задайте височината и ширината. Също така присвояваме височината и дължината на елемента h1. Скриване на текста във връзката: text-indent: 900 em.
HTML:
CSS:
Поставяме логото на сайта и заглавката h1 отделно в оформлението на страницата
Действителното заглавие H1 се поставя при създаване на сайтове в оформлението на страницата непосредствено след маркера на тялото, ние затваряме важна текстова информация в него и го преместваме извън видимата област на екрана, използвайки абсолютно позициониране.
Поставяме самото лого на сайта със снимка на правилното място на страницата, рамкираме го с линк, който води към главната страница на сайта, подписваме атрибута на заглавието за връзката и атрибута alt и title за изображението.
Предимствата на този стил на оформление на лого: плюс едно изображение в контекста на страницата за индексиране от търсачките, не е необходимо да се скрива текстът на връзката и h1 винаги ще бъде в контекста на страницата веднага след маркера на тялото, с първия метод, такова позициониране не винаги е възможно.
HTML:
CSS:
Съвети: логото винаги е рамкирано с линк към главната страница на сайта, това се дължи на манталитета на посетителите, уеб-майсторите вече са научили, че ако логото, след това щракването върху него винаги ще ви отведе незабавно до главната страница на проекта.
Забележка: не забравяйте, информацията, съдържаща се в маркера h1, трябва да бъде уникална и най-важна в контекста на цялата страница. Маркерът h1 трябва да се среща само веднъж. Ако трябва отново да маркирате информация на страницата, използвайте маркерите h2 до h6.
Забележка: неизказаното правило, колкото по-рано е етикетът h1 след маркера на тялото, толкова по-добре. В идеалния случай обаче, за предпочитане веднага след маркера на тялото. Но какво ще кажете за позицията на логото на страницата тогава? Поставяме логото на място, когато излагаме шаблона, използвайки абсолютно позициониране (позиция: абсолютно). В следващата статия ще разгледаме по-отблизо оптимизацията и промоцията на уебсайтове.