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

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

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

Посмотрим как выглядит html

<h1 class="logo">
    <a href="https://webakula.uaindex.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;}

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

Вот и все!

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