5 thẻ HTML có thể bạn không biết cách sử dụng

Quen thuộc nhưng chưa biết hoặc hoàn toàn mới, điều này xảy ra khi mà chúng ta bỏ lỡ một phần của cú pháp HTML có thể trở thành kiến thức quan trọng mà chúng ta có thể sử dụng tốt. Đó là lý do tại sao cho dù đó là các tính năng mới của HTML hoặc các ứng dụng chưa được biết đến của nó chưa được đưa vào hệ thống của bạn.

Trong bài viết này , chúng ta sẽ xem xét năm yếu tố HTML, một số trong đó bạn có thể thường xuyên sử dụng, nhưng có lẽ không phải ở tiềm năng đầy đủ của nó.

1. <data>

Thẻ <data> có một chức năng tương tự với các thuộc tính data- *. Nó có thể được sử dụng để cung cấp dữ liệu có thể đọc được cho một nội dung người dùng một cách thân thiện. Thuộc tính giá trị của thẻ này mang thông tin bổ sung.

<p>The three volumes of the Lord of the Rings novel are:
  <data value='0-345-24032-4'>The Fellowship of the Ring</data>,
  <data value='0-345-23510-X'>The Two Towers</data>, and
  <data value='0-345-24034-0'>The Return of the King</data>.</p>
<p><i>ISBNs of the books mentioned in this page:</i>
  <span id='ISBNListBlank'></span></p>

Trong HTML ở trên, ISBN của mỗi sách được thêm vào thuộc tính giá trị của phần tử <data> bao gồm tên sách. Trên thị trường sách, ISBN được sử dụng để nhận dạng duy nhất một cuốn sách.

const ISBNListBlank = document.querySelector('#ISBNListBlank')
const dataElements = document.querySelectorAll('data');
const ary = [];
dataElements.forEach((dataElement)
  => ary.push(dataElement.textContent + ' : ' + dataElement.value))
ISBNListBlank.textContent = ary.join(', ')

Để chỉ cho bạn cách trích xuất các giá trị <data> trong JavaScript, đoạn mã trên sẽ trích xuất các ISBN từ thẻ <data> và hiển thị chúng, cùng với các tiêu đề sách, tại một nơi nhất định trong trang.

2. <label>

Có thể bạn đã quen thuộc với thẻ <label>, tuy nhiên nó không chỉ dành cho các checkbox. Nó cũng có thể kiểm soát các yếu tố khác không thể thực hiện được, thực hiện các hành động của chúng giống như nó thực hiện các hành động của các checkbox.

Bạn chỉ phải sử dụng cùng một giá trị cho thuộc tính id của phần tử HTML mà bạn muốn kiểm soát và thuộc tính for của thẻ <label>.

<label for='alertBtn'>
  Clicking on this text clicks the button below.
</label>
<button id='alertBtn' onclick="javascript:alert('Hello')">
  ALERT
</button>

Nhấp vào văn bản của <label> sẽ kích hoạt sự kiện nhấp chuột của <button> và hiển thị thông báo cảnh báo đã cho.

3. <ruby>

Yếu tố này chủ yếu được sử dụng cho các ngôn ngữ Đông Á, tuy nhiên đây không phải là trường hợp sử dụng duy nhất. Mục đích của <ruby> chỉ đơn giản là thêm chú thích hoặc phát âm cho các văn bản, và bạn cũng có thể làm điều đó với nội dung tiếng Anh.

Phần tử bao gồm hai phần tử chính, cụ thể là <rb> và <rt>. Thẻ <rb> giữ văn bản bạn muốn chú thích (gọi là văn bản cơ bản) và <rt> giữ chính chú thích đó.

p>A person who sets up a business or businesses, taking on financial
risks in the hope of profit, is called
<ruby><rb>entrepreneur</rb><rt>ˌɒntrəprəˈnəː</rt></ruby>;
a promoter in the entertainment industry.</p>

Việc phát âm từ "entrepreneur" được thêm vào bằng cách sử dụng phần tử <ruby> bên trong đoạn văn. Từ chính nó được gói trong thẻ <rb> và cách phát âm trong <rt>.

Đây là kết quả đầu ra như thế nào:

4. <ol>

Thẻ <ol> cho các danh sách được sắp xếp là một yếu tố khác mà bạn có thể quen thuộc. Nó tạo ra một danh sách đã đánh số các phần tử, trái ngược với một danh sách không có thứ tự được tạo bằng <ul>.

Bạn có thể đã biết về việc sắp xếp, nhưng bạn có biết rằng thứ tự có thể được đảo ngược? Thay vì tăng thứ tự, việc đánh số giảm cũng có thể được thực hiện bởi <ol>, sử dụng thuộc tính reversed.

<ol reversed type=I>
  <li>Scrabble</li>
  <li>Mahjong</li>
  <li>Monopoly</li>
  <li>Chess</li>
  <li>Jenga</li>
</ol>

Thuộc tính reversed đảo ngược việc đánh số, trong khi thuộc tính type xác định kiểu đánh số..

Đây là cách nó hiển thị trên màn hình:

5. <dfn>

Thẻ <dfn> được dùng để bọc một thuật ngữ được định nghĩa bởi văn bản xung quanh nó. Văn bản được đóng bởi thẻ <dfn> được tạo kiểu bởi các trình duyệt với chữ nghiêng, nghĩa là đây là thuật ngữ được xác định.

Bạn có thể thêm định nghĩa của thuật ngữ bên trong <dfn> trong giá trị của thuộc tính tiêu đề của nó, rất hữu ích để xác định các từ không nhất thiết phải được xác định bởi văn bản xung quanh của chúng.

Thẻ <dfn> hoạt động tương tự như <abbr> hiển thị ý nghĩa của một từ viết tắt được đưa ra trong thuộc tính title của nó khi người dùng di chuột qua phần tử.

<p>There's a
<dfn title='a division or contrast between two things
that are or are represented as being opposed or entirely different'>
  dichotomy
</dfn>
between the design and the prototype.</p>

Đây là kiểu hiển thị mặc định của trình duyệt, tuy nhiên trên một product website , bạn có thể muốn sử dụng một phong cách khác: Di chuột qua từ được xác định, trang sẽ hiển thị định nghĩa được thêm vào trong thuộc tính title.