Пятница, 04 Мая 2012 09:40

Верстка сайта. Урок 3. Заголовки h1-h6

Written by 
Оцени эту запись
(1 Голос)

В HTML предусмотрено 6 типов заголовков h1, h2, h3, h4, h5, h6. H1 - самый большой и самы главный заголовок, остальные меньше по размерам и важности. 

 

У важности заголовков на странице есть две стороны:

  • заголовки дают возможность пользователю, просмотрев быстро страницу, понять основное ее содерживое и понять где именно находится интересная для него информация
  • заголовки страницы - это один из первых пунктов, которые просматривает поисковый робот для определения содержания страницы и актуальности ее нужному поисковому запросу 

 

 

Как правильно расставить заголовки на странице

Рассмотрим случай страницы со статьей.

У статьи есть заголовок (заголовок статьи), есть основные разделы (например, Введение, Основные понятия, Сложности, Заключение), есть из подпункты и т.д.

В таком случае, заголовок статьи можно сделать заголовком h1, разделы - h2, подпункты - h3. Обратите внимание, что заголовок h1 должен быть один на странице, заголовков h2 может быть 2-3 и т.д. Поисковый робот должен четко определить какая информация является основной.

 

Выглядит это так:

 

<h1>Заголовок статьи</h1>

<h2>Раздел 1</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<h3>Пункт 1</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<h3>Пункт 2</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<h3>Пункт 3</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

 

<h2>Раздел 2</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

 

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

Можно в файле стилей написать:

 

h1 {font-size: 2em;}

h2{font-size: 1.7em;}

h3 {font-size: 1.5em;}

h4 {font-size: 1.2em;}

h5 {font-size: 1em;}

h6 {font-size: 0.8em;}

 

Тогда наш фрагмент текста будет выглядеть так:

 

 

Заголовок статьи

Раздел 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Пункт 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Пункт 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Пункт 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Раздел 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

 

Хочу напомнить, что заголовки h1-h6 являются блочными элементами и по умолчанию отображаются жирным текстом. Если нужно выделить заголовком часть текста в строке, нужно в стилях прописать {display: inline}. Если нужно убрать жирность заголовков, добавить стиль {font-weight: normal}.

 

Заголовки можно и даже нужно использовать в оформлении сайта, а не только статей. Полезно для раскрутки сделать имя сайта заголовком h1, название функциональных блоков (Новости, Галерея) - заголовками h3.

Если в шапке сайта его название оформлено картинкой (логотип сайта), то в него все равно можно вставить заголовок. Например такой вариант

 

<a href="/" class="logo"><img src="/sitename.com/images/logo.png"></a> 

 

можно изменить на

 

<a href="/" class="logo"><h1>Site Name</h1></a> 

 

и добавить в css

 

.logo {

display: block;

background: url(sitename.com/images/logo.png);

text-indent: -9999px;

width: 200px;

height: 100px;

}

 

Здесь ширина и высота равны размерам самой картинки, а свойство text-indent указывает на отступ текста слева(text-indent: -9999px; - текст смещается за пределы видимости). У нас логотип будет иметь точно такой же вид - картинка и никакого текста. Но поисковый робот будет знать, что "Site Name" является самой главной фразой на сайте.

 

Комментарии  

 
0 #1 Janay Parrotta 03.08.2014 01:30
Properly just considered i'd say howdy. Terrific web site Ian.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов