Công cụ Tạo Danh sách HTML

Từ một loạt dòng văn bản thành đánh dấu thực sự

Danh sách có ở khắp nơi trên web: menu điều hướng, các gạch đầu dòng nêu tính năng, hướng dẫn từng bước, danh sách nguyên liệu và mục lục. Gõ thẻ cho chúng bằng tay vừa tẻ nhạt vừa dễ sai, vì mỗi mục cần phần tử li riêng được lồng bên trong một thẻ bao ul hoặc ol duy nhất, và rất dễ quên một thẻ đóng ở lưng chừng một danh sách dài. Trình tạo này loại bỏ sự phiền toái đó: bạn dán mỗi mục trên một dòng và nó dựng cho bạn cấu trúc đầy đủ, được lồng đúng cách.

Mô hình tư duy là một dòng bằng một mục danh sách. Bất cứ thứ gì bạn gõ trên một dòng đều trở thành phần văn bản của một thẻ li, và công cụ bọc toàn bộ tập hợp trong phần tử bao mà bạn chọn. Hãy sắp xếp lại hoặc chỉnh sửa các dòng rồi tạo lại, và đoạn đánh dấu sẽ thay đổi theo ngay lập tức.

Có thứ tự so với không thứ tự: chọn đúng phần tử

Lựa chọn giữa ul và ol không phải chuyện thẩm mỹ, mà là chuyện ngữ nghĩa. Một danh sách không thứ tự (ul) hiển thị với dấu đầu dòng và báo hiệu rằng trình tự các mục không quan trọng, như một tập hợp các tính năng sản phẩm. Một danh sách có thứ tự (ol) hiển thị với các con số và báo hiệu rằng thứ tự là có ý nghĩa, như các bước trong một công thức nấu ăn hoặc một danh sách được xếp hạng. Trình đọc màn hình đọc chúng theo những cách khác nhau, nên chọn đúng loại là một quyết định về khả năng tiếp cận, chứ không chỉ là chuyện trực quan.

Một phép thử hữu ích: nếu bạn có thể xáo trộn các mục mà không làm thay đổi ý nghĩa, hãy dùng danh sách không thứ tự; nếu xáo trộn chúng sẽ khiến nội dung trở nên sai, hãy dùng danh sách có thứ tự. Hãy chọn ol mỗi khi trình tự, thứ hạng hay các tham chiếu được đánh số mang thông tin.

Một ví dụ cụ thể

Gõ ba dòng, Apple, Banana và Cherry, chọn Danh sách Không Thứ tự, và công cụ tạo ra một phần tử ul chứa ba phần tử li, mỗi trái cây một phần tử, được thụt lề và đóng đúng cách. Chuyển sang Danh sách Có Thứ tự và cùng ba dòng đó trở thành một ol, mà trình duyệt hiển thị thành 1. Apple, 2. Banana, 3. Cherry. Không một thẻ nào bị bỏ ngỏ, và phần thụt lề khiến cấu trúc dễ đọc và dễ bảo trì.

Danh sách đánh số bắt đầu từ nơi bạn muốn

Danh sách có thứ tự không nhất thiết phải bắt đầu từ 1. Dùng ô Số Bắt đầu trong Tùy chọn Nâng cao sẽ ghi một thuộc tính start lên thẻ ol, nên bạn có thể tiếp nối một chuỗi đánh số bị gián đoạn bởi nội dung khác, hoặc bắt tiếp từ nơi một danh sách trước đó dừng lại. Ví dụ, đặt số bắt đầu là 5 sẽ khiến mục đầu tiên hiển thị thành 5, mục kế tiếp thành 6, và cứ thế. Đây là cách kiểm soát việc đánh số gọn gàng, dựa trên chuẩn, thay vì làm giả bằng cách gõ các con số vào phần văn bản của mục, vốn sẽ hỏng nếu danh sách có khi nào cần được sắp xếp lại.

Thêm ID và class để tạo kiểu

Tùy chọn Nâng cao cho bạn ba điểm móc nối cho CSS và JavaScript. ID Danh sách đặt một id duy nhất lên thẻ ul hoặc ol, lý tưởng cho một phần tử đơn lẻ mà bạn muốn nhắm đến chính xác hoặc liên kết tới bằng một mỏ neo. Class Danh sách áp một lớp lên phần tử bao để nó kế thừa các kiểu chung, chẳng hạn một bố cục điều hướng nằm ngang hay một thiết kế dấu đầu dòng tùy chỉnh. Class Mục áp một lớp lên mọi thẻ li, vốn hoàn hảo khi mỗi mục cần cùng một cách xử lý, như khoảng cách nhất quán hoặc một biểu tượng.

Vì các lớp và id rơi thẳng vào trong những thẻ được tạo ra, đoạn đánh dấu sẵn sàng khớp với một bảng định kiểu hiện có ngay khoảnh khắc bạn dán nó vào, không cần phải tìm-và-thay-thế gì sau đó.

Vì sao các dòng trống bị bỏ qua

Nếu bạn vô tình để một dòng trống giữa các mục, hoặc mã nguồn bạn dán có những dòng trống ở cuối, trình tạo sẽ bỏ qua chúng thay vì tạo ra một thẻ li rỗng. Điều này là có chủ đích: những mục danh sách rỗng lạc lõng sẽ hiển thị thành các dấu đầu dòng trống hoặc các con số bị bỏ qua và làm rối trang. Quy tắc là chỉ những dòng có nội dung thực sự, không phải khoảng trắng, mới trở thành mục danh sách, nên bạn có thể dán văn bản được định dạng lỏng lẻo mà không cần dọn dẹp trước.

Vì sao danh sách có ngữ nghĩa quan trọng với SEO và khả năng tiếp cận

Dùng đánh dấu danh sách thực sự thay vì các đoạn văn ngăn cách bởi gạch ngang hay dấu xuống dòng đem lại lợi ích vượt ra ngoài hình thức. Các công cụ tìm kiếm phân tích cấu trúc ul và ol để hiểu nội dung được nhóm lại, và các danh sách đúng đắn có đủ điều kiện xuất hiện trong những tính năng như kết quả phong phú cho nội dung từng-bước và hướng-dẫn. Công nghệ trợ giúp cũng hưởng lợi: một trình đọc màn hình thông báo một danh sách chứa bao nhiêu mục và cho người dùng điều hướng từng mục một, điều bất khả thi khi các dấu đầu dòng được làm giả bằng các ký tự văn bản.

Nói ngắn gọn, danh sách có ngữ nghĩa truyền đạt cấu trúc cho máy móc cũng như cho con người. Bỏ ra một chút để tạo đúng đánh dấu ul hoặc ol khiến nội dung của bạn dễ tiếp cận hơn, dễ thu thập dữ liệu hơn và dễ bảo trì hơn so với một bản mô phỏng được định dạng bằng tay.