Как сделать подзаголовок в html

Разметка для подзаголовков

Если вы ещё не знаете, в HTML5 элемент hgroup признан устаревшим.

В спецификацию HTML были добавлены рекомендации по разметке для подзаголовков с использованием существующих и поддерживаемых браузерами элементов HTML.

Советы по разметке подзаголовков

Перед каждым разработчиком возникает важный вопрос: «Как должна выглядеть разметка для этой пакости?»

Чтобы помочь нам, в спецификацию HTML были добавлены рекомендации по разметке для подзаголовков:

Примечание: Элементы h1–h6 для заголовков стоит использовать только в том случае когда они служат заголовком для нового раздела или подраздела текста.

В следующем примере заголовок и подзаголовки для веб-страницы сгруппированы с помощью элемента header . Для добавления в разметку подзаголовков использованы элементы p , так как по замыслу разработчика подзаголовки не должны добавляться в содержание и не обозначают начало нового раздела. Под примером кода представлен пример заголовка и подзаголовков c примененными к ним стилями.

header> h1>HTML 5.1 Nightly h1> p>A vocabulary and associated APIs for HTML and XHTML p> p>Editor's Draft 9 May 2013 p> header> 

Книжный подзаголовок можно разместить в той же строке что и заголовок и отделить его двоеточием.

h1>The Lord of the Rings: The Two Towers h1> 

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

h1>The Mothers span>Fillmore East - June 1971 span> h1> 

Заголовок и лид в новостной статье можно сгруппировать элементом header . Заголовок находится в h2 , а лид — в p .

header> h2>3D films set for popularity slide h2> p>First drop in 3D box office projected for this year despite hotly tipped summer blockbusters, according to Fitch Ratings report p> header> 

Примечание: Некоторые предлагали использовать для разметки подзаголовков элемента small . Рабочая группа HTML провела обсуждение этого предложения, но никаких весомых доводов в пользу такого решения не найти не удалось. Следовательно, small для разметки подзаголовков использовать нежелательно.

А как насчёт сводки документа?

Если вы хотите чтобы подзаголовок отображался в полу мифической сводке документа, добавьте его вместе с текстом заголовка так же как это сделано в примерах 1 и 2. В противном случае поместите текст подзаголовка в элемент p , например, как в третьем примере.

Вопросы к разработчикам

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

Если вас заинтересовала эта тема, вы можете присоединиться ко мне и моим единомышленникам: Брюсу Лоусону (Bruce Lawson), Яну Девлину (Ian Devlin) и остальным в рабочей группе HTML и принять участвие в дальнейшем обсуждении.

Значение понятия «устаревший» в HTML5

элемент не должен использоваться

hgroup , как и другие устаревшие элементы, не являются частью стандарта. Это значит, что когда при проверке на соответствие стандартам будет найден элемент hgroup , вы увидите сообщение об ошибке. Вот текст ошибки, полученной при проверке с помощью сервиса валидации разметки W3C Markup Validation Service:

Ошибка: Элемент hgroup устарел. Для разметки подзаголовков поместите текст подзаголовка в элемент p после элемента h1-h6 , содержащего главный заголовок, или же поместите подзаголовок непосредственно в элемент h1-h6 , содержащий главный заголовок, разделив заголовок и подзаголовок символом пунктуации и/или поместив подзаголовок в элемент span с другой стилизацией. Чтобы сгруппировать заголовки и подзаголовки, альтернативные заголовки или слоганы, используйте элементы header или div .

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

Зачем и для чего

В последние несколько лет много говорили и писали о том соответствует ли элемент hgroup тем требованиям, которые предъявляют к элементам являющимся частью спецификации HTML. В конечном счёте было решено, что не соответствует. Должно ли мы были принять решение об этом раньше? Да, но как недавно заявил Майк Смит:

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

Если вы хотели бы почитать об истории hgroup , в интернете есть много материала:

Архивы рабочей группы HTML от 2010 года (верхушка айсберга):

• ветка с предложением избавиться от hgroup (Ноябрь)
• ветка с описанием hgroup и ARIA
• ветка с предложением избавиться от hgroup (Декабрь)

Избранные статьи по теме:

• Об элементе hgroup
• Прощай, hgroup
• W3C исключает тег hgroup из спецификации HTML5
• Удар по доступности HTML5: информация для народа
• Хороводы с hgroup
• hgroup удалён из спецификации HTML5
• HTML5: покойся с миром, элемент hgroup

Оригинальная статья: How to mark up subheadings, subtitles, alternative titles and taglines Статью вычитывали: smolnikov, SilentImp, visitorFM, NatalieF

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

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

Рекомендации по использованию тегов заголовков описаны в статье: Как правильно писать HTML заголовки для сайта.

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

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

заголовок

Отображение в браузере

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

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

Поддержка браузерами

Теги
—	Да	Да	Да	Да	Да

Атрибуты

В HTML5 у тегов заголовков , , , , , нет атрибутов.

Устаревшие атрибуты заголовков HTML

Устанавливает способ выравнивания контента по горизонтали. В HTML5 используйте CSS.

Заголовки и подзаголовки

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.

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

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

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

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

Перейти к заданию

• index.html Сплит-режим

1 Заголовки

Заголовки являются одним из важнейших инструментов для структурирования текста.

1.1 Рекомендации по использованию

Вот некоторые рекомендации по использованию заголовков в HTML-странице.

1.1.1 Использование h1

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

1.1.2 Использование h2-h6

При использовании подзаголовков не рекомендуется пропускать уровни заголовков, то есть после заголовка h1 должен идти подзаголовок h2 и только потом подзаголовок h3.

Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

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

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

Примеры заголовков. Код HTML

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

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

Если урок был полезным,
можете поделиться им с друзьями