Judul halaman web berkisar dari H1 hingga H6, yang tidak berarti hierarkinya masuk akal.

Artikel ini cocok untuk orang yang bertanggung jawab atas konten web, dokumentasi teknis, atau proses penerjemahan. Hanya karena terdapat tag <h1> hingga <h6> di halaman web tidak berarti tingkat judulnya masuk akal. Tag hanya menyatakan "ada judul di sini" dan tidak menjamin bahwa hubungan bersarang antar judul terjalin. Melewati level, beberapa H1, dan menggunakan <div> untuk menyamarkan judul akan memengaruhi pembuatan daftar isi, pencocokan memori terjemahan, dan bacaan yang dapat diakses.

Berikut ini menggunakan sampel sintetis untuk mengilustrasikan cara menggunakan Beautiful Soup untuk mendeteksi masalah tingkat judul, dan menjelaskan penilaian mana yang sebaiknya diserahkan kepada manusia. Setelah membaca, Anda dapat mengintegrasikan rangkaian metode pemeriksaan ini ke dalam proses verifikasi dokumen Anda sendiri.

Kesimpulan dalam satu kalimat: Bagaimana cara memeriksa level judul HTML?

Pertama-tama gunakan skrip untuk menemukan masalah mekanis (pelewatan level, beberapa H1, judul palsu), lalu tentukan secara manual apakah masalah ini merupakan kesalahan administrasi atau desain yang disengaja.

Mengapa keberadaan tag tidak berarti strukturnya legal?

Spesifikasi HTML mengharuskan <hN> disarangkan secara berurutan dan tidak boleh melewati level. Namun dalam lingkungan produksi nyata, templat CMS, penempelan editor teks kaya, dan pengemasan komponen front-end semuanya dapat merusak struktur ini.

Situasi yang lebih berbahaya adalah ketika CSS menggantikan tag semantik. Misalnya, <p> font-size: 24px terlihat seperti H1, tetapi <h2> asli disetel ke font kecil. Jika Anda hanya mengandalkan pencocokan nama tag secara teratur, atau mengandalkan hasil rendering browser, Anda akan salah mengira tingkat visual sebagai tingkat semantik.

Beautiful Soup mengurai pohon DOM itu sendiri tanpa campur tangan CSS, sehingga dapat melakukan verifikasi struktural berdasarkan markup aslinya.

Contoh sintesis: urutan judul benar dan salah

Artikel ini menggunakan sampel sintetis untuk mendemonstrasikan metode pemrosesan. Cuplikan HTML di bawah ini hanya digunakan di memori, bukan halaman sebenarnya, dan tidak mewakili ambang batas standar industri apa pun.

Contoh masukan yang benar

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

Hasil yang diharapkan: Hierarki berkelanjutan, tidak ada lompatan level, H1 unik, dan subtitel sepenuhnya milik judul induk.

Contoh kesalahan dan masukan batas

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

Contoh ini berisi tiga jenis pertanyaan:

• Level lompatan H1 hingga H3: ditandai sebagai level lompatan
• Gunakan div untuk menyimulasikan judul: tandai sebagai judul non-heading
• Beberapa H1: Ditandai sebagai beberapa-h1

Pendekatan yang benar adalah dengan menandainya secara terpisah, bukan sekadar melaporkan kesalahan atau mengabaikannya.

Penting untuk dicatat bahwa meskipun <div class="section-title"> mengandung kata "judul", secara semantik itu bukanlah judul dan tidak boleh dimasukkan dalam pohon hierarki. Jika bisnis mengharuskannya untuk diperlakukan sebagai hak milik, aturan konversi harus dinyatakan secara eksplisit dan ditandai secara terpisah pada saat penerimaan.

Gunakan Beautiful Soup untuk menerapkan verifikasi hierarki

Contoh Python berikut menggunakan Beautiful Soup 4.15.0, dengan perpustakaan standar html.parser.

Persiapan masukan: Tetapkan string HTML yang akan dideteksi ke html_snippet. Jika membaca dari suatu file, pertama-tama gunakan open().read() untuk mendapatkan string, lalu meneruskannya ke parser.

Output yang Diharapkan: Skrip akan mencetak daftar masalah terstruktur dan menggunakan pernyataan untuk memverifikasi kelemahan yang diketahui pada data sintetis.

Kode ini tidak bergantung pada jaringan eksternal atau operasi sistem file, dan semua pernyataan dirancang terhadap data sintetis. Silakan jalankan dalam lingkungan ketergantungan Anda yang terkunci dan jangan berasumsi kompatibilitas versi.

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)

Skrip ini hanya memeriksa anomali struktural pada tingkat tag dan tidak membahas kualitas konten atau konsistensi visual. find_all mengembalikan daftar tag dalam urutan dokumen, sehingga inferensi hierarki bergantung sepenuhnya pada status yang direkam saat melakukan traversing.

