Семантичная верстка логотипа на сайте
Полезно для верстальщика понимать правильные принципы работы блочных и строчных элементов. Что касается логотипов то обычно они располагается в верхней части сайта, частенько в блоке 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;
}
На этом скрине черной рамкой я просто показал границы логотипа, где мы можем нажать и перейти на определенную страницу, как правило это главная страница.
Вот и все!
Всем верстальщикам приятного аппетита :)