Chúng ta đã tìm hiểu hầu hết, nhưng chắc chắn là chưa tìm hiểu hết 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 nội tuyến. Trái ngược với quan niệm phổ biến, ban đầu HTML được dùng để chia sẻ tài liệu chứ không phải 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 phần tử này sẽ được thảo luận ngắn gọn ở đây.
Ví dụ về mã và tài liệu 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ẽ xuất hiện bằng phông chữ đơn cách. Khi đưa nhiều dòng mã, hãy lồng <code> bên trong một phần tử <pre>. Phần tử này đại diện cho văn bản được định dạng sẵn.
<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ử cung cấp bản dịch mà máy có thể đọc được nội dung của phần tử. Nếu nội dung <data> có liên quan đến thời gian hoặc ngày, bạn phải sử dụng phần tử <time>. Phần tử này biểu thị 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 thời gian và ngày tháng thân thiện với người dùng ở định dạng mà máy có thể đọc được. Thuộc tính datetime mà máy có thể đọc được, cung cấp thông tin hữu ích cho các ứng dụng, chẳng hạn như lịch và công cụ tìm kiếm.
Khi cung cấp đầu ra mẫu từ một chương trình, hãy sử dụng phần tử <samp> để đặt văn bản trong dấu ngoặc. Trình duyệt thường kết xuất mẫu này hoặc đầu ra được trích dẫn bằng phông chữ đơn cách.
Khi cung cấp hướng dẫn về tương tác bằng bàn phím, bạn có thể sử dụng phần tử <kbd>. Đây là dữ liệu đầu vào bằng văn bản của người dùng từ bàn phím, dữ liệu đầu vào 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 các 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 trình bày nội dung văn bản ở dạng nghiêng của phông chữ xung quanh.
Nếu viết nhiều biểu thức toán học, 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.
Luỹ thừa bậc 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ự. Phần tử này chỉ định văn bản cùng dòng cần được hiển thị dưới dạng chỉ số dưới chỉ vì lý do về kiểu chữ. Chỉ số trên và chỉ số dưới là các con số, hình vẽ, biểu tượng hoặc chú thích khác nhỏ hơn dòng chữ thông thường và được đặt lần lượt hơi phía trên hoặc phía dưới dòng.
Sử dụng <del> để cho biết văn bản đã bị xoá.
Bạn có thể tuỳ ý thêm cite được đặt thành tài nguyên giải thích về thay đổi và thuộc tính datetime có ngày hoặc ngày và giờ ở định dạng ngày và giờ mà máy có thể đọc được. Bạn có thể dùng phần tử gạch ngang, <s>, để cho biết nội dung không còn liên quan nhưng không thực sự bị xoá khỏi tài liệu.
<ins> là phần tử đối lập với <del>. Phần tử này được dùng để cho biết văn bản đã được thêm hoặc "chèn", có thể bao gồm các thuộc tính cite hoặc datetime.
Định nghĩa và hỗ trợ ngôn ngữ
Khi sử dụng từ viết tắt hoặc từ rút gọn, hãy luôn cung cấp phiên bản đầy đủ của thuật ngữ ở dạng văn bản thuần tuý khi sử dụng lần đầu. Sau đó, hãy giới thiệu phiên bản rút gọn của thuật ngữ giữa thẻ mở và thẻ đóng <abbr>. Chỉ trong lần xuất hiện đầu tiên này, khi từ viết tắt hoặc từ rút gọn đang được xác định, bạn mới cần <abbr>. Thuộc tính title không cần thiết và không hữu ích.
Ngoại lệ của quy tắc này là nếu người đọc hiểu rõ thuật ngữ đó, chẳng hạn như HTML và CSS trong loạt bài này.
Khi xác định một thuật ngữ không phải là từ viết tắt hoặc từ rút gọn, hãy sử dụng phần tử định nghĩa <dfn> để xác định thuật ngữ đang được xác định trong nội dung xung quanh.
Nếu thuật ngữ được xác định không phải bằng ngôn ngữ của 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ữ có hướng khác nhau, HTML cung cấp phần tử <bdi> để xử lý văn bản có thể có hai chiều 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 chèn động vào trang. Phần tử <bdo> sẽ ghi đè hướng hiện tại của văn bản, hiển thị văn bản theo một hướng khác. W3C cung cấp giới thiệu về các thuật toán hai chiều.
Một số bộ ký tự có chú thích nhỏ được đặt phía 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 dùng để chứa những chú thích giúp người dùng dễ đọc các ngôn ngữ viết như tiếng Hàn, tiếng Trung và tiếng Nhật. Bạn cũng có thể dùng chú thích ruby cho tiếng Do Thái, tiếng Ả Rập và tiếng Việt.
Dấu ngoặc ruby (<rp>) được đưa vào quy cách để chứa dấu ngoặc đơn mở và đóng cho những trình duyệt không hỗ trợ hiển thị <ruby>. Khi trình duyệt hỗ trợ <ruby> (tất cả trình duyệt luôn mới đều hỗ trợ), nội dung của mọi phần tử <rp> sẽ không xuất hiện. Phần tử văn bản ruby (<rt>) chứa chú thích thực tế. Cả hai đều được lồng trong <ruby>.
Xin lưu ý rằng dấu ngoặc đơn sẽ không xuất hiện nếu trình duyệt của bạn hỗ trợ <ruby>.
Nhấn mạnh văn bản
Có một số phần tử có thể được 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ì 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 làm nổi bật một khoảng nội dung. Phần tử<em>có thể được lồng, với mỗi cấp độ lồng cho biết mức độ nhấn mạnh cao 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 theo cách nào đó, chẳng hạn như làm nổi bật (hoặc "đánh dấu") sự xuất hiện của cụm từ tìm kiếm trong kết quả tìm kiếm. Điều này giúp nhanh chóng xác định nội dung được đánh dấu mà không cần nhấn mạnh hoặc coi trọng. - Phần tử
<strong>xác định văn bản là có tầm quan trọng cao. Các trình duyệt thường hiển thị nội dung bằng một trọng lượng 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 tiêu đề của 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 tham chiếu hoặc trích dẫn rút gọn cho các tác phẩm đó, chẳng hạn như số ISBN của sách.
Có 3 phần tử đã bị ngừng sử dụng tạm thời nhưng đã được thêm lại vào HTML. Bạn nên hạn chế sử dụng các thẻ này (nếu có), vì chúng không có giá trị ngữ nghĩa và bạn nên luôn sử dụng CSS để tạo kiểu cho các phần tử HTML.
<i>
Bạn có thể dùng các phần tử <i> cho các thuật ngữ kỹ thuật, từ nước ngoài (với thuộc tính lang xác định ngôn ngữ), suy nghĩ hoặc tên tàu. Phần tử này được dùng để phân biệt nội dung nội tuyến 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à tên phân loại.
Bạn không nên dùng phần tử này để in nghiêng văn bản.
MLW sử dụng phần tử <span> cho văn bản kỳ lạ ở cuối bài đánh giá xưởng của ToastyMcToastface. Phần tử <span> cung cấp một vùng chứa chung nội tuyến không có ngữ nghĩa và không biểu thị bất cứ điều gì. Đây cũng là một trường hợp sử dụng phù hợp cho <i>.
Kiểu mặc định cho phần tử <i> là hiển thị phần tử bằng phông chữ nghiêng. Trong ví dụ này, chúng ta đặt font-style: normal vì các ký tự được dùng không có sẵn ở dạng chữ nghiêng.
<u>
Phần tử <u> là dành cho nội dung có chú thích không phải dạng văn bản. Ví dụ: bạn có thể muốn chú thích những từ bị lỗi chính tả mà bạn biết. 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 một đường gạch chân lượn sóng màu đỏ để mô phỏng 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ể 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 được sử 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 cung cấp vì tôi không thể nghĩ ra trường hợp sử dụng hợp lệ; đó là cách mà phần tử này được coi là "biện pháp 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 ký tự trả về đầ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 theo chủ đề giữa các phần nội dung có liên quan, 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 dài 5.000 từ và công thức mà người dùng thực sự đang tìm kiếm, hãy thêm một phần tử <hr>. HR là viết tắt của "horizontal rule" (đường ngang). Mặc dù trình duyệt thường hiển thị một đường ngang, nhưng phần tử này có ý nghĩa 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ử tự đóng <wbr> cung cấp cho trình duyệt một đề xuất rằng nếu một từ có thể tràn ra khỏi vùng chứa, thì đây là vị trí mà trình duyệt có thể tuỳ ý ngắt dòng. Ký tự này thường được dùng để ngắt giữa các từ trong URL dài. Ký tự này không thêm dấu gạch nối.
Ví dụ: trong tiểu sử về Hal, có văn bản được viết bằng mã byte, trong đó mỗi byte được phân tách bằng dấu cách. Mã byte không có dấu cách. Để cho phép một chuỗi mã byte dài chỉ ngắt giữa các byte nếu dòng cần xuống dòng, chúng ta sẽ thêm phần tử <wbr> vào mỗi vị trí có thể ngắt dòng:
<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, tức là chúng không thể có bất kỳ nút con nào – cả phần tử lồng nhau lẫn văn bản. Vì không có "phần bên trong" nào để lưu trữ nội dung, nên các thẻ này không có thẻ kết thú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 nội tuyến.
Bạn nên dùng phần tử nào để hiển thị một đoạn mã?
<code><kbd><data>Phần tử <ruby> dùng để làm gì?