Анатомия заголовков H1-H6 для оформления и структуризации контента. Оформление заголовков презентаций. Пошаговая инструкция с фото Нумерованные и маркированные списки

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

Структурирование контента подразумевает его разбивку на логические блоки. Первым среди таких блоков, как правило, следует заголовок.

Заголовки. Элементы h1, h2, h3, h4, h5, h6

Существуют заголовки первого, второго, третьего и других уровней, вплоть до шестого. Организуются они при помощи тегов h1, h2, h3, h4, h5, h6:

3аголовок 1-го уровня
Заголовок 2-го уровня
3аголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
3аголовок 6-го уровня

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

Пример.

Уровни заголовков 3аголовок 1-го уровня Заголовок 2-го уровня 3аголовок 3-го уровня Заголовок 4-го уровня Заголовок 5-го уровня 3аголовок 6-го уровня

Рис. 3.1.

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

3аголовок 1-го уровня Заголовок 2-го уровня 3аголовок 3-го уровня Заголовок 4-го уровня Заголовок 5-го уровня 3аголовок 6-го уровня

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

Атрибуты:

align - задает выравнивание заголовка на странице. Не рекомендуемый. Может принимать четыре значения:
- left - выравнивает заголовок по левому краю страницы (используется по умолчанию);
- right - выравнивает заголовок по правому краю страницы;
- center - выравнивает заголовок по центру;
- justify - выравнивает заголовок по ширине страницы, растягивая строку от правого до левого поля. Эффект проявляется, когда длина заголовка больше ширины листа.
id, class
lang, dir
title
style
onfocus, onblur, - внутренние события.

Элементы встроенные и блочные

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

элементы уровня блока, или блочные (block);
встроенные, или элементы уровня текста (inline).

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

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

,
списки -

Рис. 3.2.

Элементы более низкого уровня - уровня текста - по умолчанию выводятся друг за другом в текущей строке (рис. 3.3). Они могут встраиваться в элементы уровня блока и включать другие встроенные элементы. Однако встроенные элементы не могут содержать элементы блочные. Общее правило: элементы можно вкладывать только в элементы более высокого или своего уровня. К встроенным относятся элементы логического (phrase) и физического (fontstyle) форматирования текста, специальные элементы и элементы задания форм.

Если очень Вам не ймется ,
Оптирайтесь, чем придется,
Водными займитесь процедурами .

Рис. 3.3. Встроенные элементы.

Элемент div является наиболее характерным представителем элементов уровня блока. Он используется для объединения различного содержимого в логически цельную единицу. Логический блок - это нечто большее, чем выделение текста в абзац. Он может отделять, например, несколько абзацев, которые представляют собой аннотацию статьи, новости или замечания к основному тексту. В сочетаниии с атрибутами class и id , работу которых мы рассмотрим позднее, элемент div позволяет легко структурировать текст.

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

Атрибуты:

align - задает выравнивание текста на странице. Не рекомендуемый. Может принимать четыре значения:
- left
- right
- center
- justify
id, class - идентификаторы в пределах документа.
lang, dir - информация о языке и направленности текста;
title - заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
style - встроенная информация о стиле.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутренние события.

Аналогом div на уровне текста является элемент span . Основное его назначение - организовывать встроенные блоки, которые затем можно эффективно форматировать при помощи стилей.

Атрибуты:

ctlparid
id, class - идентификаторы в пределах документа.
lang, dir - информация о языке и направленности текста;
title - заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
style - встроенная информация о стиле.
- внутренние события.

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

Атрибуты:

cite - задает URL документа или письма, подлежащего цитированию.
id, class - идентификаторы в пределах документа.
lang, dir - информация о языке и направленности текста;
title - заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
style - встроенная информация о стиле.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутренние события.

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

Атрибуты:

align - задает выравнивание текста. Не рекомендуемый. Может принимать четыре значения:
- left - выравнивает текст по левому краю страницы (используется по умолчанию);
- right - выравнивает текст по правому краю страницы;
- center - выравнивает текст по центру;
- justify - выравнивает текст по ширине страницы, растягивая строку от правого до левого поля.
id, class - идентификаторы в пределах документа.
lang, dir - информация о языке и направленности текста;
title - заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
style - встроенная информация о стиле.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутренние события.

Пример.

1 2 3 4 Заголовки, блоки, цитаты, абзацы 5 6 7 8

Часть первая

Старгородский лев

Глава 1

Безенчук и "Нимфы"

16 B уездном городе N было так много парикмахерских заведений и бюро 17 похоронных процессий, что казалось, жители города рождаются лишь 18 затем, чтобы побриться, остричься, освежить голову вежеталем и 19 сразу же умереть. А на самом деле в уездном городе N люди рождались, 20 брились и умирали довольно редко. Жизнь города N была 21 тишайшей. 22

25 Вопросы любви и смерти не волновали Ипполита Матвеевича 26 Воробьянинова, хотя этими вопросами по роду своей службы он 27 ведал с девяти утра до пяти вечера ежедневно с получасовым 28 перерывом для завтрака. 29

32 Хотя похоронных депо было множество, но клиентура у них была небогатая. 33 "Милости просим" лопнуло еще за три года до того, как Ипполит Матвеевич 34 осел в городе N, а мастер Безенчук пил горькую и даже однажды пытался 35 заложить в ломбарде свой лучший выставочный гроб. 36

Рис. 3.4.

Анализируя данную Web-страницу, можно отметить следующее:

строки 7-10 : заголовок первого уровня.
строки 11-14 : заголовок второго уровня, выполненный по умолчанию более мелким шрифтом.
строки 15-22
.
строки 23-30 : блок . Для наглядности он выделен другим цветом текста и фоном, которые задаются при помощи стилей CSS, а также смещен на 50 пикселей влево от линии других элементов.
строки 31-36 : обычный абзац, созданный при помощи элемента
.
строки 37-43 : цитата, созданная при помощи элемента . По умолчанию сдвинута вправо по отношению к основному тексту. Для большей наглядности выделена курсивом, который задается при помощи стилей CSS.

Все перечисленные элементы входят в элемент . В терминах программирования говорят, что этот элемент является родительским для вложенных элементов-потомков (а также «детей» или «наследников») , , ,

, . Элементы-потомки наследуют ряд свойств элемента-родителя. Например, , ,

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

Который входит в , наследует от него смещенную левую границу (рис. 3.4).

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

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

.

Атрибуты:

clear - указывает, где должна появиться перенесенная строка. Этот атрибут учитывает прикрепляемые объекты (таблицы, изображения и т. п.) Не рекомендуемый. Может принимать четыре значения:
- none - следующая строка текста отображается обычным образом, на ближайшем свободном снизу пространстве (используется по умолчанию);
- left - следующая строка текста отображается на ближайшем свободном пространстве под прикрепленным у левого края объектом;
- right - следующая строка текста отображается на ближайшем свободном пространстве под прикрепленным у правого края объектом;
- all - следующая строка текста отображается на ближайшем свободном пространстве под прикрепленным у любого края объектом;

Рассмотрим на примере использование элемента
.

Пусть имеется исходный документ, в котором объект-изображение не прикреплен ни к какому краю документа (не определен атробут align) и, соответственно, текстом не обтекается (рис. 3.5):

Пример.

1 2 3 4 Использование элемента br с различными атрибутами 5 6 7 8 На занятиях Мирзакарим Санакулович Норбеков часто повторяет: 9 "Я обычный человек, такой же, как все. Ничем не лучше и, надеюсь, 10 ничем не хуже вас. Всего, чего я добился в жизни, вы тоже можете достичь, 11 важно только этого захотеть!" 12 А добился он действительно многого. Сегодня М. С. Норбеков - доктор 13 психологии, доктор педагогики, доктор философии в медицине, профессор, 14 действительный член и член-корреспондент ряда российских и зарубежных 15 академий, автор многих запатентованных изобретении и открытий в науке. 16 Впрочем, все эти звания сам он называет "собачьими регалиями", 17 потому что не ради признания он работает. 18 Мирзакарим Санакулович - истинный ученый-исследователь. 19 Круг его интересов очень широкий. Многие удивляются тому, как все это 20 может сочетаться в одном человеке: художник, композитор, писатель, кинорежиссер, 21 артист, спортсмен, тренер, имеющий черный пояс по каратэ второй дан и черный 22 пояс по сам чон до девятый дан. Но самое главное, автор книги - специалист по 23 суфийской медицине и практике, одной из самых древних среди всех существующих. 24 25

