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

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

Полезно для верстальщика понимать правильные принципы работы блочных и строчных элементов. Что касается логотипов то  обычно они располагается в верхней части сайта, частенько в блоке 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

Вот и все!

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

Давайте дружить!
Поставьте нравится 👍
Спасибо, я уже с вами!
Звоните нам
Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.
Спасибо!
Мы свяжемся с Вами в ближайшее время
ЛОВИТЕ БОНУС
Бесплатный аудит контекстной рекламы Google Adwords.
Прокачаем ваш контекст!