Семантична верстка логотипу на сайті
Корисно для верстальника розуміти правильні принципи роботи блокових та малих елементів. Що стосується логотипів, то зазвичай вони розташовуються у верхній частині сайту, часто в блоці 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; }
На цьому скрині чорною рамкою я просто показав межі логотипу, де ми можемо натиснути та перейти на певну сторінку, як правило, це головна сторінка.

От і все!
Всім верстальникам приємного апетиту