Jika Anda ingin mendukung kumpulan bagian, artikel, dll. yang kompleks, Anda perlu menggabungkan node induk untuk analisis. Contoh ini berfokus pada verifikasi barisan linier paling dasar.

📊 Perbandingan inti: pemrosesan otomatis vs. peninjauan manual

Kode dapat menangkap kesalahan mekanis, namun tidak dapat menggantikan penilaian manusia terhadap semantik. Tabel berikut mencantumkan observasi umum dan metode pemrosesan terkait.

Aturan ini hanya berlaku untuk logika verifikasi dari contoh sintetik saat ini dan bukan merupakan spesifikasi umum.

Saat menemukan halaman dinamis, Shadow DOM atau konten yang dirender JS yang dihasilkan oleh CMS, Beautiful Soup tidak dapat memperoleh DOM lengkap. Saat ini, Anda sebaiknya menggunakan browser tanpa kepala terlebih dahulu untuk melakukan praproses, atau langsung meninjau kode sumber asli secara manual.

Gunakan daftar periksa ini untuk terjemahan dokumen

Teks, tautan, kode, dan struktur dokumen halaman web harus diproses secara terpisah. Tambahkan bagian yang dilindungi ke daftar penerimaan, lalu evaluasi keterbacaan dan presentasi halaman setelah terjemahan.

OmniDoc (portal produk) menyediakan portal terjemahan dokumen multi-format, dan situs resminya memperkenalkan fungsi OCR, glosarium, dan perbandingan bilingual. Untuk tim yang ingin bekerja langsung dari file, ini adalah jalur yang layak dievaluasi dengan sampel kehidupan nyata.

Harap gunakan file yang tidak peka dan Anda mempunyai izin untuk mengunggahnya, dan gunakan item centang dalam artikel ini untuk meninjau hasilnya. Tidak ada klaim di sini bahwa OmniDoc menggunakan perpustakaan sumber terbuka atau algoritma internal dalam artikel ini, dan contoh tersebut juga tidak menggantikan pengujian kinerja produk.

🎯 Metode mana yang cocok untuk Anda?

Jika Anda perlu menyaring HTML statis dengan cepat

Jalankan langsung skrip verifikasi, catat jenis masalah yang ditemukan, lalu konfirmasikan setiap item secara manual.

Jika halaman Anda dirender secara dinamis oleh JS

Pertama-tama gunakan browser tanpa kepala untuk mendapatkan DOM yang dirender, lalu lakukan verifikasi struktural; jika tidak dapat diperoleh, tinjau kode sumber secara manual.

Jika halaman Anda memiliki banyak judul semu div

Konfirmasikan terlebih dahulu apakah elemen ini harus dijadikan judul. Jika ini adalah templat lama, pertimbangkan konversi batch dan tandai secara terpisah saat penerimaan.

❓ Pertanyaan yang Sering Diajukan (FAQ)

1. Jika tag ada, apakah berarti struktur judulnya sudah benar?

TIDAK. Keberadaan tag hanya berarti"ada judulnya disini". Apakah judul tersebut merupakan pohon bersarang yang sah perlu diverifikasi secara terpisah.

2. Mengapa kita tidak bisa mengandalkan hasil rendering browser saja untuk menentukan level judul?

CSS mungkin mengesampingkan tag semantik, sehingga membuat hierarki visual tidak konsisten dengan hierarki semantik. Beautiful Soup mem-parsing pohon DOM itu sendiri tanpa campur tangan CSS.

3. Apakah semua masalah yang terdeteksi oleh skrip perlu diperbaiki?

tidak pasti. Lompatan dan beberapa H1 memerlukan konfirmasi manual karena bisa jadi merupakan kesalahan administrasi atau desain yang sah.

4. Bisakah skrip memeriksa kualitas konten judul?

tidak bisa. Konten judul kosong atau simbol murni merupakan masalah kualitas konten dan memerlukan peninjauan manual.

📝 Ringkasan

Masalah dengan level judul sering kali tersembunyi di antara tag dan gaya visual. Pertama-tama gunakan skrip untuk penyaringan mekanis, lalu nilai semantiknya secara manual. Kombinasi keduanya memberikan efek yang lebih stabil. Kode telah diperiksa dengan contoh di lingkungan yang terisolasi, namun ini bukan jaminan semua file nyata atau kinerja produk. Sebelum memproses dokumen penting, harap simpan dokumen asli dan tinjau sesuai dengan batasan dan item penerimaan artikel ini.

Langkah selanjutnya: Pilih dokumen HTML yang sedang Anda kerjakan, jalankan skrip validasi di atas, dan catat jenis masalah yang ditemukan. Jika ada header yang tidak diberi tag atau kumpulan kompleks, perluas skrip untuk mendukung analisis penampung induk, atau langsung pindah ke proses peninjauan manual. Referensi: Dokumentasi Sup yang Indah

Coba sekarang: Unggah dokumen untuk memulai penerjemahan, dengan tetap mempertahankan tata letak aslinya