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

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

Phần này trình bày các cách chính để đánh dấu văn bản hoặc thông tin 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 tìm hiểu các 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 đề phần, <h1>, <h2>, <h3>, <h4>, <h5> và <h6>, trong đó <h1> là quan trọng nhất và ít nhất <h6>. Trong nhiều năm, các nhà phát triển nhận được thông báo rằng các trình duyệt đã dùng tiêu đề để soạn thảo tài liệu. Ban đầu, đó là mục tiêu, nhưng các trình duyệt chưa triển khai các tính năng nêu rõ. Tuy nhiên, người dùng trình đọc màn hình vẫn sử dụng tiêu đề làm chiến lược khám phá để tìm hiểu về nội dung của trang, di chuyển qua các tiêu đề bằng phím h. Vì vậy, việc đảm bảo rằng các cấp độ tiêu đề được triển khai giống như khi bạn phác thảo một tài liệu sẽ giúp mọi người dễ dàng tiếp cận nội dung của bạn và chúng tôi khuyến khích bạn rất nhiều.

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

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 ở một cấp ít quan trọng hơn:

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ẫn báo cáo chính xác cấp độ của phần tử; trong trường hợp này là "tiêu đề, cấp 1". Xin lưu ý rằng trình duyệt không thực hiện việc này cho các cấp tiêu đề khác. Tuy nhiên, bạn không nên sử dụng kiểu trình duyệt dựa trên cấp tiêu đề. Mặc dù trình duyệt không hỗ trợ tính năng vẽ đường viền, nhưng hãy giả vờ như vậy; hãy đánh dấu tiêu đề nội dung như thể bạn sẽ thấy. Điều đó sẽ giúp công cụ tìm kiếm, trình đọc màn hình và những người bảo trì sau này (có thể bạn cũng hiểu được như vậy).

Ngoài tiêu đề, hầu hết văn bản có cấu trúc bao gồm 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 luôn nên dùng.

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

Phần này không phải là một mốc vì không có tên thành phần hỗ trợ tiếp cận. Để chuyển giá trị này thành region (một vai trò mang tính mốc), bạn có thể sử 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 mốc nếu và khi thích hợp. Việc có quá nhiều điểm mốc có thể nhanh chóng khiến người dùng trình đọc màn hình mất phương hướng.

Trích dẫn và 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 bao gồm một trích dẫn hoặc trích dẫn, có hoặc không có trích dẫn hiển thị. Có các phần tử cho 3 thành phần này: <blockquote>, <q> và <cite> để trích dẫn dễ thấy, hoặc thuộc tính cite để cung cấp thêm thông tin cho tìm kiếm.

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

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

Nội dung 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 trong công việc. Dấu ngắt dòng <br> tạo ra một dấu ngắt dòng trong một khối văn bản. Các văn bản này có thể được sử dụng trong các địa chỉ thực tế, trong thơ ca và trong các khối chữ ký. Bạn không nên dùng dấu ngắt dòng làm dấu đầu dòng cho các đoạn riêng biệt. Thay vào đó, hãy đóng đoạn trước và mở đoạn mới. Việc sử dụng đoạn văn cho đoạn văn bản không chỉ giúp tăng khả năng tiếp cận mà còn giúp tạo kiểu. Phần tử <br> chỉ là 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 theo sau mỗi khối trích dẫn, nhưng các trích dẫn hiển thị 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ó, nguồn có thể (nên?) được trích dẫ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, thì bạn có thể sử dụng phần tử <cite> cho tiêu đề của nguồn. Nội dung của <cite> có thể là tên 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 việc đóng gói <cite> cho dù nguồn đang được đề cập khi truyền hay nếu nguồn đang được trích dẫn hay tham chiếu. Nội dung của <cite> là tác phẩm, không phải tác giả.

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

Phần tử trích dẫn <cite> không có vai trò ngầm ẩn và phải nhận tên thành phần có thể truy cập được từ nội dung của nó; không bao gồm aria-label.

Để cung cấp giá trị đóng góp đúng hạ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ị URL của tài liệu nguồn hoặc tin nhắ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à URL, máy vẫn có thể đọc được nhưng người đọc không thấy được:

Mặc dù thẻ đóng </p> là không bắt buộc (và luôn được đề xuất), nhưng thẻ đóng </blockquote> luôn là 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 cùng dòng <blockquote> và in nghiêng nội dung <cite>. Bạn có thể kiểm soát việc 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> có 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à: "Tôi rất tiếc , nhưng tôi e rằng tôi không thể làm điều đó." Mã của nội dung đó (bằng tiếng Anh và tiếng Pháp) là:

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

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

Thuộc tính lang được thêm vào để thông báo cho trình duyệt biết rằng mặc dù ngôn ngữ cơ sở của trang được định nghĩa là tiếng Anh trong thẻ mở <html lang="en-US">, nhưng đoạn văn bản này lại là một ngôn ngữ khác. Điều này giúp các tính năng đ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. Cookie 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

Bạn có thể đã nhận thấy chuỗi thoát hoặc "thực thể". Vì < được sử dụng trong HTML nên bạn phải thoát mã này bằng < hoặc phương thức mã hoá ít dễ nhớ <. Có 4 thực thể đã đặt trước trong HTML: <, >, & và ". Giá trị tham chiếu ký tự của chúng lần lượt là <, >, & và ".

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

Nếu bạn xem bài đánh giá hội thảo của ToastyMcToastface (không có trong mã mẫu ở trên), có 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>

Câu cuối cùng trong khung trích dẫn này cũng có thể được viết như:

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

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

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

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

Kiểm tra mức độ hiểu biết của bạn

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