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 lĩnh vực 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ù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 đề cập đến các đường liên kết và phần tử <a>. Phần còn lại
sẽ được thảo luận ngắn gọn tại đây.
Ví dụ về mã và cách viết kỹ thuật
Khi ghi lại các 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ị bằng phông chữ đơn cách. Khi bao gồm nhiều dòng mã, hãy lồng <code> bên trong một
Phần tử <pre> đạ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 cụ thể với
bản dịch có thể đọc được bằng máy; thuộc tính value của phần tử cung cấp bản dịch có thể đọc được bằng máy cho 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 tháng, thì <time>
đại diện cho một khoảng thời gian cụ thể sẽ được sử dụng thay thế.
Phần tử <time> có thể bao gồm thuộc tính datetime để cung cấp ngày giờ thân thiện với con người ở định dạng mà máy có thể đọc được.
Máy có thể đọc được nên thuộc tính datetime 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 <samp>
để đóng văn bản. Thường thì trình duyệt cũng sẽ hiển thị đầu ra mẫu hoặc đầu ra được trích dẫn này bằng 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, <kbd>
. Thuộc tính này đại diện cho hoạt động nhập bằng văn bản của người dùng qua 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ể sử dụng phần tử <var> cho biểu thức toán học hoặc
cá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 bằng phiên bản in nghiêng của phông chữ xung quanh.
Nếu bạn phải viết nhiều toán học, hãy cân nhắc sử dụng MathML, loại mã dựa trên XML
Ngôn ngữ đánh dấu toán học để mô tả ký hiệu toán học.
luỹ thừa của hai trong định lý pythagore sử dụng 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 phải được hiển thị dưới dạng chỉ số dưới chỉ vì lý do đánh máy. Chỉ số trên và chỉ số dưới là các con số,
hình, biểu tượng hoặc các chú thích khác nhỏ hơn kiểu đường thông thường và được đặt ở phía trên hoặc phía dưới đường kẻ một chút,
.
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 vào tài nguyên giải thích
thay đổi và thuộc tính datetime có
ngày hoặc giờ ở định dạng ngày giờ mà máy có thể đọc được. Phần tử gạch ngang chữ, <s>,
có thể được dùng để cho biết rằng 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> ngược lại với phần tử <del>; nó được sử dụng
để cho biết văn bản đã được thêm hoặc "đã chèn", cũng như có thể 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 sử dụng cả 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ưới dạng văn bản thuần tuý trong lần sử dụng đầu tiên,
khi bạn đưa ra cách diễn đạt rút gọn của thuật ngữ mở đầu và kết thúc <abbr>
thẻ; trừ khi người đọc biết rõ cụm từ đó, chẳng hạn như "HTML" và "CSS" trong loạt video này. Chỉ trong lần xuất hiện đầu tiên này,
khi định nghĩa từ viết tắt hoặc từ viết tắt là <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 hoặc từ viết tắt, hãy sử dụng định nghĩa <dfn>
để xác định thuật ngữ được định nghĩa trong nội dung xung quanh.
Nếu thuật ngữ được định nghĩa không cùng ngôn ngữ với văn bản xung quanh, hãy nhớ thêm lang
để xác định ngôn ngữ.
Khi viết ngôn ngữ theo các hướng khác nhau, HTML cung cấp <bdi>
để xử lý văn bản có thể hai chiều tách biệt với văn bản xung quanh. 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. Chiến lược phát hành đĩa đơn
Phần tử <bdo> 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 giới thiệu phần giới thiệu về các thuật toán hai chiều.
Một số bộ ký tự bao gồm cá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
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. Hồng ngọc
cũng có thể được sử 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 thông số kỹ thuật để
chứa dấu ngoặc đơn mở và đóng đối với 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à mọi trình duyệt lâu dài đều hỗ trợ), nội dung của mọi phần tử <rp>
sẽ không được hiển thị. Phần tử văn bản màu hồng ngọc (<rt>) chứa
các chú thích 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>.
Nhấn mạnh văn bản
Có một số thành phần 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ì vì lý do trình bày, vì đó là một công việc của CSS).
- Sử dụng phần tử
<em>để nhấn mạnh hoặc tạo sức hút cho một đoạn nội dung. Phần tử<em>có thể được lồng, với mỗi cấp độ lồng nhau cho biết mức độ nhấn mạnh lớn hơn. Phần tử này có ngữ nghĩa ý 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 đánh dấu văn bản liên quan theo cách nào đó, chẳng hạn như đánh dấu (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 cho phép nội dung được đánh dấu cần được xác định nhanh chóng mà không cần nhấn mạnh hay quan trọng. - Phần tử
<strong>xác định văn bản có mạnh tầm quan trọng của chúng. 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 Kiến thức cơ bản về văn bản, được sử 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 tài liệu tham khảo viết tắt hoặc siêu dữ liệu trích dẫn cho sách, bài viết hoặc tác phẩm sáng tạo khác, như số ISBN của một cuốn 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 những định dạng này một cách thận trọng, nếu chúng cung cấp ít hoặc không có giá trị ngữ nghĩa và CSS nên luôn được sử dụng để tạo kiểu trên các phần tử HTML.
<i>
Có thể sử dụng các phần tử <i> cho thuật ngữ kỹ thuật, từ nước ngoài
(xin nhắc lại, với thuộc tính lang giúp 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 cùng dòng với văn bản xung quanh vì một lý do cụ thể,
như văn bản thành ngữ, thuật ngữ kỹ thuật và cách chỉ định phân loại. Không nên chỉ sử 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 lạ ở cuối bài đánh giá hội thảo của Toasty McToastface. <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 kỳ điều gì. Đây cũng là cách sử dụng <i> thích 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 ta đặt font-style: normal
vì các ký tự được sử dụng không có sẵn ở dạ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ừ cố ý viết sai chính tả. Theo mặc định, nội dung được gạch chân nhưng bạn có thể kiểm soát nội dung này bằng CSS,
chẳng hạn như bằng cách thêm dấu gạch dưới 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ể dùng phần tử <b> để thu hút sự chú ý vào văn bản không
nếu không thì lại 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 đưa ra được trường hợp sử dụng hợp lệ; đó là cách "phương án cuối cùng"
phần tử này.
Khoảng trắng
Khi bạn muốn ngắt dòng, chẳng hạn như khi làm thơ hoặc khi viết một địa chỉ thực, phần tử ngắt dòng tự đóng,
<br> 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>
Để tạo dấu phân cách hoặc dấu ngắt chủ đề giữa các phần của nội dung tiếp tuyến, chẳng hạn như giữa các chương trong một cuốn sách hoặc
giữa độ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 <hr>
. HR là viết tắt của "quy tắc theo chiều ngang". Mặc dù các trình duyệt thường hiển thị đường ngang, nhưng phần tử này có nghĩa ngữ nghĩa. Chiến lược phát hành đĩa đơn
vai trò mặc định là separator.
HTML cũng có một phần tử cho phép ngắt từ. <wbr> tự đóng
sẽ cung cấp đề xuất cho trình duyệt rằng nếu một từ có thể tràn vùng chứa của mình, thì đây là vị trí mà trình duyệt
có thể ngắt dòng nếu muốn. Điều này thường được sử dụng để ngắt giữa các từ trong
các URL dài. chứ 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, mỗi byte được phân cá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 mã byte dài chỉ ngắt giữa các byte nếu dòng đó cần gói, chúng ta đưa vào
phần tử <wbr> tại mỗi cơ hội chèn quảng cáo:
<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à các 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ả hai phần tử này đều không được lồng
hoặc văn bản. Vì không có vật nào trong số này có "bên trong" Không có thẻ đóng, nơi nội dung có thể được lưu trữ.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về văn bản cùng dòng.
Bạn nên sử dụng phần tử nào để cho thấy mã mẫu?
<code><data><kbd>Phần tử <ruby> được dùng để làm gì?