Рис. 3.5. Вид документа с изображением без дополнительных атрибутов

Теперь организуем обтекание изображения текстом, прикрепив его к левому краю. Для этого изображению укажем атрибут align=left , то есть в HTML-коде документа строку 7 заменим на строку . В результате получим текст, обтекающий изображение (рис. 3.6):

Рис. 3.6. Вид документа с прикрепленным изображением.

Применение элемента br с заданным атрибутом clear , определяет будет ли расположенный за элементом текст и дальше обтекать объект, или будет выводиться под ним. В приведенном ниже примере, использование элемента br без указания атрибута clear (что равносильно указанию clear=none) не прерывает обтекания текстом, а только осуществляет перенос на следующую строку. Вставим элемент br перед предложением "А добился он действительно многого." (рис. 3.7):

Рис. 3.7. Демонстрация применения элемента br .

Использование элемента br с атрибутом clear=left прервет обтекание текстом и продолжит вывод текста сразу под прикрепленным объектом (рис. 3.8):

Рис. 3.8. Применение элемента br с атрибутом clear=left

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

Текст непереносимой строки

Закрывающий тег обязателен.

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

Решает обратную задачу - разрешает перенос и вставляется как контейнер внутрь элемента .В следующем примере перенос осуществлен только в предложении "Провинциальная непосредственность.":

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

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

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

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

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

1. Выделите заголовок, который необходимо оформить должным образом.

2. Во вкладке “Главная” разверните меню группы “Стили” , нажав на небольшую стрелочку, расположенную в ее правом нижнем углу.

3. В окне, которое откроется перед вами, выберите необходимый тип заголовка. Закройте окно “Стили” .

это основной заголовок, идущий в самом начале статьи, текста;

заголовок меньшего уровня;

еще меньше;

Подзаголовок
собственно, это и есть подзаголовок.

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

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

Собственно, именно так получилось в наших примерах со стилями “Заголовок 2” и “Подзаголовок” , так как основной текст у нас написан шрифтом Arial , размер — 12 .

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

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

1. Откройте диалоговое окно группы “Стили” , расположенной во вкладке “Главная” .

2. В нижней части окна нажмите на первую кнопку слева “Создать стиль” .

3. В окне, которое перед вами появится, задайте необходимые параметры.

В разделе “Свойства” введите название стиля, выберите ту часть текста, для которой он будет использоваться, выберите стиль, на котором он основан, а также укажите стиль для следующего абзаца текста.

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

Совет: Под разделом “Форматирование” находится окно “Образец” , в котором вы можете видеть то, как будет выглядеть ваш стиль в тексте.

В нижней части окна “Создание стиля” выберите необходимый пункт:

“Только в этом документе” — стиль будет применим и сохранен только для текущего документа;

“В новых документах, использующих этот шаблон” — созданный вами стиль будет сохранен и станет доступен для использования в дальнейшем в других документах.

Выполнив необходимые настройки стиля, сохранив его, нажмите кнопку “ОК” , чтобы закрыть окно “Создание стиля” .

Вот простой пример стиля заголовка (хотя, скорее, подзаголовка), созданного нами:

Примечание: После того, как вы создадите и сохраните свой собственный стиль, он будет находится в группе “Стили” , которая расположена во вкладе “Главная” . Если он не будет отображаться непосредственно на панели управления программы, разверните диалоговое окно “Стили” и найдите его там по названию, которое вы придумали.

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

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

Word 2007: во вкладке Главная в блоке Стили щелкаем по значку стрелки в правом нижнем углу:

Word 2003: в меню Формат щелкаем по пункту Стили и форматирование (на рисунке просто Стили – не обращайте внимания):

Теперь в правой части окна появилось меню Стили . Для начала создадим новый стиль для оформления нашего основного текста – щелкаем по кнопке Создать стиль в правом нижнем углу меню Стили :

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

Имя: Параграф (вы можете придумать любое другое)

Стиль: Абзаца

Основан на стиле: Обычный

Стиль следующего абзаца: Параграф (или ваш вариант названия стиля)

Шрифт: Times New Roman (тут дело вкуса)

Кегль: 14 пт

Выравнивание: По ширине

Интервал: Полуторный

Но это еще не все, нужно задать параметры абзаца. Для этого в правом нижнем углу диалогового окна Создание стиля щелкаем по кнопке Формат и выбираем пункт Абзац :

