H1 плюс иконка – как правильно делать при помощи CSS - Верстка HTML / CSS

Следующая статья: Динамичные web интерфейсы на HTML

Содержание

Проблема
Подготовка
Рисуем

Проблема

Часто и многие спрашивают, как правильно сделать заголовок h1 с иконкой как у меня на сайте. Многим мой html код не ясен, поэтому решил более детально расписать его.

Основная цель этой комбинации тег H1 + иконка

сделать красиво оформление;
предоставить поисковым системам к индексации корректный заголовок статьи без лишних html кодов.

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

Пример подходит для всех браузеров кроме Internet Explorer 6.0. Но к счастью Internet Explorer 6.0 ушел в прошлое.

Подготовка

Итак вот пример что нам надо:

Чтобы нам получить нужное, требуется логически разбить полоску на объекты и вот что мы получаем

Основной блок в котором и будем все прорисовывать
Текст заголовка
Иконка

Рисуем

Основной блок

Основной блок, обзовем его prj_h1 (от слова project / проект)

Текст в CSS:

.prj_h1
{
/* устанавливаем позицию блока, чтобы он классически вписывался */
/* в любой текст на странице, как любой другой тег */
position:relative;

/* по желанию прописываем фон для нашего блока, */
/* например как на примере, градиентом */
background-image:url('http://www.sd-company.su/images/site/bg_h1.png');
background-repeat:repeat-x;/* повторять по горизонту (по X) */

/* обязательно прописываем фоновый цвет, так как бывают случаи */
/* когда заголовок большой и блок раздвигается */
/* а фоновое изображение не рассчитано на высокие заголовки */
background-color:#97b3d6;

/* раздвигаем на всю ширину */
width:100%;

/* устанавливаем минимальную высоту */
/* чтобы размер заголовка всегда был у нас одного размера */
min-height:50px;
}

Заголовок

Текст, где будет располагаться у нас сам текст заголовка обзовем prj_h1_text. В этот раз я думаю расшифровывать не нужно.

Текст в CSS:

.prj_h1_text
{
/* также как и основной блок устанавливаем правильную позицию */
/* чтобы выглядело все естественно и удобно можно было писать текст */
position:relative;

/* позиция блока по отношению к другим блокам, внутри блока prj_h1 */
/* это очень важный параметр */
z-index:2;

/* понятное дело растягиваем на ширину всего блока */
width:100%;
}

/* Теперь прописываем непосредственно сам стиль заголовка */
.prj_h1_text h1
{
/* формируем отступы */
/* 1 отступ – это отступ от верхней границы, */ 
/* его нельзя делать у объекта prj_h1_text потому, */
/* что этот отступ может повлиять на отступ от границы других объектов */
/* на случай если вы захотите сделать заголовок более сложным */
/* поэтому отступ делаем именно у DOM объекта H1 */
padding:15px; 

/* делаем отступ от левой границы через padding */
/* дабы соблюсти порядок */ 
/* есть вариант через text-indent, но на картинке продемонстрирован эффект */
/* так что по своему усмотрению можете выбрать padding или text-indent */
padding-left:50px;

/* ниже я думаю тут все понятно, цвет текста, шрифт, размер, стиль */
color:#111;
font-family:tahoma;
font-size:12pt;
font-weight:normal;
}

Иконка

Ну и теперь фикус пикус на десерт

.prj_h1_image
{
/* position это важно. Требуется ставить именно absolute */
/* это позволяет корректно отображаться во всех браузерах */
/* даже в новом Internet Explorer 9.0 */
position:absolute;

/* позиция блока по отношению блока – ставим выше текста */
/* у текста, как мы помним, z-index 2 */
/* Почему так? */
/* Если сделать иконку под текстом, то в случае */
/* если иконку захотите сделать «кликабельной» */
/* то вы не сможете ее нажать, так как H1 будет ее перекрывать */
/* Если на том же уровне (2), то H1 будет в разных браузерах плясать */
/* как туземцы в новолуние, поэтому иконка по слою должна быть выше */
z-index:3;

/* top и left позволяют нам установить более точно */
/* где размещать иконку */
top:5px;
left:5px;

/* высоту и ширину иконки также прописывать обязательно */
/* иначе, где то вы не увидите иконку вообще */
/* прописываем размер иконки */
width:40px;
height:40px;
}

После того, как вы все выше написанное прописали в своем CSS файле, то смело можете писать в любом своем html документе вот такие строчки:

<div class="prj_h1">
<div class="prj_h1_text"><h1>Заголовок</h1></div>
<div class="prj_h1_image"><img src="icon.png" /></div>
</div>

Обращаю ваше внимание, что h1 абсолютно чист для индексации любого поискового робота, при этом имеете свою иконку и эта иконка путем не хитрых манипуляций может превратиться еще и в отличную ссылку на главную страницу, что придает более привлекательный вид для поисковых роботов.

Вот в целом и все по иконкам