Заголовки веб-страниц варьируются от H1 до H6, что не означает, что иерархия является разумной.

– Автоматическое обнаружение может обнаруживать только механические ошибки, а семантическая оценка и качество контента по-прежнему требуют проверки вручную.

• Страницы рендеринга JS или Shadow DOM не могут получить полный DOM и должны быть предварительно обработаны с помощью headless-браузера.

Эта статья подходит для людей, ответственных за веб-контент, техническую документацию или процессы перевода. Тот факт, что на веб-странице есть теги от <h1> до <h6>, не означает, что уровень заголовка является разумным. Тег сообщает только «здесь есть заголовок» и не гарантирует, что между заголовками установлена вложенная связь. Пропуск уровня, несколько H1 и использование <div> для маскировки заголовков повлияют на создание оглавления, сопоставление памяти переводов и доступность чтения.

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

Вывод в одном предложении: Как проверить уровень заголовка HTML?

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

Почему наличие тегов не означает, что структура легальна?

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

Более коварная ситуация — когда CSS переопределяет семантические теги. Например, <p> в font-size: 24px выглядит как H1, но настоящий <h2> имеет мелкий шрифт. Если вы полагаетесь только на регулярное сопоставление имен тегов или на результаты рендеринга браузера, вы примете визуальный уровень за семантический уровень.

Beautiful Soup анализирует само дерево DOM без вмешательства CSS, поэтому он может выполнять структурную проверку на основе исходной разметки.

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

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

Пример правильного ввода

<h1>API 概览</h1>
<h2>认证机制</h2>
<h3>OAuth2 流程</h3>
<h2>错误处理</h2>

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

Примеры ввода ошибок и границ

<h1>用户指南</h1>
<h3>快速开始</h3> <!-- 跳过 H2 -->
<div class="section-title">高级配置</div> <!-- 非标题标签 -->
<h1>附录</h1> <!-- 第二个 H1 -->

Этот пример содержит три типа вопросов:

• Уровень пропуска от H1 до H3: отмечен как уровень пропуска.
• Используйте div для имитации заголовка: пометить как заголовок без заголовка.
• Несколько H1: помечено как Multiple-h1.

Правильный подход — отмечать их отдельно, а не просто сообщать об ошибке или игнорировать их.

Важно отметить, что хотя <div class="section-title"> содержит слово «заголовок», семантически он не является заголовком и не должен включаться в иерархическое дерево. Если бизнес требует, чтобы его рассматривали как титул, правила преобразования необходимо явно объявить и отметить отдельно во время принятия.

Используйте Beautiful Soup для реализации иерархической проверки

В следующем примере Python используется Beautiful Soup 4.15.0 со стандартной библиотекой html.parser.

Подготовка ввода: назначьте распознаваемую HTML-строку html_snippet. При чтении из файла сначала используйте open().read() для получения строки, а затем передайте ее анализатору.

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

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

from bs4 import BeautifulSoup

# 输入准备：合成示例包含跳级、伪标题、多H1
# 实际使用时可替换为 open('page.html').read()
html_snippet = """
<h1>用户指南</h1>
<h3>快速开始</h3>
<div class="section-title">高级配置</div>
<h1>附录</h1>
"""

soup = BeautifulSoup(html_snippet, 'html.parser')
headings = soup.find_all(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])

issues = []
prev_level = 0
h1_count = 0

for tag in headings:
    level = int(tag.name[1])
    text = tag.get_text(strip=True)

    if level == 1:
        h1_count += 1
    if prev_level > 0 and level > prev_level + 1:
        issues.append(f"skip-level: H{prev_level} -> H{level} at '{text}'")
    prev_level = level

if h1_count != 1:
    issues.append(f"multiple-h1: found {h1_count} H1 tags")

# 检查伪标题（仅作为补充信号，不自动纳入层级）
pseudo_titles = soup.find_all('div', class_='section-title')
if pseudo_titles:
    issues.append(f"non-heading-title: {len(pseudo_titles)} div.section-title found")

# 输出与验收：针对本合成示例的预期断言
print("Detected issues:")
for issue in issues:
    print(f"- {issue}")

assert len(issues) == 3, f"Expected 3 issues, got {len(issues)}"
assert any('skip-level' in i for i in issues)
assert any('multiple-h1' in i for i in issues)
assert any('non-heading-title' in i for i in issues)

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

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

📊 Сравнение ядра: автоматическая обработка и ручная проверка

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

Эти правила применяются только к логике проверки текущего синтетического примера и не представляют собой общую спецификацию.

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

Используйте этот контрольный список для перевода документов

Текст, ссылки, код и структура документов веб-страниц должны обрабатываться отдельно. Добавьте защищенные части в список приемки, а затем оцените читаемость и представление страницы после перевода.

OmniDoc (портал продуктов) предоставляет многоформатный портал для перевода документов, а на официальном сайте представлены функции оптического распознавания символов, глоссария и двуязычного сравнения. Для команд, которые хотят работать непосредственно с файлами, этот путь стоит оценить на реальных примерах.

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

🎯 Какой метод подходит вам?

Если вам нужно быстро просмотреть статический HTML-код

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

Если ваша страница динамически отображается с помощью JS

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

Если на вашей странице много псевдозаголовков div

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

❓ Часто задаваемые вопросы (FAQ)

1. Если тег существует, означает ли это, что структура заголовка правильная?

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

2. Почему мы не можем просто полагаться на результаты рендеринга браузера для определения уровня заголовка?

CSS может переопределять семантические теги, что делает визуальную иерархию несовместимой с семантической иерархией. Beautiful Soup анализирует само дерево DOM без вмешательства CSS.

3. Все ли обнаруженные скриптом проблемы необходимо исправлять?

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

4. Может ли скрипт проверять качество контента заголовка?

не могу. Пустой заголовок или чистые символы являются проблемами качества контента и требуют проверки вручную.

📝 Резюме

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

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

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