В открывшемся диалоговом окне Абзац во вкладке Отступы и интервалы выставляем следующие параметры:

Первая строка: Отступ, 1,25 см

Интервал: После, 25 пт

Отмечаем галкой: Не добавлять интервал между абзацами одного стиля

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

Нажимаем кноку OK в данном диалоговом окне и еще раз в окне Создание стиля .

Отлично, стиль создан! Попробуем теперь его применить.

Выделяем часть основного текста и в меню Стили щелкаем по стилю Параграф :

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

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

В меню Стили снова щелкаем по кнопке Создать стиль и задаем для него следующие параметры:

Имя: Подраздел

Стиль: Абзаца

Основан на стиле: Заголовок 2 (нужно для создания оглавления)

Стиль следующего абзаца: Параграф (или ваш вариант названия стиля основного текста)

Шрифт: Verdana

Кегль: 14 пт

Стиль: Полужирный

Выравнивание: По левому краю

Интервал: Полуторный

Не закрывая данное окно, щелкаем по кнопке Формат и выбираем пункт Абзац .

Во вкладке Отступы и интервалы задаем следующие параметры:

Первая строка: Отступ, 1,5 см

Интервал: Перед, 0 пт; После, 20 пт

Во вкладке Положение на странице ставим галки напротив пунктов:

· запрет висячих строк (чтобы не вмещающаяся на данной странице строка не перескакивала на следующую страницу, ибо некрасиво:)

· не отрывать от следующего (чтобы заголовок не отрывался от основного текста)

· не разрывать абзац (чтобы весь заголовок размещался на одной странице)

Закрываем окошки создания стиля по кнопкам OK и задаем для всех заголовков второго уровня стиль Подраздел :

Осталось создать стиль для заголовков первого уровня – заголовков разделов. Задаем стиль Раздел аналогично созданию предыдущего стиля.

Добрый день, уважаемые посетители.

Сегодня будет статья по теме заголовков H1-H6 для на сайте.

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

Основные 2 цель заголовков в тегах H1-H6 - оформление и структуризация контента на страницах ресурса с целью сделать его более читаемым и легко потребляемым посетителями сайта. Никаких других целей мы не должны преследовать от этих тегов.

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

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

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

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

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

Исходя из такого оформления, мы можем понять, что заголовки должны выдерживать свою иерархию при употреблении их в качестве элементом структуризации текста. Не может быть такого, что сначала идет первый заголовок H1, а затем сразу H5 или H6. После первого уровня логично и правильно будет использовать только заголовок в теге H2. Это важно, как с точки зрения самого оформления материала, так с точки зрения выдержки правильной структуры.

Поисковые системы сейчас обращают внимание на данные теги. Но не как на СЕО элементы, а как на элементы структурирования. Поэтому странно будет, если идет H1, а потом сразу H6.

При использовании данных тегов мы обязательно выдерживаем структуру. Если опускаемся на уровень вниз, то никаких прыжков через уровень. Структуру должна быть следующей: H1-H2-H3-H4-H5-H6.

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

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

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

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

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

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

Распространенная ситуация, когда вместо H1 стоит H2. Это не является грубой ошибкой, но лучше такого не допускать.

Если мы говорим об использовании остальных уровней заголовков H2-H6, то их уже стоит использовать в ручном режиме.

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

Так с каждым движком. Если же используете HTML верстку сайта и необходимо добавлять теги в ручном режиме, то сложностей тут не возникнет. Стоит лишь заключать нужные части текста между открывающим и закрывающим тегами с нужным уровнями. Смотрите ниже примеры.

заголовок 2го уровня заголовок 3го уровня заголовок 4го уровня заголовок 5го уровня заголовок 6го уровня

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

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

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

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

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

Приведу вам еще 2 примера оформленных заголовков в H1.

Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.

Также интересное оформление можете сами посмотреть на этой странице .

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

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

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

