Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Tiêu đề không phải là văn bản in đậm lớn: Tại sao cấp độ tiêu đề lại quan trọng trong nội dung web
· Tại sao nó quan trọng
html khả năng tiếp cận text-editing
Giải thích lý do tại sao h1 đến h6 tạo thành dàn bài tài liệu mà người dùng trình đọc màn hình và công cụ tìm kiếm dựa vào cũng như cách kiểm tra xem các tiêu đề trực quan có phải là tiêu đề thực hay không.
Bài viết không có tiêu đề - mở đầu bằng một trang trong đó mỗi tiêu đề rõ ràng là một đoạn văn đậm
Một dòng được phóng to và in đậm bởi CSS có thể trông giống như một tiêu đề phần trong khi vẫn giữ nguyên một đoạn trong cây tài liệu. Người đọc sáng mắt có thể suy ra sự phân chia từ kiểu chữ, nhưng phần mềm không nhận được phần tử tiêu đề để xác định, thu thập hoặc điều hướng. Ngoại hình thôi không tạo nên thứ bậc.
ToolAcre tránh các điều khiển kiểu và cung cấp các lựa chọn khối rõ ràng cho h1 đến h4. Do đó, người viết có thể mã hóa tiêu đề thay vì mô phỏng tiêu đề bằng văn bản mạnh. Danh sách cho phép cũng chấp nhận h5 và h6 trong nguồn, mặc dù thanh công cụ không quảng cáo các biện pháp kiểm soát cho các cấp độ đó.
Tác dụng của phần tử tiêu đề ngoài kích thước — giải thích đường viền, lối tắt điều hướng và cấu trúc mà nó cung cấp
Phần tử tiêu đề gắn nhãn cho nội dung theo sau và đóng góp vào cấu trúc tài liệu có thể điều hướng được. Các trình duyệt thể hiện vai trò đó thông qua các API trợ năng và nhiều công cụ hỗ trợ có thể trình bày danh sách các tiêu đề hoặc di chuyển giữa chúng. Phần tử vẫn có thể nhận dạng được khi biểu định kiểu không có hoặc được thay thế.
Một đoạn in đậm không cung cấp tín hiệu cấu trúc nào. Nó vẫn có thể là văn xuôi hữu ích, nhưng nó không nên dùng làm ranh giới cho phần. Kiểm tra tài liệu cuối cùng bằng dàn ý hoặc công cụ kiểm tra khả năng truy cập vì bản xem trước cục bộ không báo cáo mối quan hệ tiêu đề hoặc xác thực tổ chức của tác giả.
Các cấp độ được lồng vào nhau chứ không phải kích thước - giải thích lý do tại sao việc bỏ qua từ h2 đến h4 khiến người đọc và công cụ bối rối
Các cấp độ thể hiện sự lồng nhau, không phải là một menu có kích thước loại. H2 thường giới thiệu một phần bên dưới ngữ cảnh chính của trang; h3 giới thiệu một tiểu mục của h2 đó. Việc chọn h4 đơn giản vì phông chữ mặc định của nó trông phù hợp có thể hàm ý thiếu cấu trúc trung gian.
ToolAcre sẽ duy trì h1 đến h6 và không từ chối các mức bị bỏ qua. Bộ lọc thực thi từ vựng chứ không phải logic biên tập. Xây dựng dàn ý trên giấy hoặc trong nguồn, sau đó sử dụng CSS ở đích để kiểm soát hình thức mà không thay đổi cấp độ nhằm đạt được tỷ lệ hình ảnh ưa thích.
Chọn tiêu đề trang trong ngữ cảnh; trình soạn thảo này không thực thi quy tắc một h1
Sách bài tập quy định một h1, nhưng việc thực hiện không có quy tắc nào như vậy và bài viết này không phát minh ra quy tắc đó như một quy luật phổ quát. Các mẫu trang, các đoạn được nhúng và quy ước tài liệu xác định xem nội dung sẽ cung cấp tiêu đề chính hay bắt đầu bên dưới tiêu đề do máy chủ cung cấp.
Kiểm tra đích đến hoàn chỉnh chứ không phải chỉ một mảnh. Nếu CMS đã hiển thị tiêu đề bài viết dưới dạng h1 thì nội dung được dán có thể bắt đầu bằng h2. ToolAcre không thể thấy mẫu bên ngoài đó, vì vậy tùy chọn h1 của nó là một khả năng chứ không phải là đề xuất cho mọi bản nháp.
Ví dụ hoạt động: so sánh đoạn in đậm với thành phần tiêu đề trong nguồn
Tạo `<p><strong>Installation</strong></p>` và `<h2>Configuration</h2>`. Cả hai đều có thể trông nổi bật trong hộp cát, tuy nhiên nguồn tiết lộ rằng chỉ Cấu hình là tiêu đề. Tương tự, việc kiểm tra cây trợ năng trên trang đã xuất bản sẽ chỉ xác định h2 làm tiêu đề.
Thay đổi Cài đặt về mức chính xác thông qua bộ chọn khối hoặc chế độ nguồn. Sau đó xem xét xem hai tiêu đề đó là ngang hàng hay cha mẹ và con cái. Chất khử trùng bảo tồn cả hai hình thức nhưng không thể quyết định mối quan hệ từ lời nói của họ. Phán quyết đó thuộc về tác giả tài liệu và bối cảnh trang.
Tạo kiểu cho tiêu đề mà không lạm dụng cấp độ — giải thích rằng CSS, chứ không phải lựa chọn cấp độ, sẽ kiểm soát hình thức
Giao diện tiêu đề thuộc về CSS. Một trang web có thể làm cho h2 trở nên khiêm tốn và h3 trở nên khác biệt về mặt hình ảnh trong khi vẫn giữ được mức độ hợp lý, miễn là thiết kế vẫn truyền đạt được thứ bậc. Tạo kiểu h2 chính xác sẽ an toàn hơn việc thay thế h4 chỉ để có mặc định trình duyệt nhỏ hơn.
Biểu định kiểu của bản xem trước có chủ ý đơn giản và nhẹ nhàng. Đây không phải là chủ đề sản phẩm của bạn nên kích thước tiêu đề mặc định của nó là bằng chứng không tốt cho thiết kế đích đến. Sao chép đoạn ngữ nghĩa, áp dụng các kiểu đã được phê duyệt ở đó và xem xét hành vi phản hồi mà không cần viết lại dàn ý để đáp ứng một chế độ xem riêng biệt.
Điều này không bao gồm những gì — các phần tử phân chia như <section> và <article> hoặc SEO ngoài cấu trúc
Bài viết này không bao gồm các phần và thành phần bài viết, ARIA vai trò tiêu đề, hướng dẫn hoàn chỉnh SEO hoặc mọi trình đọc màn hình. Nó cũng không xác nhận ToolAcre xác thực các cấp độ bị bỏ qua, tiêu đề trùng lặp hoặc chất lượng văn bản tiêu đề. Thanh công cụ cung cấp các phần tử; tác giả cung cấp một cấu trúc mạch lạc.
Đầu ra được khử trùng không tự động được xuất bản an toàn và không đáng tin cậy. Hộp cát xem trước giới hạn việc thực thi bên trong ToolAcre, trong khi đánh dấu được sao chép sẽ để lại sự bảo vệ đó. Sử dụng các bài kiểm tra khả năng tiếp cận và vệ sinh tại điểm đến. Cây tiêu đề chính xác là một khía cạnh chất lượng, không phải là kiểm soát bảo mật hoặc kiểm tra hoàn chỉnh.
Bài học rút ra: cấu trúc trước, kiểu thứ hai — tóm tắt quy tắc và cách trình soạn thảo HTML WYSIWYG của ToolAcre cho phép bạn xác nhận xem đánh dấu đằng sau tiêu đề trực quan có phải là thành phần tiêu đề hay không
Cấu trúc đầu tiên, phong cách thứ hai. Quyết định chủ đề nào là các phần và phần phụ, chỉ định các cấp độ từ mối quan hệ đó, sau đó kiểm tra các phần tử h thực tế mà ToolAcre phát ra. Tiêu đề vẫn có ý nghĩa khi phông chữ, màu sắc và khoảng cách biến mất.
Cuối cùng, đặt đoạn bên trong mẫu thực của nó và xem lại hệ thống phân cấp kết hợp. Trình chỉnh sửa cục bộ không thể biết tiêu đề trang bên ngoài hoặc trình bao điều hướng. Giá trị của nó là tính minh bạch: định dạng trực quan và nguồn nằm cạnh nhau, giúp phát hiện các tiêu đề giả mạo dễ dàng hơn trước khi xuất bản.