Семантичная верстка логотипа на сайте

23.08.2011

Полезно для верстальщика понимать правильные принципы работы блочных и строчных элементов. Что касается логотипов то  обычно они располагается в верхней части сайта, частенько в блоке header. Как же правильно, семантично, валидно и оптимизировав под поисковые системы расположить логотип на сайте.

К примеру нам нужно сделать вот такой логотип:

img_18242 Шрифт нестандартный его мы подключать не будем, сделаем логотип ссылкой, а на ссылку повесим фоновое-изображение, это и есть наш логотип.

Посмотрим как выглядит 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;
}

На этом скрине черной рамкой я просто показал границы логотипа, где мы можем нажать и перейти на определенную страницу, как правило это главная страница.

2a

Вот и все!

Всем верстальщикам приятного аппетита :)

Последнее в нашем блоге