Chúng tôi đã đề cập đến hầu hết, nhưng chắc chắn không phải tất cả, các phần tử HTML. Một khía cạnh mà chúng ta chưa thảo luận là các phần tử văn bản cùng dòng.
Trái ngược với niềm tin phổ biến, ban đầu HTML được dành để chia sẻ tài liệu chứ không phải để chia sẻ video về mèo. Có nhiều phần tử cung cấp ngữ nghĩa văn bản cho tài liệu. Có một mô-đun bao gồm các đường liên kết và phần tử <a>. Phần còn lại của các yếu tố này sẽ được thảo luận ngắn gọn tại đây.
Các đoạn mã ví dụ và văn bản kỹ thuật
Khi ghi lại ví dụ về mã, hãy sử dụng phần tử <code>. Theo mặc định, nội dung văn bản sẽ hiển thị ở phông chữ đơn cách. Khi đưa vào nhiều dòng mã, hãy lồng <code> vào bên trong phần tử <pre> đại diện cho văn bản được định dạng trước.
<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
<code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>
Phần tử <data> liên kết một phần nội dung nhất định với bản dịch mà máy có thể đọc được; thuộc tính value của phần tử này cung cấp bản dịch nội dung của phần tử mà máy có thể đọc được. Nếu nội dung <data> liên quan đến thời gian hoặc ngày, thì bạn phải dùng phần tử <time>, đại diện cho một khoảng thời gian cụ thể.
Phần tử <time> có thể bao gồm thuộc tính datetime để cung cấp ngày giờ mà con người có thể đọc được ở định dạng mà máy có thể đọc được.
Thuộc tính datetime có thể đọc được bằng máy nên cung cấp thông tin hữu ích cho các ứng dụng như lịch và công cụ tìm kiếm.
Khi cung cấp kết quả mẫu từ một chương trình, hãy sử dụng phần tử <samp> để chứa văn bản. Trình duyệt cũng sẽ hiển thị mẫu hoặc kết quả được trích dẫn này ở phông chữ đơn cách.
Khi đưa ra hướng dẫn về hoạt động tương tác với bàn phím, bạn có thể sử dụng phần tử <kbd>. Đại diện cho hoạt động nhập văn bản của người dùng từ bàn phím, phương thức nhập bằng giọng nói hoặc bất kỳ thiết bị nhập văn bản nào khác.
Bạn có thể dùng phần tử <var> cho biểu thức toán học hoặc biến lập trình. Hầu hết các trình duyệt đều hiển thị nội dung văn bản ở phiên bản in nghiêng của phông chữ xung quanh.
Nếu phải viết nhiều phép toán, hãy cân nhắc sử dụng MathML, Ngôn ngữ đánh dấu toán học dựa trên XML để mô tả ký hiệu toán học.
Lũ thừa của 2 trong định lý pythagore sử dụng phần tử chỉ số trên <sup>. Có một phần tử chỉ số dưới <sub> tương tự chỉ định văn bản cùng dòng và chỉ hiển thị dưới dạng chỉ số dưới vì lý do đánh máy. Chỉ số trên và chỉ số dưới là các số, hình, ký hiệu hoặc các chú giải khác nhỏ hơn dòng thông thường của loại và được đặt tương ứng ở phía trên hoặc phía dưới đường kẻ.
Sử dụng <del> để cho biết văn bản đã bị xoá hoặc "đã xoá".
Nếu muốn, hãy thêm cite được đặt thành tài nguyên giải thích sự thay đổi và thuộc tính datetime kèm theo ngày hoặc giờ ở định dạng ngày và giờ mà máy có thể đọc được. Bạn có thể sử dụng phần tử gạch ngang, <s>, để cho biết rằng nội dung không còn phù hợp, nhưng thực sự không bị xoá khỏi tài liệu.
<ins> trái ngược với phần tử <del>; phần tử này dùng để cho biết văn bản đã được thêm hoặc "đã chèn", cũng như bao gồm các thuộc tính cite hoặc datetime (không bắt buộc).
Định nghĩa và hỗ trợ ngôn ngữ
Khi thêm chữ viết tắt hoặc từ viết tắt, hãy luôn cung cấp phiên bản mở rộng đầy đủ của thuật ngữ ở dạng văn bản thuần tuý trong lần sử dụng đầu tiên, khi bạn giới thiệu thuật ngữ rút gọn giữa các thẻ mở và đóng <abbr>; trừ phi người đọc biết đến thuật ngữ đó, chẳng hạn như "HTML" và "CSS" trong bộ sách này. Chỉ trong lần xuất hiện đầu tiên này, khi xác định chữ viết tắt hoặc từ viết tắt, bạn mới cần <abbr>. Thuộc tính title không cần thiết và cũng không hữu ích.
Khi định nghĩa một cụm từ không phải là chữ viết tắt hay từ viết tắt, hãy sử dụng phần tử định nghĩa <dfn> để xác định cụm từ đó đang được định nghĩa trong nội dung xung quanh.
Nếu cụm từ đang được xác định không cùng ngôn ngữ với văn bản xung quanh, hãy nhớ thêm thuộc tính lang để xác định ngôn ngữ đó.
Khi viết các ngôn ngữ theo nhiều hướng, HTML cung cấp phần tử <bdi> để xử lý văn bản hai chiều có thể tách biệt với văn bản xung quanh. Phần tử quốc tế hoá này đặc biệt hữu ích khi nội dung có hướng không xác định được tự động chèn vào trang. Phần tử <bdo> ghi đè hướng văn bản hiện tại, hiển thị văn bản theo một hướng khác. W3C cung cấp giới thiệu về thuật toán hai chiều.
Một số bộ ký tự bao gồm các chú thích nhỏ được đặt ở trên hoặc bên phải ký tự để cung cấp thông tin về cách phát âm. Phần tử <ruby> là vùng chứa cần sử dụng để chứa các chú thích này giúp các ngôn ngữ viết như tiếng Hàn, tiếng Trung và tiếng Nhật dễ đọc hơn. Ruby cũng có thể được dùng cho tiếng Do Thái, tiếng Ả Rập và tiếng Việt.
Dấu ngoặc đơn hồng ngọc (<rp>) được đưa vào quy cách để chứa dấu ngoặc đơn mở và đóng cho các trình duyệt không hỗ trợ hiển thị <ruby>. Khi các trình duyệt hỗ trợ <ruby> (điều mà tất cả các trình duyệt không giới hạn thời gian đều hỗ trợ), thì nội dung của mọi phần tử <rp> sẽ không hiển thị. Phần tử văn bản hồng ngọc (<rt>) chứa các chú giải thực tế. Cả hai đều được lồng trong <ruby>.
Lưu ý rằng dấu ngoặc đơn sẽ không hiển thị nếu trình duyệt của bạn hỗ trợ <ruby>.
Văn bản nhấn mạnh
Có một số phần tử có thể dùng để nhấn mạnh văn bản dựa trên lý do ngữ nghĩa để nhấn mạnh văn bản (thay vì vì lý do trình bày, vì đó là công việc của CSS).
- Sử dụng phần tử
<em>để nhấn mạnh hoặc nhấn mạnh một đoạn nội dung. Phần tử<em>có thể được lồng, trong đó mỗi cấp độ lồng nhau biểu thị mức độ nhấn mạnh hơn. Phần tử này có ý nghĩa ngữ nghĩa và có thể được dùng để thông báo cho các tác nhân người dùng thính giác như trình đọc màn hình, Alexa và Siri, nhằm nhấn mạnh. - Sử dụng phần tử
<mark>để xác định hoặc làm nổi bật văn bản có liên quan, chẳng hạn như đánh dấu (hoặc "đánh dấu") việc cụm từ tìm kiếm xuất hiện trong kết quả tìm kiếm. Điều này cho phép xác định nhanh nội dung được đánh dấu mà không cần nhấn mạnh hoặc không thêm mức độ quan trọng. - Phần tử
<strong>xác định văn bản có tầm quan trọng quan trọng. Các trình duyệt thường hiển thị nội dung có độ đậm phông chữ lớn hơn. - Phần tử
<cite>được đề cập trong phần Kiến thức cơ bản về văn bản được dùng để đánh dấu tên sách, bài viết hoặc tác phẩm sáng tạo khác, hoặc siêu dữ liệu trích dẫn hoặc tham chiếu viết tắt cho nội dung đó, chẳng hạn như số ISBN của sách.
Có ba phần tử tạm thời không được dùng nữa, nhưng đã được thêm lại vào HTML. Bạn nên dùng một cách thận trọng, nếu có thể, vì các thành phần này cung cấp ít hoặc không có giá trị ngữ nghĩa và bạn nên luôn sử dụng CSS để định kiểu thay vì các phần tử HTML.
<i>
Bạn có thể sử dụng các phần tử <i> cho các thuật ngữ kỹ thuật, từ nước ngoài (xin nhắc lại, với thuộc tính lang xác định ngôn ngữ), ý tưởng hoặc tên tàu. Phần tử này dùng để phân biệt nội dung cùng dòng với văn bản xung quanh vì một lý do cụ thể, chẳng hạn như văn bản thành ngữ, thuật ngữ kỹ thuật và cách chỉ định phân loại. Bạn không nên sử dụng phần tử này chỉ để in nghiêng văn bản.
MLW sử dụng phần tử <span> cho văn bản lạ ở phần cuối bài đánh giá hội thảo của Toasty McToastface. Phần tử <span> cung cấp một vùng chứa cùng dòng chung không có ngữ nghĩa và không đại diện cho bất cứ thông tin nào. Đây cũng sẽ là cách sử dụng <i> phù hợp.
Kiểu mặc định cho phần tử <i> là kết xuất phần tử ở phông chữ nghiêng. Trong ví dụ này, chúng tôi đặt font-style: normal vì các ký tự được sử dụng không in nghiêng.
<u>
Phần tử <u> dành cho nội dung có chú thích không phải văn bản. Ví dụ: bạn có thể muốn chú thích những từ sai chính tả một cách có chủ ý. Theo mặc định, nội dung được gạch chân, nhưng bạn có thể kiểm soát điều này bằng CSS, chẳng hạn như bằng cách thêm đường gạch chân gợn sóng màu đỏ để bắt chước các chỉ báo lỗi ngữ pháp của trình xử lý văn bản.
<p>I always spell <u>licence</u> wrong</p>
<b>
Bạn có thể sử dụng phần tử <b> để thu hút sự chú ý đến văn bản không quan trọng. Phần tử này không truyền tải bất kỳ thông tin ngữ nghĩa đặc biệt nào và chỉ nên dùng khi không có phần tử nào khác trong phần này phù hợp với mục đích. Không có ví dụ nào được đưa ra vì tôi không thể đưa ra trường hợp sử dụng hợp lệ; đó là phần tử "phương án cuối cùng".
Khoảng trắng
Khi bạn muốn ngắt dòng, chẳng hạn như khi viết thơ hoặc địa chỉ thực tế, phần tử ngắt dòng tự đóng, <br>, sẽ được dùng để thêm trả lại vị trí đầu dòng.
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Để cung cấp dấu phân cách hoặc điểm ngắt chủ đề, giữa các phần của nội dung tiếp xúc, chẳng hạn như giữa các chương trong một cuốn sách hoặc giữa đoạn độc thoại 5.000 từ và công thức mà người dùng đang thực sự tìm kiếm, hãy thêm một phần tử <hr>. HR là chữ viết tắt của "quy tắc ngang". Mặc dù các trình duyệt thường hiển thị một đường ngang, nhưng phần tử này vẫn mang ý nghĩa về mặt ngữ nghĩa. Vai trò mặc định là separator.
HTML cũng có một phần tử cho phép ngắt từ. Phần tử <wbr> tự đóng đưa ra đề xuất cho trình duyệt rằng nếu một từ có thể tràn vùng chứa, thì đây là điểm mà trình duyệt có thể tuỳ ý ngắt dòng. Thuộc tính này thường dùng để ngắt giữa các từ trong URL dài và không thêm dấu gạch nối.
Ví dụ: trong tiểu sử Hal, có văn bản được viết bằng mã byte, với mỗi byte được phân tách bằng một dấu cách. Mã byte không có dấu cách. Để cho phép một chuỗi dài mã byte chỉ ngắt giữa các byte nếu dòng cần xuống, chúng ta sẽ đưa phần tử <wbr> vào mỗi cơ hội ngắt:
<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>
Các phần tử <br>, <hr> và <wbr> đều là phần tử trống, nghĩa là các phần tử này không được có bất kỳ nút con nào – cả phần tử lẫn văn bản lồng nhau đều không. Vì không có nền tảng nào trong số này có "bên trong" nơi lưu trữ nội dung, nên chúng không có thẻ đóng.
Kiểm tra kiến thức
Kiểm tra kiến thức về văn bản cùng dòng.
Bạn nên dùng phần tử nào để hiển thị mã mẫu?
<code><data><kbd>Phần tử <ruby> dùng để làm gì?