Что означает тег header. Зачем нужны подзаголовки h2-h6. Требования по длине H1

На моих топовых информационных проектах сначала специалист в тематике составляет структуру статьи (заголовки и подзаголовки), а потом уже копирайтеры по ним пишут текст.

Структура — это на самом деле очень важно, если вы заморачиваетесь насчет качества. А чтобы составить нормальную структуру, нужно понимание того, как работают теги h.

h1 — это главный подзаголовок в статье, который обычно размещен над текстом.

Первый заголовок должен визуально быть больше остальных заголовков на странице.

h2-h6 — это маленькие подзаголовки, которые проставляются по принципу вложенности.

Для чего вообще нужны заголовки?

Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:

И для закрепления материала чуть послабее видео:

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

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

, где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.

H-теги глазами людей

Текст, разбитый на подзаголовки, смотрится более «опрятно», его проще читать. Современный пользователь уже давно научился сканировать статьи буквально за несколько секунд и оперативно делать выводы, стоит ли читать весь текст, есть ли в нем та полезная информация, которую он ищет. Заголовки цепляют глаз, выделяя главное и давая юзеру возможность проанализировать материал.

Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.

H-теги глазами поисковиков

Поисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.

Иерархия H-тегов

Главным правилом в расстановке заголовков является их иерархия. Необязательно, чтобы теги шли друг за другом по размеру, но недопустимо в тексте использовать, например, h3, если у вас нигде не присутствует мета h2 или применять h6 без h5.

Вот так выглядит иерархия с правильной вложенностью:

Что за тег h1

Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).

На каждой странице должен быть один и только один тег h1.

В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь .

Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.

Почему h1 должен различаться с Title

Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:

Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр. Последнее время поисковые системы стали уделять особое внимание качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается.

Требования по длине H1

H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.

Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.

Правила для грамотного написания h1

• Должен быть уникальным для всего сайта и абсолютно читабельным;
• Не повторяет тег title, но и не противоречит ему;
• Не стоит делать его слишком длинным (более объемным можно делать title);
• Используется только 1 раз на каждую страницу;
• Релевантен тексту и отображает смысловую суть материала;
• Интересен, привлекателен для пользователя;
• Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.

Применение ключей

Главные ключевые фразы, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы ключевые слова не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в h1 и прямые в title.

Некоторые берут все ключи на страницу и из них составляют структуру статей. Сразу учтите — без классных ПФ такая россыпь ключей по подзаголовкам будет караться фильтром за переспам.

Психологические приемы для составления привлекательного заголовка

Заголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:

Вот еще пара «приемов», которые применяются при составлении заголовков.

Решение проблемы

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

Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».
Пример неудачного заголовка: «Можно ли остановить выпадение волос?»

В первом случае мы четко обозначаем проблему и предлагаем конкретное решение. Во втором случае проблема задета косвенно и варианты ее решения размыты.

Заинтриговать

Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».
Пример неудачного заголовка: «Лучший рецепт от выпадения волос».

Прием «экзамен»

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

Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»
Пример неудачного заголовка: «Все ли вам известно о выпадении волос».

Конечно, это далеко не все методы, которые помогают воздействовать на восприятие человека и привлечь его интерес. Читайте книги по маркетингу, чтобы вычитать больше, если интересна эта тема. Кстати title тоже может быть «заманивающим». Тем более что скорее всего именно он высвечивается в поисковой выдаче. Проверить его отображение можно будет после индексации страницы.

Зачем нужны подзаголовки h2-h6

Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.

Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам.

h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.

h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.

h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.

Длина всех h-тегов должна быть в пределах 50 символов.

Как правильно прописывать подзаголовки h2-h6

• Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.
• Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.
• Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.
• Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.
• Нельзя писать другие теги внутри тега h.
• В h-тегах допускается только текст и знаки препинания.
• В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.

Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на . Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.

Как заполнять h-теги в WordPress

h1 заполняется обычно в поле над текстом в записи:

Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему. Проделать то же самое для каждого из подзаголовков, включая их в нужный формат.

Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.

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

Шапка сайта – какой она бывает

Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

< header > < / header >

Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.

