Tiêu đề trang web nằm trong phạm vi từ H1 đến H6, điều đó không có nghĩa là hệ thống phân cấp hợp lý.

Bài viết này phù hợp với những người chịu trách nhiệm về nội dung web, tài liệu kỹ thuật hoặc quy trình dịch thuật. Chỉ vì có các thẻ <h1> đến <h6> trong một trang web không có nghĩa là mức tiêu đề đó là hợp lý. Thẻ chỉ cho biết "có tiêu đề ở đây" và không đảm bảo rằng mối quan hệ lồng nhau giữa các tiêu đề được thiết lập. Bỏ qua cấp độ, nhiều H1 và sử dụng <div> để ngụy trang tiêu đề sẽ ảnh hưởng đến việc tạo mục lục, khớp bộ nhớ dịch và khả năng đọc có thể truy cập.

Phần sau đây sử dụng mẫu tổng hợp để minh họa cách sử dụng Beautiful Soup nhằm phát hiện các vấn đề ở cấp độ tiêu đề và giải thích những phán quyết nào nên để con người tự quyết định. Sau khi đọc, bạn có thể tích hợp bộ phương pháp kiểm tra này vào quy trình xác minh tài liệu của riêng mình.

Kết luận trong một câu: Làm cách nào để kiểm tra cấp độ tiêu đề HTML?

Trước tiên, hãy sử dụng tập lệnh để tìm các vấn đề cơ học (bỏ qua cấp độ, nhiều H1, tiêu đề sai), sau đó xác định thủ công xem những vấn đề này là lỗi văn thư hay thiết kế có chủ ý.

Tại sao sự tồn tại của thẻ không có nghĩa là cấu trúc đó hợp pháp?

Đặc tả HTML yêu cầu <hN> phải được lồng theo thứ tự và không được bỏ qua các cấp độ. Nhưng trong môi trường sản xuất thực tế, các mẫu CMS, dán trình soạn thảo văn bản đa dạng thức và đóng gói thành phần giao diện người dùng đều có thể phá vỡ cấu trúc này.

Một tình huống nguy hiểm hơn là khi CSS ghi đè các thẻ ngữ nghĩa. Ví dụ: <p> của font-size: 24px trông giống H1, nhưng <h2> thực sự được đặt ở phông chữ nhỏ. Nếu chỉ dựa vào việc khớp tên thẻ thông thường hoặc dựa vào kết quả hiển thị của trình duyệt, bạn sẽ nhầm cấp độ hình ảnh với cấp độ ngữ nghĩa.

Beautiful Soup tự phân tích cây DOM mà không bị CSS can thiệp, do đó, nó có thể thực hiện xác minh cấu trúc dựa trên đánh dấu ban đầu.

Ví dụ tổng hợp: dãy tiêu đề đúng và sai

Bài viết này sử dụng các mẫu tổng hợp để trình bày phương pháp xử lý. Đoạn mã HTML bên dưới chỉ được sử dụng trong bộ nhớ, không phải là một trang thực và không đại diện cho bất kỳ ngưỡng tiêu chuẩn ngành nào.

Ví dụ nhập đúng

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

Kết quả mong đợi: Phân cấp liên tục, không bỏ qua cấp độ, H1 là duy nhất và phụ đề hoàn toàn thuộc về tiêu đề gốc.

Ví dụ về lỗi và ranh giới đầu vào

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

Ví dụ này có ba loại câu hỏi:

• Mức bỏ qua H1 đến H3: được đánh dấu là cấp độ bỏ qua
• Dùng div để mô phỏng tiêu đề: đánh dấu là non-heading-title
• Nhiều H1: Được đánh dấu là nhiều-h1

Cách tiếp cận đúng là đánh dấu chúng một cách riêng biệt thay vì chỉ báo lỗi hoặc bỏ qua chúng.

Điều quan trọng cần lưu ý là mặc dù <div class="section-title"> có chứa từ "tiêu đề", nhưng nó không phải là tiêu đề về mặt ngữ nghĩa và không được đưa vào cây phân cấp. Nếu doanh nghiệp yêu cầu nó được coi như một tiêu đề thì các quy tắc chuyển đổi cần phải được khai báo rõ ràng và đánh dấu riêng trong quá trình chấp nhận.

Sử dụng Beautiful Soup để triển khai xác minh thứ bậc

Ví dụ Python sau đây sử dụng Beautiful Soup 4.15.0, với thư viện chuẩn html.parser.

Chuẩn bị đầu vào: Gán chuỗi HTML cần phát hiện cho html_snippet. Nếu đọc từ một tệp, trước tiên hãy sử dụng open().read() để lấy chuỗi, sau đó chuyển nó tới trình phân tích cú pháp.

Đầu ra dự kiến: Tập lệnh sẽ in danh sách các vấn đề có cấu trúc và sử dụng các xác nhận để xác minh các sai sót đã biết trong dữ liệu tổng hợp.

Mã không dựa vào các hoạt động của mạng hoặc hệ thống tệp bên ngoài và tất cả các xác nhận đều được thiết kế dựa trên dữ liệu tổng hợp. Vui lòng chạy trong môi trường phụ thuộc bị khóa của riêng bạn và không giả định tính tương thích của phiên bản.

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)

Tập lệnh này chỉ kiểm tra các điểm bất thường về cấu trúc ở cấp thẻ và không đề cập đến chất lượng nội dung hoặc tính nhất quán về hình ảnh. find_all trả về danh sách các thẻ theo thứ tự tài liệu, do đó suy luận phân cấp hoàn toàn dựa vào trạng thái được ghi lại trong khi duyệt ngang.

Nếu bạn muốn hỗ trợ việc lồng các phần, bài viết, v.v. phức tạp, bạn cần kết hợp các nút cha để phân tích. Ví dụ này tập trung vào việc xác minh trình tự tuyến tính cơ bản nhất.

📊 So sánh cốt lõi: xử lý tự động và đánh giá thủ công

Mã có thể bắt được các lỗi cơ học, nhưng nó không thể thay thế sự đánh giá của con người về mặt ngữ nghĩa. Bảng sau liệt kê các quan sát điển hình và phương pháp xử lý tương ứng.

Các quy tắc này chỉ áp dụng cho logic xác minh của ví dụ tổng hợp hiện tại và không tạo thành thông số kỹ thuật chung.

Khi gặp các trang động, Shadow DOM hoặc nội dung do CMS tạo ra, Beautiful Soup không thể lấy được DOM hoàn chỉnh. Tại thời điểm này, trước tiên bạn nên sử dụng trình duyệt không có đầu để xử lý trước hoặc trực tiếp xem lại mã nguồn gốc theo cách thủ công.

Sử dụng danh sách kiểm tra này để dịch tài liệu

Văn bản, liên kết, mã và cấu trúc của tài liệu trang web phải được xử lý riêng. Thêm các phần được bảo vệ vào danh sách chấp nhận, sau đó đánh giá khả năng đọc và trình bày trang sau khi dịch.

OmniDoc (cổng thông tin sản phẩm) cung cấp cổng dịch thuật tài liệu đa định dạng và trang web chính thức giới thiệu các chức năng so sánh OCR, bảng thuật ngữ và song ngữ. Đối với các nhóm muốn làm việc trực tiếp từ các tệp, đây là con đường đáng để đánh giá bằng các mẫu thực tế.

Vui lòng sử dụng các tệp đã được giải mẫn cảm mà bạn có quyền tải lên và sử dụng các mục kiểm tra trong bài viết này để xem lại kết quả. Ở đây không có tuyên bố nào rằng OmniDoc sử dụng các thư viện nguồn mở hoặc thuật toán nội bộ trong bài viết này và ví dụ này cũng không thay thế việc kiểm tra hiệu suất sản phẩm.

🎯 Phương pháp nào phù hợp với bạn?

Nếu bạn cần sàng lọc nhanh HTML tĩnh

Trực tiếp chạy tập lệnh xác minh, ghi lại các loại sự cố được tìm thấy và sau đó xác nhận từng mục theo cách thủ công.

Nếu trang của bạn được hiển thị động bởi JS

Trước tiên, hãy sử dụng trình duyệt không có đầu để lấy DOM được hiển thị, sau đó thực hiện xác minh cấu trúc; nếu không lấy được thì xem lại mã nguồn theo cách thủ công.

Nếu trang của bạn có nhiều div giả tiêu đề

Đầu tiên hãy xác nhận xem những yếu tố này có phải là tiêu đề hay không. Nếu đó là mẫu cũ, hãy xem xét chuyển đổi hàng loạt và đánh dấu riêng biệt trong quá trình chấp nhận.

❓ Câu hỏi thường gặp (FAQ)

1. Nếu thẻ tồn tại, điều đó có nghĩa là cấu trúc tiêu đề đúng?

KHÔNG. Sự tồn tại của thẻ chỉ có nghĩa là "ở đây có tiêu đề". Liệu các tiêu đề có tạo thành một cây lồng nhau hợp pháp hay không cần phải được xác minh riêng.

2. Tại sao chúng ta không thể chỉ dựa vào kết quả hiển thị của trình duyệt để xác định cấp độ tiêu đề?

CSS có thể ghi đè các thẻ ngữ nghĩa, làm cho hệ thống phân cấp trực quan không nhất quán với hệ thống phân cấp ngữ nghĩa. Beautiful Soup tự phân tích cây DOM mà không bị CSS can thiệp.

3. Có cần phải sửa tất cả các vấn đề do tập lệnh phát hiện không?

không chắc chắn. Việc bỏ qua và nhiều H1 yêu cầu xác nhận thủ công vì chúng có thể là lỗi văn thư hoặc thiết kế hợp pháp.

4. Kịch bản có kiểm tra được chất lượng nội dung tiêu đề không?

không thể. Nội dung tiêu đề trống hoặc ký hiệu thuần túy là vấn đề về chất lượng nội dung và cần được xem xét thủ công.

📝 Tóm tắt

Các vấn đề về cấp độ tiêu đề thường bị ẩn giữa các thẻ và kiểu hình ảnh. Đầu tiên hãy sử dụng các tập lệnh để sàng lọc cơ học, sau đó đánh giá ngữ nghĩa theo cách thủ công. Sự kết hợp của cả hai có tác dụng ổn định hơn. Mã đã được kiểm tra bằng các ví dụ trong môi trường biệt lập, nhưng điều này không đảm bảo cho tất cả các tệp thực hoặc hiệu suất sản phẩm. Trước khi xử lý các tài liệu quan trọng, vui lòng giữ lại bản gốc và xem xét theo ranh giới và mục chấp nhận của bài viết này.

Bước tiếp theo: Chọn tài liệu HTML bạn đang làm việc, chạy tập lệnh xác thực ở trên và ghi lại các loại vấn đề được tìm thấy. Nếu có các tiêu đề không được gắn thẻ hoặc lồng ghép phức tạp, hãy mở rộng tập lệnh để hỗ trợ phân tích vùng chứa chính hoặc chuyển trực tiếp sang quy trình xem xét thủ công. Tham khảo: Tài liệu về món súp đẹp

Thử ngay: Tải tài liệu lên để bắt đầu dịch, giữ nguyên bố cục ban đầu