Инструменты разработчика · Редактор HTML WYSIWYG
Заголовки — это небольшой жирный текст: почему уровни заголовков имеют значение в веб-контенте
· Почему это важно
HTML доступность редактирование текста
Объясняет, почему h1–h6 формируют структуру документа, на которую полагаются пользователи программ чтения с экрана и поисковые системы, и как проверить, что визуальные заголовки являются реальными заголовками.
Статья без заголовков — открывается со страницы, где каждый видимый заголовок представляет собой жирный абзац.
Строка, увеличенная и выделенная жирным шрифтом CSS, может выглядеть как заголовок раздела, оставаясь при этом абзацем в дереве документа. Зрячие читатели могут сделать вывод о разделении по типографике, но программное обеспечение не получает элемента заголовка, который можно было бы идентифицировать, собирать или перемещаться. Внешний вид сам по себе не создает иерархию.
ToolAcre позволяет избежать контроля стиля и обеспечивает явный выбор блоков для h1–h4. Таким образом, писатель может кодировать заголовок, а не имитировать его с помощью четкого текста. Белый список также принимает исходные коды h5 и h6, хотя на панели инструментов не отображаются элементы управления для этих уровней.
Что делает элемент заголовка, помимо размера: объясняется его структура, ярлыки навигации и структура, которую он обеспечивает.
Элемент заголовка обозначает последующий контент и способствует навигации по структуре документа. Браузеры раскрывают эту роль через API специальных возможностей, и многие вспомогательные инструменты могут отображать список заголовков или перемещаться между ними. Элемент остается идентифицируемым, даже если таблица стилей отсутствует или заменена.
Жирный абзац не несет в себе никакого структурного сигнала. Это все еще может быть полезная проза, но она не должна заменять границу раздела. Протестируйте окончательный документ с помощью инструмента проверки структуры или доступности, поскольку локальный предварительный просмотр не сообщает о связях заголовков и не проверяет организацию автора.
Уровни являются вложенными, а не размерами. Объясняется, почему переход с h2 на h4 сбивает с толку читателей и инструменты.
Уровни выражают вложенность, а не меню размеров шрифта. h2 обычно представляет раздел под основным контекстом страницы; h3 представляет подраздел этого h2. Выбор h4 просто потому, что его шрифт по умолчанию выглядит правильно, может означать отсутствие промежуточной структуры.
ToolAcre сохранит h1–h6 и не отклонит пропущенные уровни. Фильтр обеспечивает словарный запас, а не редакционную логику. Создайте контур на бумаге или в исходном коде, а затем используйте CSS в месте назначения, чтобы управлять внешним видом, не меняя уровни для достижения предпочтительного визуального масштаба.
Выберите заголовок страницы в контексте; этот редактор не применяет правило one-h1
В рабочей тетради прописан один h1, но в реализации такого правила нет, и в этой статье он не придуман как универсальный закон. Шаблоны страниц, встроенные фрагменты и соглашения о документах определяют, должно ли содержимое содержать основной заголовок или начинаться под заголовком, предоставленным хостом.
Проверьте весь пункт назначения, а не только фрагмент. Если CMS уже отображает заголовок статьи как h1, вставленное основное содержимое может разумно начинаться с h2. ToolAcre не видит этот внешний шаблон, поэтому его опция h1 является возможностью, а не рекомендацией для каждого черновика.
Рабочий пример: сравните выделенный жирным абзацем элемент заголовка в исходном коде.
Создайте `<p><strong>Installation</strong></p>` и `<h2>Configuration</h2>`. Оба могут выглядеть заметными в песочнице, но источник сообщает, что только «Конфигурация» является заголовком. Проверка дерева доступности на опубликованной странице также должна идентифицировать только h2 в качестве заголовка.
Измените установку на правильный уровень с помощью переключателя блоков или режима источника. Затем проверьте, относятся ли эти два заголовка к сверстникам или к родителю и ребенку. Дезинфицирующее средство сохраняет обе формы, но не может определить связь по их словам. Это решение принадлежит автору документа и контексту страницы.
Стилизация заголовков без злоупотребления уровнями — объясняет, что внешний вид должен контролироваться CSS, а не выбором уровня.
Внешний вид заголовка принадлежит CSS. Сайт может сделать h2 скромным, а h3 — визуально отличительным, сохраняя при этом логические уровни, при условии, что дизайн по-прежнему передает иерархию. Правильный стиль h2 безопаснее, чем замена h4 просто для получения меньшего размера браузера по умолчанию.
Таблица стилей предварительного просмотра намеренно проста и легка. Это не тема вашего продукта, поэтому размеры заголовка по умолчанию не являются хорошим доказательством дизайна места назначения. Скопируйте семантический фрагмент, примените к нему одобренные стили и просмотрите адаптивное поведение, не переписывая структуру для удовлетворения одного изолированного представления.
Что здесь не распространяется — секционирование таких элементов, как <section> и <article> или SEO за пределами структуры.
В этой статье не рассматриваются элементы разделов и статей, роли заголовков ARIA, полное руководство SEO или все программы чтения с экрана. Он также не утверждает, что ToolAcre проверяет пропущенные уровни, повторяющиеся заголовки или качество текста заголовков. Панель инструментов предоставляет элементы; авторы предоставляют последовательную структуру.
Обеззараженная продукция не является автоматически безопасной ненадежной публикацией. Песочница предварительного просмотра ограничивает выполнение внутри ToolAcre, а скопированная разметка оставляет эту защиту. Используйте тесты санитарии и доступности на стороне назначения. Правильное дерево заголовков — это один из показателей качества, а не контроль безопасности или полный аудит.
Вывод: сначала структура, потом стиль — кратко излагаются правила и то, как ToolAcre's HTML WYSIWYG Редактор позволяет проверить, является ли разметка за визуальным заголовком элементом заголовка.
Сначала структура, потом стиль. Решите, какие темы являются разделами и подразделами, назначьте уровни на основе этих отношений, а затем проверьте фактические h-элементы, которые излучает ToolAcre. Заголовок должен оставаться значимым даже после исчезновения шрифтов, цветов и интервалов.
Наконец, поместите фрагмент в его реальный шаблон и просмотрите объединенную иерархию. Локальный редактор не может знать внешний заголовок страницы или навигационную оболочку. Его ценность — прозрачность: визуальное форматирование и источник располагаются рядом друг с другом, что облегчает обнаружение поддельных заголовков перед публикацией.