Семантична верстка логотипу на сайті
Корисно для верстальника розуміти правильні принципи роботи блокових та малих елементів. Що стосується логотипів, то зазвичай вони розташовуються у верхній частині сайту, часто в блоці header. Як правильно, семантично, валідно і оптимізувавши під пошукові системи розмістити логотип на сайті.
Наприклад, нам потрібно зробити ось такий логотип:
Шрифт нестандартний його ми не підключатимемо, зробимо логотип посиланням, а на посилання повісимо фонове-зображення, це і є наш логотип.Подивимося як виглядає html
<h1 class="logo">
<a href="index.php">BestLogoEver</a>
</h1>
Дуже красиво, семантично, валідно та оптимізовано, справді все просто і акуратно, нічого зайвого. Важливо розуміти що елемент <а>-посилання у нас малий елемент, і навіть якщо ви поставите висоту і ширину зображення то все одно побачите лише частину обрізаного фонового зображення, тому обов'язково привласніть - display:block - що переведе його в блоковий елемент.
Перейдемо до стилів це файл style.css
/*================================================ ==============================
logo
================================================== ============================*/
h1.logo{
margin: 0 auto;
}
h1.logo a {
display: block;
text-indent: -9999px; // це потрібно для того щоб відвести убік текст що ми прописали у html для seo
background: url(../images/logo.png) no-repeat;
width: 325px;
height: 69px;
}
На цьому скрині чорною рамкою я просто показав межі логотипу, де ми можемо натиснути та перейти на певну сторінку, як правило, це головна сторінка.
От і все!
Всім верстальникам приємного апетиту