header{ width: 100%; background: #D8E3AB; height: 70px; }

header { width : 100 % ; background : #D8E3AB; height : 70px ;

Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.

Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.

Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.

< div id = "wrap" > < header > < / header > < / div >

Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его.

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Для этого достаточно дописать некоторые правила к фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

background : #D8E3AB url(logo.png) no-repeat 5% 50%;

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

Название сайта

• Контакты
• О нас
• Услуги

< div class = "title" > Названиесайта< / div > < ul class = "menu" > < li > < a href = "#" > Контакты< / a > < / li > < li > < a href = "#" > Онас< / a > < / li > < li > < a href = "#" > Услуги< / a > < / li > < / ul >

Теперь все это оформим.

Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

Title { font - size : 36px ; padding - top : 10px ; text - align : center ;

Как известно, не существует второго шанса произвести первое впечатление. В сфере цифрового дизайна эта истина подкрепляется высокой конкуренцией и широким разнообразием имеющихся решений. Причем, вполне очевидно, что при создании первого впечатления некоторые части веб-страницы являются более важными нежели остальные, например, header для сайта (шапка сайта). Сегодня рассмотрим все нюансы, которые касаются данного термина:

Заметка является переводом статьи с uxplanet , за нее авторам большое спасибо.

Что такое хедер сайта?

В классическом макете блок header располагается в самом верху. Именно его люди видят в первую очередь, когда попадают на ваш проект. Будучи в каком-то смысле приглашением, он содержит основную информацию о продукте и нише, с которой связан сайт — важно чтобы пользователи могли в течение нескольких секунд понять, о чем идет речь.

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

На скриншоте показана домашняя страница интернет-магазина комиксов: сверху в хедере сайта найдете логотип, основное меню, а также иконки корзины и поиска.

Что входит в шапку сайта?

Данный блок может включать в себя различные объекты:

• особенности бренда: логотип, название, фирменный знак, лозунг, талисман, фото компании или ее руководителя, и т.д.;
• информация о представляемом продукте или услуге;
• ссылки на важные элементы контента ();
• линки на профили социальных сетей;
• контакты (телефон, электронная почта и др.);
• переключение языков при многоязычном интерфейсе;
• блок поиска;
• поле подписки;
• ссылки на продукт: скачивание демо версии, адрес в AppStore и т.д.

Не обязательно все указанные пункты должны быть использованы. Следите за тем, чтобы дизайн хедера для сайта не перегружался лишней информацией, которая мешает посетителям сосредоточиться на основных аспектах.

Ниже приведены примеры размещения подобных элементов:

Bjorn Website (проект студии дизайна интерьера)

В верху макета находится фиксированная (прикрепленная) шапка сайта на странице, что позволяет ей оставаться постоянно видимой в процессе прокрутки. Слева она содержит логотип бренда, а справа — ссылки «Продукты», «Студия», «Новости» + иконку «Магазин». Центральная пустая область визуально разделяет эти два блока.

Здесь хедер сайта использует другой подход: логотип и бренд — в центре, а левая и правая сторона имеют по две ссылки, позволяющие пользователям быстро перейти к нужным разделам.

Почему важен header для сайта?

Это объясняется рядом причин. Во-первых, когда люди посещают тот или иной веб-ресурс (особенно в первый раз) они не рассматривают всю страницу тщательно и подробно, а быстро пробегают ее взглядом, в поисках того, что привлечет внимание и убедит задержаться. Различные эксперименты показали наличие типичных моделей движения глаз пользователей. Упоминаются три основные варианта:

Первая схема типична для страниц с однородным представлением информации и слабой визуальной иерархией. В ней выделяется четыре активные зоны, две из которых связаны с областью шапки сайта.

Z-модель

Другая схема движения глаз имеет Z-образный характер и типична для страниц с визуальным разделением блоков контента. Здесь, глаза читателя идут с верхнего левого угла в такой же правый, просматривая данную header в первую очередь.

Достаточно часто пользователи демонстрируют следующий подход:

• Вначале взгляд движется горизонтально, как правило, по верхней части — первая полоса F-образной модели.
• Затем взор посетителя опускается ниже, и страница снова «сканируется» горизонтально, но охватывается более короткая область, чем в первом движении. Это дополнительный элемент F-схемы.
• Наконец, взгляд перемещается к левой стороне экрана, которая просматривается вертикально. Иногда данный процесс довольно медленный и систематический, что выглядит как сплошная полоса на тепловой карте движения глаз. В других случаях взгляд двигается быстрее. Это последний элемент, создающий стебель буквы F.

Все три варианта показывают, что просмотр начинается в верхней горизонтальной области. Таким образом шапка сайта на страницах веб-проекта играет одновременно две роли: пользователю предоставляется возможность быстро найти ключевую информацию, а разработчику выпадает шанс грамотно ее представить. Именно поэтому блок header так важен для , специалистов по контенту и продвижению продуктов.

Как указывается в статье Богдана Санду, «сайт должен притягивать взгляд сразу, иначе он станет всего лишь большим провалом».

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

Проектирование хедера сайта

Читаемость и визуальная иерархия

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

В концепте текущего новостного шаблона увидите меню в шапке сайта с двумя активными ссылками на категории публикаций, линком на «живой» эфир и полем поиска. Логотип по центру, как в одном из примеров выше.

Здесь используется популярный с разбитой абстрактной сеткой, а header для сайта удачно его дополняет: левая часть визуально длиннее, состоит из логотипа и трех ссылок; правая — покороче, с элементами поиска и подписки.

Нужно помнить о том, что в процессе перемещения пользователя по странице шапка сайта может по разному себя вести:

• некоторые разработчики используют «липкий» (фиксированный) блок, всегда видимый и активный;
• другие просто его скрывают;
• еще есть вариант, когда шапка не исчезает полностью, а определенным образом сжимается при , оставляя доступной лишь основную важную информацию.

Меню «гамбургер»

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

Данная кнопка сегодня часто является полноценным элементом в хедере сайта, и многие пользователи уже в курсе, что за ней скрывается основное меню. Такой подход освобождает пространство, делая макет минималистским и легким, а также сохраняя больше места другим объектам. К тому же это позволяет создать гармоничный интерфейс для различных типов устройств.

Здесь показан вариант «компактного» меню в шапке сайта, содержащего много ссылок и поддерживающего простой общий стиль шаблона. Кроме него в хедере имеется две области: слева выделены красным цветом бренд и краткая информация о проекте; в правой зоне размещены и значок поиска. Центральная часть остается свободной, добавляя легкость и баланс всему макету.

В структуре страницы слева много пустого места, а логотип и название фирмы находятся в верхнем углу, откуда начинается движение глаз. Далее в дизайне шапки расположена и линки на основные разделы. Подобный вариант позволяет скрыть множество ссылок и организовать хорошую визуальную иерархию.

И хотя данное решение все еще вызывает активные споры, оно по-прежнему используется в качестве навигации header’а сайта. Его противники указывают на то, что этот блок может запутать неопытных интернет-пользователей новичков. Именно поэтому желательно принимать решение о внедрении «гамбургер» кнопки только после исследования целевой аудитории.

Фиксированный (липкий) хедер сайта

Здесь макет имеет фиксированный блок в самом верху, не скрывающийся при прокрутке. В нем содержится название, иконка лупы для поиска и кнопка «гамбургер».

Ниже представлен еще один пример творческого подхода к эффективному дизайну шапки сайта. При первом входе видна только минималистичная ее реализация с иконками соц.сетей и поиском (никакого меню и т.п.). Но в процессе прокрутке образуется фиксированная полоска с традиционным набором элементов.

Двойное меню

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

На гифке ниже увидите «липкий» хедер, состоящий из двух «строк»:

• В верхней расположены ссылки на социальные сети, поиск, магазина и кнопка меню; в центре находится логотип.
• Вторая линия акцентирует внимание на основных разделах проекта: каталог товаров, местоположение точек продаж, новости и предложения, услуги и контакты.

Иерархия хедера делает все элементы четкими и легко читаемыми, обеспечивая надежное взаимодействие с пользователем.

Итого

Шапка сайта является стратегически важной зоной в дизайне макета. Безусловно, каждый конкретный случай требует своего подхода и (возможно) проведения исследования пользователей, однако базовые нюансы, рассмотренные выше, всегда нужно учитывать.

Если есть что добавить по статье из личного рабочего опыта, пишите ниже — интересно почитать. Какой вариант реализации header вам больше понравился?

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов