Menu
Nếu bạn làm việc trong lĩnh vực lập trình web, bạn sẽ biết với chuẩn HTML mới hiện nay (HTML5), số lượng thẻ HTML là rất nhiều
Vậy để tối ưu hoá mã lập trình, việc sử dụng đúng thẻ là điều cần thiết
Có lẽ bạn đã quá quen với các thẻ HTML thông dụng như thẻ <div>, thẻ <a>, thẻ <span> hay <table>
Trong bài viết này, chúng mình chia sẻ những thẻ HTML độc lạ ít người biết hơn, nhưng cũng vô cùng hữu ích
TÓM LƯỢC BÀI VIẾT NÀY
Thông thường để tạo ra những chi tiết tương tác với người dùng trên web, bạn sẽ nghĩ ngay tới javascript
Nhưng với mục đích ẩn/hiện nội dung đơn giản, bạn không cần phải thêm mã javascript để làm nặng thêm tài nguyên trên web, thẻ HTML có thể hỗ trợ tốt mục đích này.
Đó chính là thẻ <detail> và <summary>
Thẻ <details> sẽ ẩn nội dung trong thẻ 1 cách mặc định
Khi người dùng nhấp vào tiêu đề, thẻ sẽ tự mở rộng để hiển thị nội dung bên trong.
Thẻ <detail> sẽ cung cấp 1 tiêu đề tùy chỉnh bằng cách sử dụng thẻ <summary>.
Tính năng này thường gặp trong phần Câu hỏi thường gặp trên web để giúp cho nội dung phần này trở nên ngắn gọn hơn !
<details> <summary>How does this element work?</summary> <p>Any content inside is hidden by default.</p> </details>
Thẻ small được sử dụng để thu nhỏ kích thước chữ, áp dụng cho các tuyên bố bản quyền như dòng Copyright hoặc tuyên bố miễn trừ trách nhiệm rất thường gặp khi làm web
Room rate: £80 <small>excluding VAT</small>
Khi bạn muốn viết nội dung trình bày các đoạn mã lập trình, thẻ <code> sẽ giúp người dùng phân biệt mã lập trình với văn bản thông thường .
Theo mặc định, nội dung bên trong thẻ code được áp dụng font chữ Monospace.
<code> Đây là nơi ghi đoạn mã lập trình </code>
Được đặt bên trong thẻ <head> của trang, thẻ <meta> rất dễ bị bỏ qua, đặc biệt với những bạn mới làm việc trong lĩnh vực lập trình web
Ben cạnh thẻ Title, thẻ Meta cung cấp thông tin quan trọng về trang web để công cụ tìm kiếm hiểu rõ hơn về website của bạn, vì vậy thẻ meta cực kỳ quan trọng cho SEO
Màu chủ đề có thể được xác định để cập nhật giao diện người dùng của trình duyệt với tính liên tục hơn với trang được hiển thị.
Với mạng xã hội ngày càng phát triển, thẻ Meta còn giúp cho nội dung trên web của bạn hiển thị rõ ràng hơn khi chia sẻ link website lên mạng xã hội (Với giao thức Open Graph)
Làm thế nào để bạn viết văn bản công thức toán học như H2O (nước) hoặc A (mũ 2) ?
Tất nhiên, bạn hoàn toàn có thể xử lý bằng CSS
Tuy nhiên, bạn nên sử dụng thẻ <sup> và <sub> để làm nhanh hơn rất nhiều
H <sub> 2 </sub> O a <sup> 2 </sup> + b <sup> 2 </sup> = c <sup> 2 </sup>