Больше одного H1 на странице. Это не правильно. Только один раз в каждом документе;
Использования тегов H1-H6 для оформление дополнительных элементов сайта. В самом начале я писал, что предназначение этих документов - оформление и структуризация контента. Поэтому, их стоит использовать только в контенте. Большинство шаблонов сайтов содержат данные теги в боковых колонках для придания стилей их названий и так далее. Ярко выражено это в шаблонах WordPress, когда название каждого виджета в сайдбаре заключено в H3 или в другие теги.Если такая ситуация имеется, то заменяете заголовочные теги в служебных элементах сайта на другие, например на тег "span";
Специально вписываем ключевые слова. Раньше бытовало мнение, что вписав ключевые слова в прямом вхождении в заголовки всех уровней, можно повысить их плотность и позиции такой страницы будет выше. Но сейчас это уже "карается законом" поисковых систем и накладываются санкции за спам в заголовках. Тем более, данные теги ранжируются по другим алгоритмам. Вывод: нет цели вписать ключевые слова;
Частое употребление точек и знаков препинания. Точки в заголовках вообще употреблять не стоит, так как это неправильно с точки зрения, как копирайтинга, так и общих правил оформления текстов. Количество знаков препинания также стараемся минимизировать, чтобы повысить читаемость заголовков. Сюда же можно отнести и большое количество слов - не делаем слишком длинные заголовки;
Не соблюдается выдержка структуры с точки зрения иерархии. Старайтесь соблюдать логическую цепочку в построении иерархии тегов H2-H6 на каждой странице;
Использование тегов H1-H6 для оформления других элементов текста, а не заголовка. Это то, о чем я говорил выше, когда некорректно настроены стили оформления каждого тега и вместо обычного выделения жирным можно использовать заголовок какого-нибудь уровня.
Заголовок не уместен или не несет контекст текста, который идет за ним. Чтобы научиться создавать логические заголовки, возьмите пару хорошо оформленных книг, которые вам было легко читать. Также ориентируйтесь на структуризацию контента на сайте Википедии;
Неиспользование заголовков H1-H6 вообще или же отсутствие на небольших текстах. Просто полное отсутствие и говорить не о чем, а вот про отсутствие на небольших страницах - момент сомнительный, так как любой текст (даже минимальные 1000 символов) имеют логическую структуру. Переход от одной темы к другой. Почему бы его не разбить на логические части подзаголовками различных уровней?

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

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

До встречи в следующих материалах. Все еще впереди.

С уважением, Константин Хмелев!

Здравствуйте уважаемые читатели и гости моего блога. На связи с вами Павел Ямб. По поводу оформления посмотрите — она заняла первое место в статейном конкурсе и называлась «Навыки верстки и оформления текста» — она гениальная и как раз по этой теме.

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

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

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

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

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

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

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

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

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

Этот вид форматирования лучше употреблять там, где описываете:

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

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

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

Старайтесь не употреблять незнакомые и красивые, по вашему мнению, шрифты. Они могут не понравиться заказчику . Не стоит уходить от общих стандартов и портить свою репутацию. Будет выглядеть некрасиво, и даже глупо, если серьезную статью вы напишете готическим шрифтом, или шрифтом Сomic Sans, который больше подходит для юмористических рассказов. Для оформления чаще применяют популярные шрифты без засечек: Arial, Calibri или Tahoma. Размер, как правило, 12 или 14. Для заголовков и подзаголовков можно использовать шрифты, которые чуть больше, а лучше всего пользоваться стилями, чтобы заголовки разных уровней так и распознавались текстовым редактором.

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

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

В предложении должно быть не более 15 слов.
Меньше вводных конструкций: «но, как бы то ни было; как вы, наверное, уже знаете».
Употребляйте не больше 6 предложений в абзаце.
Не используйте сленговые выражения и . К примеру: ГС, СДЛ, внутреняя перелинковка – кому, кроме веб-мастеров, будет понятно, что это значит? Новички точно не поймут, и сразу покинут такой сайт.
Используя цитаты великих людей, поясняйте, кто этот человек. Не все знают имена Гая Юлия Цезаря или Нерона, некоторые даже про Карла Маркса не слышали.
Избегайте тавтологий (повторов одних и тех же слов даже в соседних предложениях).
Не забывайте о правильном оформлении рисунков. Оптимизируйте их тегами alt и title. Это полезно для поисковиков.
Старайтесь писать от третьего лица. В блогах, пишут от первого.
С читателями общайтесь в дружелюбном тоне.
Употребляйте ссылки на достоверный источник информации.

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

Ваш, Павел Ямб.

Смотрите, даже кофе можно оформить афигенно