Xin chào các nhà phát triển👋
Trong bài viết này, tôi sẽ chia sẻ một số thẻ HTML mới và hữu ích được thêm vào trong HTML5 để viết mã dễ dàng và nhanh chóng để tạo ra các trang web phức tạp, động, hấp dẫn và hiệu quả.
Bắt đầu thôi🚀
dialog
➡ Bây giờ bạn có thể dễ dàng tạo hộp thoại hoặc cửa sổ popup với thẻ <dialog>. Đó là một cách tuyệt vời để tạo ra các hộp thoại modal tùy chỉnh mà không cần phụ thuộc nặng vào JavaScript.
<dialog id="myDialog">
<p>This is a dialog box</p>
<button onclick="document.getElementById('myDialog').close()">Close
</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog
</button>template
➡ Thẻ <template> được sử dụng như một container để chứa nội dung phía máy khách mà bạn không muốn hiển thị khi trang tải. Nội dung này có thể được nhân bản và chèn vào tài liệu bằng JavaScript.
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Hello, This is Kiran</h2>
<p>Thanks for reading this</p>
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>picture
➡ Bằng cách sử dụng thẻ <picture>, bạn có thể xác định nhiều nguồn cho một hình ảnh, bây giờ trình duyệt sẽ chọn ra nguồn tốt nhất dựa trên kích thước màn hình, độ phân giải. Điều này đặc biệt hữu ích cho thiết kế đáp ứng.
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>meter
➡ Thẻ <meter> có thể được sử dụng để đại diện cho một đo lường số trong một phạm vi đã biết, như dung lượng đĩa hoặc sự quan trọng của một kết quả truy vấn. Nó giúp hiển thị giá trị một cách trực quan trong một phạm vi.
<label for="diskUsage">Disk Usage:</label>
<meter id="diskUsage" value="0.6">60%</meter>output
➡ Thẻ <output> đại diện cho kết quả của một phép tính. Nó có thể được sử dụng với JavaScript để hiển thị kết quả của một phép tính.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="50"> +
<input type="number" id="b" value="25"> =
<output name="result" for="a b">75</output>
</form>progress
➡ Thẻ <progress> đại diện cho tiến trình hoàn thành của một nhiệm vụ, như một quá trình tải xuống hoặc tải lên tệp.
<label for="fileProgress">File upload progress:</label>
<progress id="fileProgress" value="70" max="100">70%</progress>mark
➡ Thẻ <mark> được sử dụng để làm nổi bật văn bản. Nó đặc biệt hữu ích cho các trang kết quả tìm kiếm nơi bạn muốn làm nổi bật văn bản phù hợp.
<p>The word <mark>highlighted</mark> is important.</p>abbr
➡ Thẻ <abbr> được sử dụng để xác định một từ viết tắt hoặc từ viết tắt, cung cấp mô tả đầy đủ trong thuộc tính title.
<p>I'm a true<abbr title="Marvel Cinematic Universe">MCU</abbr>fan.</p>time
➡ Thẻ <time> được sử dụng để biểu diễn ngày, thời gian hoặc thời lượng. Nó hữu ích để làm cho dữ liệu liên quan đến thời gian của bạn có thể đọc được bằng máy.
<p>The concert starts at <time datetime="20:00">8 PM</time>.</p>bdi
➡ Thẻ <bdi> được sử dụng để cách ly một phần của văn bản có thể được định dạng theo hướng khác so với văn bản khác bên ngoài nó. Nó đảm bảo rằng nội dung web của bạn vẫn nhất quán và có thể đọc được, bất kể ngôn ngữ hoặc hướng văn bản nào được sử dụng.
<ul>
<li>Product: <bdi>ABC1234</bdi></li>
<li>Product: <bdi>مرحبا5678</bdi></li>
</ul>wbr
➡ Thẻ <wbr> chỉ định nơi văn bản có thể chia vào một dòng mới, nếu cần thiết. Điều này hữu ích cho các từ dài hoặc URL.
<p>Thisisaverylongword<wbr>thatmightneedbreaking.</p>main
➡ Thẻ <main> được sử dụng để chỉ định nội dung chính của tài liệu. Nó chỉ nên được sử dụng một lần trên mỗi trang, và nó loại trừ nội dung được lặp lại trên các tài liệu như tiêu đề, chân trang, điều hướng và thanh bên.
<main>
<h1>Welcome to my blog post</h1>
<p>Today we will learn some new html tags</p>
</main>figcaption
➡ Thẻ <figcaption> được sử dụng để cung cấp một chú thích cho hình ảnh.
<figure>
<img src="Thanos.jpg" alt="Thanos image">
<figcaption>Thanos snapping his fingers</figcaption>
</figure>