Kiến thức cơ bản về văn bản

Tương tự như cách trình soạn thảo văn bản cung cấp tiêu đề <h1> đến <h6>, cùng với vô số cách định dạng các phần văn bản theo những cách có ý nghĩa và trực quan, HTML cung cấp một tập hợp các phần tử ngữ nghĩa và không ngữ nghĩa rất giống nhau để tạo ý nghĩa cho văn xuôi.

Phần này trình bày những cách chính để đánh dấu văn bản hoặc những kiến thức cơ bản về văn bản. Sau đó, chúng ta sẽ thảo luận về các thuộc tính, trước khi khám phá những cách đánh dấu văn bản khác, chẳng hạn như danh sách, bảng và biểu mẫu.

Tiêu đề (xem lại)

Có 6 phần tử tiêu đề của phần, <h1>, <h2>, <h3>, <h4>, <h5> và <h6>, trong đó <h1> là quan trọng nhất và <h6> là ít quan trọng nhất. Trong nhiều năm, các nhà phát triển được cho biết rằng trình duyệt dùng tiêu đề để phác thảo tài liệu. Đó vốn là một mục tiêu, nhưng các trình duyệt chưa bao giờ triển khai các tính năng phác thảo tài liệu và thuật toán phác thảo được đề xuất đã chính thức bị xoá khỏi quy cách HTML. Tuy nhiên, người dùng trình đọc màn hình chủ yếu dựa vào tiêu đề như một chiến lược khám phá để tìm hiểu về nội dung của một trang, điều hướng qua các tiêu đề bằng phím h. Việc đảm bảo rằng các cấp tiêu đề được triển khai một cách hợp lý (như cách bạn vạch ra một tài liệu) giúp nội dung của bạn dễ tiếp cận và đây là điều bạn nên làm.

Theo mặc định, các trình duyệt sẽ tạo kiểu <h1> lớn nhất, <h2> nhỏ hơn một chút, với mỗi cấp tiêu đề tiếp theo nhỏ hơn theo mặc định. Trước đây, biểu định kiểu tác nhân người dùng cũng giảm kích thước phông chữ của các phần tử <h1> được lồng bên trong các phần tử phân đoạn như <article>, <aside>, <nav> hoặc <section>.

Một số biểu định kiểu tác nhân người dùng bao gồm các bộ chọn sau (hoặc tương tự) để tạo kiểu cho các phần tử <h1> lồng nhau như thể chúng là các cấp tiêu đề thấp hơn:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Tuy nhiên, Mô hình đối tượng hỗ trợ tiếp cận (AOM) và trình đọc màn hình không bao giờ sửa đổi cấp độ tiêu đề dựa trên việc lồng ghép; một <h1> được lồng ghép luôn được báo cáo là "tiêu đề, cấp độ 1". Điều này tạo ra sự không nhất quán khi các tiêu đề lồng nhau xuất hiện nhỏ hơn về mặt thị giác trong khi vẫn là tiêu đề cấp cao nhất đối với các công nghệ hỗ trợ.

Vì quy cách HTML đã xoá thuật toán phác thảo tài liệu, nên các trình duyệt đã xoá những quy tắc cũ này trong biểu định kiểu của tác nhân người dùng. Do đó, các phần tử <h1> lồng nhau sẽ giữ lại kích thước phông chữ <h1> tiêu chuẩn thay vì tự động thu nhỏ.

Đừng dựa vào việc lồng các phần tử <h1> bên trong các phần tử phân đoạn để tạo kiểu trực quan hoặc phân cấp cấu trúc. Luôn đánh dấu nội dung bằng cách sử dụng các phần tử tiêu đề tuần tự (<h1> đến <h6>) dựa trên cấu trúc tài liệu. Việc này giúp đảm bảo nội dung của bạn rõ ràng và dễ tiếp cận đối với các công cụ tìm kiếm, trình đọc màn hình và người duy trì trong tương lai.

Ngoài tiêu đề, hầu hết văn bản có cấu trúc đều được tạo thành từ một loạt đoạn văn. Trong HTML, các đoạn văn được đánh dấu bằng thẻ <p>; thẻ đóng là không bắt buộc nhưng bạn nên dùng.

Phần #gioithieu có một tiêu đề và một vài đoạn văn:

Phần này không phải là một điểm mốc vì không có tên thành phần hỗ trợ tiếp cận. Để chuyển đổi thành region (vai trò điểm mốc), bạn có thể dùng aria-labelledby để cung cấp tên thành phần hỗ trợ tiếp cận:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Chỉ tạo điểm đánh dấu nếu và khi thích hợp. Việc có quá nhiều điểm đánh dấu có thể nhanh chóng khiến người dùng trình đọc màn hình bị mất phương hướng.

Câu trích dẫn và thông tin trích dẫn

Khi đánh dấu một bài viết hoặc bài đăng trên blog, bạn có thể muốn thêm một câu trích dẫn hoặc trích dẫn nổi, có hoặc không có chú thích hiển thị. Có các phần tử cho 3 thành phần này: <blockquote>, <q> và <cite> cho một trích dẫn có thể nhìn thấy, hoặc thuộc tính cite để cung cấp thêm thông tin cho hoạt động tìm kiếm.

Phần #feedback có một tiêu đề và 3 bài đánh giá; đây là những trích dẫn dạng khối, một số bài có chứa trích dẫn, theo sau là một đoạn văn có chứa thông tin trích dẫn của câu trích dẫn đó. Bỏ qua bài đánh giá thứ ba để tiết kiệm dung lượng, mã đánh dấu sẽ là:

Thông tin về tác giả của câu trích dẫn hoặc thông tin trích dẫn không thuộc câu trích dẫn và do đó không nằm trong <blockquote>, mà nằm sau câu trích dẫn. Mặc dù đây là những trích dẫn theo nghĩa thông thường của thuật ngữ này, nhưng chúng không thực sự trích dẫn một tài nguyên cụ thể, vì vậy, chúng được đóng gói trong một phần tử đoạn văn <p>.

Thông tin trích dẫn xuất hiện trên 3 dòng, bao gồm tên tác giả, vai trò trước đây và nguyện vọng nghề nghiệp. Dấu ngắt dòng <br> sẽ tạo một dấu ngắt dòng trong một khối văn bản. Bạn có thể dùng dấu này trong địa chỉ thực tế, trong thơ và trong khối chữ ký. Bạn không nên dùng dấu ngắt dòng làm dấu xuống dòng để phân tách các đoạn văn. Thay vào đó, hãy đóng đoạn văn trước và mở một đoạn văn mới. Việc sử dụng đoạn văn bản cho các đoạn văn không chỉ tốt cho khả năng hỗ trợ tiếp cận mà còn cho phép tạo kiểu. Phần tử <br> chỉ là một dấu ngắt dòng; phần tử này chịu ảnh hưởng của rất ít thuộc tính CSS.

Mặc dù chúng tôi cung cấp thông tin trích dẫn trong một đoạn văn sau mỗi đoạn trích dẫn, nhưng những câu trích dẫn xuất hiện trước đó được mã hoá theo cách này vì chúng không đến từ nguồn bên ngoài. Nếu có, bạn có thể (nên?) trích dẫn nguồn.

Nếu bài đánh giá được lấy từ một trang web đánh giá, sách hoặc tác phẩm khác, bạn có thể dùng phần tử <cite> cho tiêu đề của một nguồn. Nội dung của <cite> có thể là tên của một cuốn sách, tên của một trang web hoặc chương trình truyền hình, hoặc thậm chí là tên của một chương trình máy tính. Bạn có thể sử dụng tính năng đóng gói <cite> cho dù nguồn được đề cập thoáng qua hay được trích dẫn hoặc tham chiếu. Nội dung của <cite> là tác phẩm, không phải tác giả.

Nếu trích dẫn của Blendan Smooth được lấy từ tạp chí ngoại tuyến của cô ấy, bạn sẽ viết trích dẫn khối như sau:

Phần tử trích dẫn <cite> không có vai trò ngầm ẩn và phải lấy tên thành phần hỗ trợ tiếp cận từ nội dung của phần tử đó; không thêm aria-label.

Để ghi nhận nguồn khi bạn không thể hiển thị nội dung, bạn có thể dùng thuộc tính cite. Thuộc tính này lấy giá trị là URL của tài liệu hoặc thông báo nguồn cho thông tin được trích dẫn. Thuộc tính này có hiệu lực trên cả <q> và <blockquote>. Mặc dù là một URL, nhưng mã này có thể đọc được bằng máy nhưng không hiển thị cho người đọc:

Mặc dù thẻ đóng </p> là không bắt buộc (và luôn được khuyến nghị), nhưng thẻ đóng </blockquote> luôn là thẻ bắt buộc.

Hầu hết các trình duyệt đều thêm khoảng đệm vào cả hướng nội tuyến <blockquote> và in nghiêng nội dung <cite>; bạn có thể kiểm soát điều này bằng CSS. <blockquote> không thêm dấu ngoặc kép, nhưng bạn có thể thêm dấu ngoặc kép bằng nội dung do CSS tạo. Theo mặc định, phần tử <q> sẽ thêm dấu ngoặc kép bằng cách sử dụng dấu ngoặc kép phù hợp với ngôn ngữ.

Trong phần #teachers, HAL được trích dẫn là nói: "Tôi rất tiếc , nhưng tôi e rằng tôi không thể làm điều đó." Mã cho câu nói đó bằng tiếng Anh và tiếng Pháp là:

Phần tử trích dẫn nội dòng <q> sẽ thêm dấu ngoặc kép phù hợp với ngôn ngữ. Các kiểu mặc định của tác nhân người dùng bao gồm nội dung được tạo từ dấu ngoặc kép mở và dấu ngoặc kép đóng:

q::before {content: open-quote;}
q::after {content: close-quote;}

Thuộc tính lang được thêm vào để cho trình duyệt biết rằng mặc dù ngôn ngữ cơ sở của trang được xác định là tiếng Anh trong thẻ mở <html lang="en-US">, nhưng đoạn văn bản này lại bằng một ngôn ngữ khác. Điều này giúp các chế độ điều khiển bằng giọng nói như Siri, Alexa và VoiceOver sử dụng cách phát âm tiếng Pháp. Thuộc tính này cũng cho trình duyệt biết loại dấu ngoặc kép cần hiển thị.

Giống như <blockquote>, phần tử <q> hỗ trợ thuộc tính cite.

Thực thể HTML

Có thể bạn đã nhận thấy chuỗi thoát hoặc "thực thể". Vì < được dùng trong HTML, nên bạn phải thoát ký tự này bằng cách dùng < hoặc một phương thức mã hoá khó nhớ hơn là <. Có 4 thực thể dành riêng trong HTML: <, >, & và ". Các tham chiếu ký tự của họ lần lượt là <, >, & và ".

Một số thực thể khác mà bạn sẽ thường xuyên sử dụng là © cho bản quyền (©), ™ cho nhãn hiệu (™) và   cho khoảng trắng không ngắt dòng. Khoảng trắng không ngắt dòng rất hữu ích khi bạn muốn thêm khoảng trắng giữa hai ký tự hoặc từ mà không muốn dòng bị ngắt tại đó. Có hơn 2.000 tham chiếu ký tự được đặt tên. Tuy nhiên, nếu cần, mọi ký tự, kể cả biểu tượng cảm xúc, đều có một ký tự tương đương được mã hoá bắt đầu bằng &#.

Nếu bạn xem bài đánh giá xưởng của ToastyMcToastface (không có trong mẫu mã ở trên), bạn sẽ thấy một số ký tự văn bản bất thường:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

Bạn cũng có thể viết câu cuối cùng trong khối trích dẫn này như sau:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

Có một số ký tự chưa được thoát và một số tham chiếu ký tự có tên trong mớ mã này. Vì bộ ký tự là UTF-8, nên bạn không cần phải thoát vài ký tự cuối cùng trong khối trích dẫn, như trong ví dụ này. Bạn chỉ cần thoát các ký tự không được bộ ký tự hỗ trợ. Nếu cần, bạn có thể dùng nhiều công cụ để cho phép thoát nhiều ký tự hoặc bạn chỉ cần đảm bảo rằng bạn thêm <meta charset="UTF-8"> vào <head>.

Ngay cả khi chỉ định bộ ký tự là UTF-8, bạn vẫn phải thoát < khi muốn in ký tự đó ra màn hình. Thông thường, bạn không cần thêm các tham chiếu ký tự có tên cho >, " hoặc &; nhưng nếu muốn viết một hướng dẫn về thực thể HTML, bạn cần viết < khi dạy ai đó cách mã hoá <. 😀

À, biểu tượng cảm xúc mặt cười đó là 😀, nhưng tài liệu này được khai báo là UTF-8 nên không được thoát.

Kiểm tra kiến thức của bạn

Kiểm tra kiến thức của bạn về văn bản trong HTML.