Инструменты разработчика · Редактор HTML WYSIWYG
Strong против b и em против i: почему Semantic Inline HTML важен для редакторов
· Почему это важно
HTML доступность довольный и редактируемый
Объясняет практическую разницу между семантическими и презентационными встроенными элементами, что с ними делают вспомогательные технологии и поисковые системы и как проверить, что выдает ваш редактор.
Жирный шрифт не всегда важен — выбирайте смысл, а не внешний вид.
Код продукта может быть выделен жирным шрифтом только для того, чтобы читатели могли быстро его найти; предупреждение может быть сильным, потому что его важность зависит от смысла предложения. Эти два намерения могут выглядеть одинаково в таблице стилей по умолчанию. Выбор исключительно по внешнему виду делает разметку неоднозначной, когда CSS изменяется или другой читатель использует структуру.
Панель инструментов ToolAcre помечает его действия жирным и курсивом, а дезинфицирующее средство нормализует устаревшие элементы b и i до Strong и Em. Это полезный вариант по умолчанию для подчеркнутой прозы, но редактор все равно должен решить, действительно ли выбранные слова несут важность или ударение, а не украшение.
Что сегодня говорит спецификация HTML — обобщает текущее значение слов Strong, em, b и i.
Strong означает сильную важность, серьезность или срочность; em представляет собой акцент на стрессе, размещение которого может повлиять на интерпретацию. Элемент b может привлечь внимание, не добавляя важности, в то время как я могу отметить смещение текста от окружающей прозы, например, термина, голоса или условности, без подчеркивания акцента.
Практический урок заключается не в том, что два тега запрещены. Дело в том, что визуальное сходство не стирает смысловых различий. Для узкого вывода ToolAcre выбраны Strong и Em, поэтому контент, требующий просто стилистического смещения, может нуждаться в пересмотре или другом рабочем процессе назначения, а не в изобретенной возможности панели инструментов.
Вспомогательные технологии могут по-разному раскрывать семантику; этот репозиторий не подтверждает отсутствие объявления
Вспомогательные технологии могут использовать семантику элементов, но точная устная обработка зависит от продукта, режима и конфигурации пользователя. Репозиторий не содержит пакета совместимости с программами чтения с экрана, поэтому эта статья не обещает, что «strong» всегда будет объявляться определенным голосом или что «b» всегда будет молчать.
Структура по-прежнему имеет значение, поскольку она предоставляет программному обеспечению информацию, которой не хватает стилизованному диапазону. Протестируйте репрезентативные страницы со вспомогательными технологиями, указанными в вашей политике поддержки. Семантический элемент создает возможность осмысленной интерпретации; он не гарантирует единого универсального звукового эффекта в любой среде.
Эффекты поиска находятся за пределами доказательств этого редактора; семантика по-прежнему улучшает структуру документа
Поисковые системы могут анализировать структуру документа, но ни один местный источник не подтверждает изменения в рейтинге из-за замены b на сильный. Не превращайте семантическую HTML в формулу SEO. Видимость в поиске зависит от контента, ссылок, технической доступности и множества систем за пределами этого редактора.
Оправданной причиной использования семантики является ясность и совместимость. Авторы, браузеры и последующие преобразования могут определить предполагаемую важность или акцент без обратного проектирования объявления стиля. Любые последствия поиска должны описываться только с использованием данных соответствующей платформы, а не выводимых из локальной кнопки форматирования.
Списки, которые на самом деле являются списками — расширяет аргумент до <ul> и <ol> вместо тире и ручной нумерации.
Тот же принцип распространяется и на списки. Три строки, начинающиеся с дефиса, представляют собой обычный текст, а ul и li представляют собой набор одноранговых элементов. Числовые символы, вводимые перед абзацами, не эквивалентны ol, последовательность которого и необязательное начальное значение являются частью структуры.
ToolAcre предоставляет команды маркированного и нумерованного списка и пропускает ul, ol и li через свой фильтр. Поведение команд браузера может различаться, особенно в отношении вложенности, поэтому проверьте исходный код после создания списка. Правильная семантика списка не оправдывает отсутствия меток, неправильного порядка или неподдерживаемой глубины места назначения.
Рабочий пример: ToolAcre сопоставляет b с сильным, а i с em во время фильтрации.
Введите «Остановить развертывание перед изменением схемы», выберите «Остановить развертывание» и нажмите жирный шрифт. Команда браузера может изначально создать b, но карта псевдонимов дезинфицирующего средства выдает сильный. Курсив следует тому же шаблону от i до em. Исходный режим показывает нормализованный результат.
Теперь выберите этикетку продукта, которая выделяется только визуально. ToolAcre не имеет управления вниманием только на уровне b или на основе классов, а метка вносится в список разрешенных только посредством прямого редактирования исходного кода, а не посредством утверждения на панели инструментов. Решите, является ли сильный точным; в противном случае используйте стили, специфичные для места назначения, вне этого ограниченного рабочего процесса.
Что здесь не распространяется — атрибуты ARIA, полный аудит доступности или структура заголовков, которая рассматривается отдельно.
В этой статье не рассматривается ARIA, полный аудит доступности, иерархия заголовков или точное поведение поисковых систем. Он также не утверждает, что каждый встроенный элемент из разрешенного списка имеет элемент управления на панели инструментов. В исходном режиме могут сохраняться u, s, sub, sup, mark, small, code, kbd, samp, var и abbr, если они действительны, но визуальные команды предоставляют меньше вариантов.
Фильтрация семантических тегов не очищает произвольные враждебные HTML для публикации. Токенизатор ToolAcre имеет явное ограничение дифференциала синтаксического анализатора. Серверу, обрабатывающему ненадежные материалы, требуется подходящее средство очистки и политика на основе анализатора, в то время как проверка доступности должна проверять конечный пункт назначения, а не только этот изолированный предварительный просмотр.
Вывод: отформатируйте значение, затем проверьте — суммируется привычка и то, как редактор HTML WYSIWYG ToolAcre отображает точные созданные элементы.
Отформатируйте по смыслу, затем проверьте. Strong и em ценны, когда проза действительно содержит важность и напряжение; они не являются универсальной заменой любого жирного или курсивного шрифта. ToolAcre делает свой выбор видимым, отображая отфильтрованный HTML после каждого действия.
Используйте визуальный элемент управления для черчения, исходный режим для проверки и пункт назначения CSS для внешнего вида. Если желаемая презентация не имеет точного семантического элемента, не вводите в заблуждение тег только потому, что он похож на дизайн. Сохраните замысел автора в системе, способной его отобразить.