Bao nhiêu lần bạn đã dùng thư viện JavaScript để tạo cửa sổ modal? Hay phải viết CSS phức tạp để làm phần nội dung thu gọn (accordion)? Nếu tôi nói rằng HTML5 đã có sẵn những thẻ gốc để xử lý chính xác những tác vụ này thì sao?
Đây không chỉ là những thẻ HTML bình thường — mà là những thẻ khiến bạn phải thốt lên "Chờ đã, cái này làm được từ đầu rồi à?" Hãy cùng khám phá 8 thẻ HTML mạnh mẽ đến bất ngờ mà có thể bạn chưa từng sử dụng — nhưng chắc chắn nên dùng.
1. Thẻ <dialog>: Modal tích hợp sẵn
Hãy tưởng tượng bạn bắt đầu một dự án mới và cần thêm một cửa sổ modal. Phản xạ đầu tiên? Dùng React, lấy một thư viện UI, hoặc viết một đống JavaScript. Tôi hiểu mà — tôi cũng từng làm như vậy vô số lần.
Nhưng HTML5 có sẵn một thẻ được thiết kế riêng cho mục đích này:
<dialog id="myDialog"> <h2>This is a Native Dialog</h2> <p>No JavaScript frameworks required!</p> <button id="closeDialog">Close</button>
</dialog> <button id="openDialog">Open Dialog</button>
Bạn chỉ cần một chút JavaScript để điều khiển mở/đóng:
const dialog = document.getElementById('myDialog');
document.getElementById('openDialog').addEventListener('click', () => { dialog.showModal(); // Makes the dialog appear as a modal
});
document.getElementById('closeDialog').addEventListener('click', () => { dialog.close(); // Closes the dialog
});
Trình duyệt sẽ xử lý việc quản lý tiêu điểm (focus), hiển thị nền mờ phía sau, và hỗ trợ bàn phím. Hầu hết các lập trình viên tôi từng nói chuyện đều chưa bao giờ dùng thẻ này, dù nó đã được hỗ trợ bởi tất cả các trình duyệt lớn từ khoảng năm 2022.
Bạn có thể tùy biến giao diện theo ý muốn:
dialog { padding: 20px; border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
} dialog::backdrop { background-color: rgba(0,0,0,0.6);
}
Tôi đã sử dụng thẻ này trong sản phẩm thật từ vài năm nay. Điểm trừ duy nhất là trình duyệt Safari trên iOS từng hỗ trợ kém trước năm 2023, nhưng hiện tại thì đã ổn định. Với những modal phức tạp chứa nhiều thành phần tương tác, bạn có thể vẫn muốn dùng thư viện chuyên biệt, nhưng với phần lớn trường hợp, thẻ gốc này là quá đủ.
2. Thẻ <details> và <summary>: Accordion tích hợp
Accordion (nội dung thu gọn/mở rộng) xuất hiện ở khắp nơi trên web — trang FAQ, chi tiết sản phẩm, bảng cài đặt. Hầu hết lập trình viên sẽ tìm đến một giải pháp JavaScript, nhưng HTML5 lại có sẵn cặp thẻ này:
<details> <summary>Click to expand</summary> <p>This content can be expanded and collapsed without any JavaScript!</p>
</details>
Chỉ cần vậy là đủ. Trình duyệt sẽ tự động xử lý hành vi mở/đóng, các thuộc tính hỗ trợ tiếp cận (accessibility), và điều hướng bằng bàn phím.
Bạn cũng có thể tùy biến giao diện để phù hợp với hệ thiết kế của mình:
details > summary { list-style: none; /* Removes the default triangle */
} details > summary::before { content: '▶'; display: inline-block; margin-right: 0.5em; transition: transform 0.2s;
} details[open] > summary::before { transform: rotate(90deg);
}
Những thẻ này đặc biệt hữu ích trong điều hướng phân cấp. Tôi từng dùng nó trong một trang tài liệu kỹ thuật có ba cấp điều hướng:
<details> <summary>Programming Languages</summary> <details> <summary>Frontend</summary> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </details> <details> <summary>Backend</summary> <ul> <li>Python</li> <li>Java</li> <li>Ruby</li> </ul> </details>
</details>
Giới hạn duy nhất là animation — nếu bạn muốn hiệu ứng mở/đóng mượt mà, bạn cần thêm JavaScript. Nhưng với nhiều trường hợp, hành vi mặc định đã đủ tốt.
3. Thẻ <datalist>: Tự động hoàn thành
Chức năng tự động hoàn thành là một chức năng chính của các biểu mẫu web hiện đại. Hầu hết các nhà phát triển đều tìm đến giải pháp của bên thứ ba, nhưng HTML5 có một thành phần tích hợp cho việc này:
<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge">
</datalist>
Tính năng này cung cấp cho bạn một kiểu nhập văn bản hiển thị các gợi ý khi bạn nhập, cùng với khả năng chọn từ danh sách hoặc nhập văn bản tùy chỉnh.
Một trường hợp sử dụng thú vị là tạo bộ chọn màu với các màu được đặt tên:
<input type="text" list="colors" placeholder="Choose a color">
<datalist id="colors"> <option value="#FF0000">Red</option> <option value="#00FF00">Green</option> <option value="#0000FF">Blue</option>
</datalist>
Người dùng có thể nhập tên màu hoặc mã hex. Thêm một chút JavaScript để hiển thị bản xem trước:
const input = document.querySelector('input');
const preview = document.getElementById('colorPreview'); input.addEventListener('input', () => { preview.style.backgroundColor = input.value;
});
Hạn chế chính của thẻ <datalist> là style - bạn không thể dễ dàng tùy chỉnh giao diện của các tùy chọn thả xuống. Nếu bạn cần kiểu dáng tùy chỉnh cho các gợi ý, bạn vẫn có thể cần giải pháp JavaScript. Nhưng đối với nhiều trường hợp sử dụng, phần tử gốc hoàn toàn đủ.
4. Thẻ <meter>: Hiển thị phép đo ngữ nghĩa
Khi hiển thị các giá trị trong phạm vi đã biết, hầu hết các nhà phát triển sử dụng div có màu nền. Nhưng HTML5 có một phần tử chuyên dụng cho việc này:
<meter value="75" min="0" max="100" low="30" high="70" optimum="80"></meter>
Trình duyệt sẽ định dạng nó dựa trên ngưỡng bạn đặt. Nếu giá trị nằm trong phạm vi "thấp", nó có thể hiển thị màu vàng. Nếu nằm trong phạm vi "cao", nó có thể hiển thị màu cam. Và nếu gần giá trị "tối ưu", nó sẽ hiển thị màu xanh lá cây.
Điều này đặc biệt hữu ích cho bảng thông tin:
<!-- Disk usage (lower is better) -->
<meter value="75" min="0" max="100" low="70" high="90" optimum="0">75%</meter> <!-- Battery level (higher is better) -->
<meter value="35" min="0" max="100" low="20" high="60" optimum="100">35%</meter> <!-- CPU usage (lower is better) -->
<meter value="82" min="0" max="100" low="60" high="80" optimum="0">82%</meter>
Thuộc tính optimum này cho biết giá trị cao hơn hay thấp hơn thì tốt hơn, ảnh hưởng đến màu sắc.
Hỗ trợ trình duyệt tốt, nhưng tùy chọn kiểu dáng bị hạn chế. Nếu bạn cần giao diện tùy chỉnh cao, bạn vẫn có thể cần giải pháp tùy chỉnh. Nhưng đối với bảng điều khiển và giao diện người dùng giám sát, phần tử gốc hoạt động tốt và truyền đạt ý nghĩa ngữ nghĩa cho trình đọc màn hình.
5. Thẻ <output>: Hiển thị kết quả tính toán
Bạn từng thấy những form với giá trị được tính toán theo thời gian thực? Nhiều người sẽ chọn JavaScript + span để hiển thị, nhưng HTML5 cung cấp một giải pháp semantic hơn:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result" for="a b">0</output>
</form>
Thẻ <output> giúp bạn truyền đạt rõ ràng rằng đây là kết quả được tính từ đầu vào. Nó có thể tích hợp tốt với form, giúp cải thiện khả năng tiếp cận (accessibility) và rõ ràng về mặt cấu trúc.
6. Thẻ <mark>: Đánh dấu nổi bật nội dung
Hãy tưởng tượng bạn làm tính năng tìm kiếm, và muốn làm nổi bật từ khóa người dùng đã tìm:
<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>
Theo mặc định, trình duyệt sẽ định dạng nó với nền màu vàng, nhưng bạn có thể tùy chỉnh:
mark { background-color: #fff9c4; padding: 2px 4px; border-radius: 3px;
}
Điều này đặc biệt hữu ích cho kết quả tìm kiếm:
const searchTerm = "HTML";
const content = "HTML elements are the building blocks of HTML pages."; const highlighted = content.replace( new RegExp(searchTerm, 'gi'), match => `<mark>${match}</mark>`
);
7. Thẻ <time>: Hiển thị và phân tích ngày giờ
Thẻ này có thể trông như vô dụng, nhưng lại cực kỳ hữu ích cho SEO và công cụ tìm kiếm, giúp chúng hiểu được thời gian cụ thể mà bạn hiển thị:
<p>The article was published on <time datetime="2025-05-23">May 23, 2025</time>.</p>
Google và các công cụ khác có thể phân tích máy (machine-readable) định dạng datetime, trong khi người dùng vẫn thấy định dạng thân thiện.
Bạn cũng có thể dùng nó cho thời lượng:
<!-- Just a date -->
<time datetime="2025-05-20">May 20, 2025</time> <!-- Date and time -->
<time datetime="2025-05-20T14:30:00">2:30 PM on May 20, 2025</time> <!-- Just a time -->
<time datetime="14:30:00">2:30 PM</time> <!-- A duration -->
<time datetime="PT2H30M">2 hours and 30 minutes</time>
Một ứng dụng thực tế là về thời gian tương đối:
<p>Posted <time datetime="2025-05-18T14:30:00" class="relative-time">2 days ago</time></p>
Với JavaScript, bạn có thể cập nhật những nội dung này theo định kỳ:
function updateRelativeTimes() { document.querySelectorAll('.relative-time').forEach(el => { const date = new Date(el.getAttribute('datetime')); el.textContent = getRelativeTimeString(date); });
} // Update every minute
setInterval(updateRelativeTimes, 60000);
Yếu tố này đặc biệt có giá trị đối với các blog, trang tin tức và nền tảng truyền thông xã hội, nơi thông tin ngày giờ chính xác là rất quan trọng.
8. Các thành phần <figure> và <figcaption>: Chú thích hình ảnh ngữ nghĩa
Hầu hết các lập trình viên triển khai chú thích hình ảnh bằng div và đoạn văn, nhưng HTML5 có các thành phần chuyên dụng cho việc này:
<figure> <img src="chart.jpg" alt="Sales chart for Q2 2025"> <figcaption>Fig.1 - Company sales increased by 25% in Q2 2025.</figcaption>
</figure>
Phần tử <figure> này không chỉ dành cho hình ảnh - nó có thể được sử dụng cho bất kỳ nội dung nào được tham chiếu như một đơn vị duy nhất:
<!-- Code snippet with caption -->
<figure> <pre><code>
function greet(name) { return `Hello, ${name}!`;
} </code></pre> <figcaption>A simple JavaScript greeting function using template literals.</figcaption>
</figure> <!-- Quote with attribution -->
<figure> <blockquote> <p>The best way to predict the future is to invent it.</p> </blockquote> <figcaption>— Alan Kay</figcaption>
</figure>
Các yếu tố này đặc biệt hữu ích cho các hệ thống quản lý nội dung và blog, nơi biên tập viên cần thêm chú thích vào hình ảnh và các phương tiện truyền thông khác.
Một thiết lập CSS đơn giản có thể tạo ra một thư viện đẹp mắt:
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;
} figure { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s;
} figure:hover { transform: translateY(-5px);
} figure img { width: 100%; height: 200px; object-fit: cover; display: block;
} figcaption { padding: 10px; background-color: #f5f5f5; font-style: italic;
}
Ưu điểm chính là ý nghĩa ngữ nghĩa - trình đọc màn hình có thể thông báo rằng văn bản là chú thích cho nội dung liên quan, giúp cải thiện khả năng truy cập.
Kết luận
Tận dụng sức mạnh của HTML gốc.
Chúng tôi đã khám phá tám thành phần HTML5 cung cấp các giải pháp tích hợp tinh tế cho những thách thức phổ biến trong phát triển web:
<dialog>cho cửa sổ modal gốc<details>và<summary>cho nội dung có thể thu gọn<datalist>cho chức năng tự động hoàn thành gốc<meter>để hiển thị phép đo ngữ nghĩa<output>cho kết quả tính toán động<mark>để làm nổi bật ngữ nghĩa<time>cho ngày tháng và thời gian ngữ nghĩa<figure>và<figcaption>cho chú thích hình ảnh ngữ nghĩa
Các thành phần này làm giảm sự phụ thuộc vào JavaScript, cải thiện khả năng truy cập và làm cho HTML của bạn có ý nghĩa và ngữ nghĩa hơn.