Web ページのタイトルの範囲は H1 から H6 までですが、これは階層が適切であることを意味しません。

この記事は、Web コンテンツ、技術文書、または翻訳プロセスを担当する人に適しています。 Web ページに <h1> から <h6> までのタグがあるからといって、そのタイトル レベルが適切であるとは限りません。タグは「ここにタイトルがある」ことを示すだけであり、タイトル間の入れ子関係が確立されることを保証するものではありません。レベルのスキップ、複数の H1、および <div> を使用したタイトルの偽装は、目次の生成、翻訳メモリのマッチング、およびアクセス可能な読み取りに影響します。

以下では、合成サンプルを使用して、Beautiful Soup を使用してタイトルレベルの問題を検出する方法を説明し、どの判断を人間に任せるべきかを説明します。読んだ後は、この一連のチェック方法を独自の文書検証プロセスに組み込むことができます。

一文で結論: HTML タイトル レベルを確認するにはどうすればよいですか?

まずスクリプトを使用して機械的な問題 (レベルのスキップ、複数の H1、誤ったタイトル)を見つけてから、これらの問題が事務上のミスなのか意図的な設計なのかを手動で判断します。

タグの存在がその構造が合法であることを意味しないのはなぜですか?

HTML 仕様では、<hN> を順番にネストし、レベルをスキップしないようにする必要があります。しかし、実際の運用環境では、CMS テンプレート、リッチ テキスト エディターの貼り付け、およびフロントエンド コンポーネントのパッケージ化はすべて、この構造を壊す可能性があります。

さらに危険な状況は、CSS がセマンティック タグをオーバーライドする場合です。たとえば、font-size: 24px の <p> は H1 のように見えますが、実際の <h2> は小さなフォントに設定されています。タグ名の通常の一致のみに依存している場合、またはブラウザのレンダリング結果に依存している場合は、視覚レベルを意味レベルと間違えることになります。

Beautiful Soup は CSS からの干渉を受けることなく DOM ツリー自体を解析するため、元のマークアップに基づいて構造検証を実行できます。

合成例: 正しいタイトル シーケンスと間違ったタイトル シーケンス

この記事では、合成サンプルを使用して処理方法を説明します。以下の 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 -->

この例には、次の 3 種類の質問が含まれています。

• H1 ～ H3 スキップ レベル: スキップ レベルとしてマークされます
• タイトルをシミュレートするには div を使用します: 非見出しタイトルとしてマークします
• 複数の H1: 複数の H1 としてマークされます

正しいアプローチは、単にエラーを報告したり無視したりするのではなく、それらを個別にマークすることです。

<div class="section-title"> には「タイトル」という単語が含まれていますが、意味的にはタイトルではないため、階層ツリーに含めるべきではないことに注意することが重要です。ビジネスがそれをタイトルとして扱う必要がある場合は、変換ルールを明示的に宣言し、受け入れ時に個別にマークする必要があります。

Beautiful Soup を使用して階層検証を実装する

次の Python の例では、Beautiful Soup 4.15.0 と標準ライブラリ html.parser を使用しています。

入力準備: html_snippetに検出したいHTML文字列を代入します。ファイルから読み取る場合は、まず 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 はドキュメント順にタグのリストを返すため、階層推論はトラバース中に記録された状態に完全に依存します。

セクションや記事などの複雑なネストをサポートしたい場合は、親ノードを結合して分析する必要があります。この例では、最も基本的な線形シーケンスの検証に焦点を当てます。

📊 コアの比較: 自動処理と手動レビュー

コードは機械的なエラーを検出できますが、セマンティクスに関する人間の判断に代わることはできません。次の表に、典型的な観測結果とそれに対応する処理方法を示します。

これらのルールは現在の合成例の検証ロジックにのみ適用され、一般的な仕様を構成するものではありません。

CMS によって生成された動的ページ、Shadow DOM、または JS レンダリングされたコンテンツに遭遇すると、Beautiful Soup は完全な DOM を取得できません。現時点では、まずヘッドレス ブラウザを使用して前処理するか、元のソース コードを手動で直接確認する必要があります。

ドキュメントの翻訳にはこのチェックリストを使用してください

Web ページドキュメントのテキスト、リンク、コード、構造は個別に処理する必要があります。保護された部分を受け入れリストに追加し、翻訳後の読みやすさとページの表示を評価します。

OmniDoc (製品ポータル)はマルチフォーマット文書翻訳ポータルを提供しており、公式 Web サイトでは OCR、用語集、対訳比較機能を導入しています。ファイルから直接作業したいチームにとって、これは実際のサンプルを使用して評価する価値のあるパスです。

アップロード許可のある感度を下げたファイルを使用し、この記事のチェック項目を使用して結果を確認してください。この記事では、OmniDoc がオープン ソース ライブラリや内部アルゴリズムを使用しているという主張はなく、この例が製品パフォーマンス テストに代わるものでもありません。

🎯 どの方法があなたに適していますか?

静的 HTML をすばやく表示する必要がある場合

検証スクリプトを直接実行し、見つかった問題の種類を記録し、各項目を手動で確認します。

ページが JS によって動的にレンダリングされる場合

まずヘッドレス ブラウザを使用してレンダリングされた DOM を取得し、次に構造検証を実行します。入手できない場合は、ソース コードを手動で確認してください。

ページに div 疑似タイトルが多数ある場合

まず、これらの要素をタイトルにするかどうかを確認します。従来のテンプレートの場合は、バッチ変換を検討し、承認時に個別にマークを付けます。

❓ よくある質問 (FAQ)

1. タグが存在するということは、タイトル構造が正しいということですか?

いいえ。タグの存在は「ここにタイトルがある」ということを意味するだけです。タイトルが正当なネストされたツリーを形成しているかどうかは、個別に検証する必要があります。

2. タイトル レベルを決定するためにブラウザのレンダリング結果だけに頼ることができないのはなぜですか?

CSS はセマンティック タグをオーバーライドして、視覚的な階層とセマンティックな階層を矛盾させる可能性があります。 Beautiful Soup は CSS の干渉を受けることなく DOM ツリー自体を解析します。

3. スクリプトによって検出された問題はすべて修正する必要がありますか?

不確かな。スキップや複数の H1 は、事務ミスまたは正当な設計である可能性があるため、手動で確認する必要があります。

4. スクリプトはタイトルのコンテンツの品質をチェックできますか?

できません。空のタイトル コンテンツまたは純粋なシンボルはコンテンツの品質に問題があるため、手動で確認する必要があります。

📝 概要

タイトル レベルの問題は、タグとビジュアル スタイルの間に隠れていることがよくあります。最初にスクリプトを使用して機械的にスクリーニングし、次に手動でセマンティクスを判断します。両者を組み合わせることでより安定した効果が得られます。コードは隔離された環境でサンプルを使用してチェックされていますが、これはすべての実際のファイルや製品のパフォーマンスを保証するものではありません。重要な書類を処理する前に、原本を保管し、本条項の範囲および受理事項に従って内容を確認してください。

次のステップ: 作業中の HTML ドキュメントを選択し、上記の検証スクリプトを実行して、見つかった問題の種類を記録します。タグなしのヘッダーまたは複雑な入れ子がある場合は、親コンテナーの分析をサポートするようにスクリプトを拡張するか、手動レビュー プロセスに直接移行します。参照: 美しいスープのドキュメント

今すぐ試してみましょう: ドキュメントをアップロードして、元のレイアウトを保持したまま翻訳を開始します