Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

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

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

Вот и все!

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

Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)