Css заголовок: Стили заголовков в CSS: градиенты / Хабр

Leave a Comment / Css / By /

Содержание

–: HTML-элементы заголовков секций — HTML

HTML-элементы <h2>–<h6> представляют собой 6 уровней заголовков секций. <h2> это наибольший заголовок и <h6> — наименьший

Категории контентаПоток контента, заголовок контента, явный контент.
Допустимое содержимоеФразированное содержание.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Допустимые родителиЛюбые элементы которые принимают Содержание потока; не используй как дочерний <hgroup> элемент, сейчас он устарел
Допустимые ARIA-ролиtab (en-US), presentation (en-US)
DOM-интерфейсHTMLHeadingElement

Эти элементы включают глобальные атрибуты.

Примечание: Атрибут align устаревший; не используйте его.

  • Информация о заголовке может использоваться пользовательскими агентами, например, для автоматического создания оглавления для документа
  • Не используйте низкие уровни чтобы снизить размер шрифта: используйте CSS font-size вместо.
  • Избегайте пропуск уровней заголовков: всегда начинайте с <h2>, потом используйте <h3>, и так далее.
  • Вам следует рассмотреть избегание использования <h2> более раза на страницу. Смотрите Defining sections в <h2>–<h6>: The HTML Section Heading elements.

Все заголовки

Следующий код показывает все уровни заголовков в действии

<h2>Heading level 1</h2>
<h3>Heading level 2</h3>
<h4>Heading level 3</h4>
<h5>Heading level 4</h5>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Вот результат этого кода:

Пример страницы

Следующий код показывает несколько заголовков с некоторым содержанием под ними .

<h2>Heading elements</h2>
<h3>Summary</h3>
<p>Some text here...</p>
<h3>Examples</h3>
<h4>Example 1</h4>
<p>Some text here...</p>
<h4>Example 2</h4>
<p>Some text here...</p>
<h3>See also</h3>
<p>Some text here...</p>

Результат кода:

Навигация

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

Не делай
<h2>Heading level 1</h2>
<h4>Heading level 3</h4>
<h5>Heading level 4</h5>
Делай
<h2>Heading level 1</h2>
<h3>Heading level 2</h3>
<h4>Heading level 3</h4>
Расположение

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

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

  1. h2 Жуки
    1. h3 Этимология
    2. h3 Распределение и разнообразие
    3. h3 Эволюция
      1. h4 Поздний полиозой
      2. h4 Юрский период
      3. h4 Меловойский период
      4. h4 Кайнозойский период
    4. h3 Внешняя морфология
      1. h4 Голова
        1. h5 Рот
      2. h4 Туловище
        1. h5 Передгрудь
        2. h5 Пиероторакс
      3. h4 Ноги
      4. h4 Крыла
      5. h4 Живот

Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.

  • Заголовки • Структура страницы • Обучающие материалы по веб-доступности WAI
  • MDN Понимание WCAG, объяснение Руководства 1.3
  • Понимание критерия успеха 1.3.1 | W3C Понимание WCAG 2.0
  • MDN Понимание WCAG, Руководство 2.4 пояснения (en-US)
  • Понимание критерия успеха 2.4.1 | W3C Понимание WCAG 2.0
  • Понимание критерия успеха 2.4.6 | W3C Понимание WCAG 2.0
  • Понимание критерия успеха 2.4.10 | W3C Понимание WCAG 2.0

Содержание раздела маркировки

Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.

Содержимое секционирования можно пометить, используя комбинацию aria-labelledby и id атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.

Пример
<header>
  <nav aria-labelledby="primary-navigation">
    <h3>Primary navigation</h3>
    <!-- navigation items -->
  </nav>
</header>
<!-- page content -->
<footer>
  <nav aria-labelledby="footer-navigation">
    <h3>Footer navigation</h3>
    <!-- navigation items -->
  </nav>
</footer>

В этом примере технология чтения с экрана объявила бы, что есть два <nav> разделы, один называется «Основная навигация», а другой — «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придётся расследовать каждый nav содержание элемента, чтобы определить их назначение.

  • Использование атрибута aria-labelledby
  • Обозначение регионов • Структура страницы • Учебные пособия по WAC WAI

ХарактеристикаСтатусКомментарий
HTML Living Standard
Определение ‘<h2>, <h3>, <h4>, <h5>, <h5>, and <h6>’ в этой спецификации. 		Живой стандарт
HTML5
Определение ‘<h2>, <h3>, <h4>, <h5>, <h5>, and <h6>’ в этой спецификации.		Рекомендация
HTML 4.01 Specification
Определение ‘<h2>, <h3>, <h4>, <h5>, <h5>, and <h6>’ в этой спецификации.		Рекомендация

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • <p>
  • <div>
  • <section>

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Создание заголовка сайта с помощью CSS