Học HTML5
|

Học 20 kiến thức thú vị về HTML trong 20 ngày

ByNguyễn Văn Hiếu

Chào các bạn độc giả của Lập Trình Không Khó, trong bài viết này chúng ta sẽ đi tìm hiểu 20 kiến thức cực kỳ thú vị về HTML. Mình cá các bạn đã từng học HTML chưa chắc đã biết tới những kiến thức thú vị này. Do vậy, hãy cũng mình khám phá 20 kiến thức vi diệu này nhé.

Ngày 1. Chia bố cục website thành các phần hợp lý

HTML5 cung cấp một số thẻ giúp bạn bố cục trang web của mình bằng các phần thích hợp:

  1. Header, <header>
  2. Navigation bar, <nav>
  3. Main Content, <main> với thẻ <article> và thẻ <section>
  4. Sidebar, <aside>
  5. Footer, <footer>

Các trang web được cho là có thiết kế tốt có thể có giao diện hoặc chức năng hoạt động khác nhau nhưng chúng cần có chung một cấu trúc tiêu chuẩn.

Bằng cách sử dụng cấu trúc tiêu chuẩn này với các thẻ được đề cập ở trên, website của bạn sẽ trở nên thân thiện hơn.

Xem thêm: Danh sách 20 hosting miễn phí cho dân IT

Ngày 2. Các thẻ mang ngữ nghĩa, tại sao nó quan trọng?

Thay vì viết mã của bạn trong các thẻ <div>, tại sao bạn không sử dụng các thẻ mang ngữ nghĩa?

Các thẻ HTML mang ngữ nghĩa thường được sử dụng với đúng mục đích sinh ra của nó. Sử dụng các thẻ hợp lý, kèm theo các thuộc tính class và id mang ý nghĩa sẽ có tác dụng hơn nhiều so với việc chỉ nhằm mục đích hiển thị chính xác. Việc hiển thị như thế nào là trách nhiệm của CSS.

Ví dụ, sử dụng các thẻ <p>, <header> và <figure> lần lượt nói lên rằng nơi đó là một đoạn văn, phần tiêu đề và hình ảnh. Điều này giúp cho trình duyệt, các lập trình viên khác dễ dàng hiểu được ý nghĩa của các thành phần này.

Tại sao việc sử dụng phù hợp các thẻ lại quan trọng?

  • Giúp chúng ta có những dòng code sạch
  • Tăng khả năng tiếp cận, khả năng đọc
  • Cải thiện SEO

Ngày 3. Cho phép người dùng chỉnh sửa bất kỳ thành phần nào của website

Các thành phần văn bản của 1 website có thể cho phép người dùng chỉnh sửa bằng cách sử dụng thuộc tính contenteditable.

Bạn chỉ cần đặt thuộc tính contenteditable bằng true trên bất kỳ thẻ HTML nào bạn muốn người dùng có thể sửa.

Nó có thể hữu ích trong việc tạo ra một trình soạn thảo văn bản đơn giản.

Ngày 4. Thiết kế nút download chỉ với HTML5

Thông thường, khi người dùng nhấp vào liên kết đến tệp tin đa phương tiện, nó sẽ được mở và xem trong trình duyệt.

Nếu bạn muốn cung cấp cho người dùng tùy chọn lưu tệp đó trên máy tính của họ, hãy sử dụng thuộc tính download nhé.

Thuộc tính download của thẻ <a> làm cho liên kết URL trở thành một liên kết tải xuống chứ không phải liên kết điều hướng. Có nghĩa là người dùng có thể lưu liên kết thay vì điều hướng đến nó.

Thuộc tính download có thể sử dụng mà không cần có giá trị. Tuy nhiên, nếu bạn muốn tên tệp khi người dùng tải về khác với tên tệp gốc thì bạn hãy đặt giá trị cho nó nhé. Khi đó, giá trị của thuộc tính download sẽ trở thành tên file khi người dùng tải file thay vì tên gốc của file.

Ngày 5. Định nghĩa options sử dụng thẻ datalist

Thẻ <datalist> trong HTML5 được sử dụng giúp cung cấp tính năng tự động hoàn thành khi người dùng nhập lựa chọn của họ.

Nó chỉ định tập hợp các tùy chọn được xác định trước cho người dùng nhập.

Để liên kết chúng với việc cho người dùng nhập liệu, chúng ta thường sử dụng với thẻ <input>⁣ và sử dụng thuộc tính list mang giá trị tương ứng với thuộc tính id của thẻ <datalist>.

Nó hoạt động với tất cả các loại đầu vào như data, range, color, …

Ngày 6. Tạo các thành phần có thể thu gọn với HTML5

Thẻ <details> được sử dụng để tạo các thành phần có thể thu gọn/mở rộng. Người dùng có thể mở nó ra để xem và cũng có thể thu gọn nó lại khi cần.

Sử dụng nó với thẻ <summary> giúp bạn chỉ định tiêu đề có thể nhấp vào để mở rộng hoặc thu gọn thành phần đó.

Mặc định, thành phần này sẽ được thu gọn. Thuộc tính open được sử dụng để giúp chúng ta thay đổi tiêu chí mặc định này.

Ngày 7. Responsive hình ảnh với srcset

Để hiển thị hình ảnh responsive thì chúng ta cần có các kích thước khác nhau của hình ảnh đó và chúng sẽ lựa chọn hình ảnh với kích thước sao cho phù hợp với kích thước của màn hình làm việc hiện thời.

srcset là một thuộc tính của thẻ <img>, giá trị của thuộc tính này là các url của các phiên bản khác nhau của hình ảnh ở các kích thước khác nhau và mỗi url đi kèm một mô tả giúp trình duyệt có thể lựa chọn 1 hình ảnh phù hợp nhất với kích thước của màn hình.

Ở đây, mô tả x đại diện cho device-pixel-ratio. Ví dụ, thiết bị có độ phân giải 2x sẽ chỉ hiển thị hình ảnh được có mô tả 2x trong thuộc tính srcset.

Khi đó, thuộc tính src vẫn được dùng để sử dụng cho các trình duyệt không hỗ trợ thuộc tính srcset.

Ngày 8. Bảng tra cứu về HTML (HTML Cheatsheet)

Có một số website cung cấp cho bạn mô tả, ví dụ về tất cả các thẻ HTML. Những tài nguyên này là cực kỳ hữu ích phục vụ cho mục đích tra cứu khi cần thiết. Nó phù hợp với những ai đang sử dụng HTML hàng ngày, muốn nhanh chóng nhớ lại công dụng của các thẻ HTML.

https://htmlcheatsheet.com/

https://developer.mozilla.org/enUS/docs/Learn/HTML/Cheatsheet

https://websitesetup.org/html5-periodical-table/

Ngày 9. Tất tần tật về “Trích dẫn”

Chú thích (trích dẫn, dẫn lời, …) là một phần quan trọng trong việc trình bày nội dung. Có một vài thẻ HTML có thể được sử dụng theo ý nghĩa ngữ nghĩa của chúng để hiển thị các trích dẫn trên trang của bạn.

Thẻ <blockquote>:

  • Hiển thị một trích dẫn từ một nguồn khác.
  • Được sử dụng cho các trích dẫn dài.
  • Thuộc tính cite được sử dụng để cung cấp URL của nguồn trích dẫn.

Thẻ <q>:

  • Được dùng để hiển thị các trích dẫn trên 1 dòng (inline).
  • Sử dụng cho các trích dẫn ngắn.
  • Chèn dấu ngoặc kép quanh văn bản đính kèm.

Thẻ <cite>:

  • Được dùng để hiển thị tiêu đề của nguồn được trích dẫn (VD: sách, bài báo khoa học, tạp chí, bài thơ, …)

Ngày 10. Làm nổi bật một phần văn bản

Đã bao giờ bạn muốn làm nổi bật một phần văn bản trên trang web của bạn chưa?

Bạn có thể làm điều này chỉ với HTML, bằng cách sử dụng thẻ <mark> để làm nổi bật phần văn bản bạn muốn gây chú ý với người đọc.

Yếu tố này chủ yếu được sử dụng cùng với các trích dẫn từ các nguồn khác để làm nổi bật phần nội dung liên quan nhất mà bạn muốn làm nổi bật nó và muốn người dùng chú ý tới nó hơn phần còn lại của đoạn trích.

Không nên sử dụng nó cho mục đích *trang trí, làm đẹp*.

Sự khác nhau giữa thẻ <mark> và thẻ <strong> là thẻ <mark> có tác dụng làm nổi bật phần liên quan của văn bản, trong khi thẻ <strong> mang ý nghĩa đánh dấu phần văn bản đó là quan trọng.

Ngày 11. Cho phép kéo thả bất kỳ thành phần HTML nào

Bất kỳ thẻ HTML nào cũng có thể cho phép người dùng kéo (drag) và loại bỏ tính chất gốc của nó. Ví dụ, một thẻ văn bản tính chất mặc định là select phần văn bản của nó (chính là bôi đen văn bản đó). Nhưng khi bạn thêm thuộc tính draggable là true thì bạn sẽ không select văn bản của nó được nữa; Vì khi đó bạn đã cho phép người dùng thực hiện kéo và thả (Drag and drop) thẻ đó.

Nó giống với các sự kiện trong JS như ondragstart, ondragover,… Hình ảnh và URL mặc định có tính chất kéo thả (drag and drop).

Ngày 12. Thẻ progress và thẻ meter

1. Thẻ <progress>

  • Hiển thị thanh tiến trình giúp bạn thấy tiến trình hoàn thành của một nhiệm vụ.⁣⁣
  • Nó có 2 thuộc tính max và value
  • Không có thuộc tính min, giá trị min luôn luôn là 0.

2. Thẻ <meter>

  • Có thể hiển thị cả giá trị thập phân trong phạm vi khai báo trước.
  • Nó không chỉ hiển thị tiến trình, mà còn cho ta thấy các cảnh báo ở các mức giá trị khác nhau
  • Bao gồm các thuộc tính: min, max, high, low, optimum

Ngày 13. Chơi nhạc với HTML

Thẻ <audio> cho phép chúng ta thêm các thêm tài nguyên âm thanh vào trang web mà không cần sử dụng bất kỳ plugin nào khác.

Bạn chỉ cần đặt giá trị cho thuộc tính src là đường dẫn đến file âm thanh.

Một văn bản dự phòng được đính kèm và hiển thị trong trường hợp thẻ audio không được các trình duyệt hỗ trợ.

Theo mặc định, trình duyệt không hiển thị bất kỳ trình điều khiển âm thành nào.

Để thêm các chức năng chơi nhạc cho người dùng như: play, pause, thay đổi âm lượng, … Hãy thêm thuộc tính controls vào thẻ audio.

Ngày 14. Hiển thị “chèn” và “xóa”

Một tính năng mà chúng ta thường dùng đó là hiển thị sự khác nhau giữa các phiên bản của văn bản. Sự khác nhau đó có được do có một phần bị xóa đi và có thành phần mới bổ sung vào.

  • Thẻ <ins> biểu diễn phần văn bản được thêm vào tài liệu
  • Thẻ <del> biểu diễn phần văn bản bị xóa khỏi tài liệu

Hiện nay, 2 thẻ này có thể sử dụng CSS thay thế.

Ngày 15. Ngắt dòng theo ý muốn của bạn

Khi một từ quá dài và bạn không muốn trình duyệt ngắt dòng nó ở vị trí ngẫu nhiên, thẻ <wbr> sẽ giúp bạn ngắt dòng ở vị trí mà bạn muốn.

Thẻ <wpr> sẽ được sử dụng để chỉ định một vị trí hợp lý nơi mà nó sẽ được ngắt dòng.

Ngày 16. HTML Best Practices

Nơi bạn sẽ học được các kinh nghiệm viết mã HTML đúng chuẩn, sáng sủa.

https://github.com/hail2u/html-best-practices

Ngày 17. Color picker và Date picker

Với HTML5, bạn có thể chèm color picker (trình chọn màu) và date picker (chọn thời gian) vào trang web với thẻ <input>.

  • Sử dụng thẻ <input> với thuộc tính type="color" sẽ cung cấp cho người dùng giao diện chọn màu sắc hoặc người dùng cũng có thể nhập giá trị màu chính xác mình muốn.
  • Sử dụng thẻ <input> với thuộc tính type="date" cung cấp giao diện chọn thời gian cho người dùng.

Ngày 18. Cài phím tắt chọn thẻ HTML

Thuộc tính accesskey là một thuộc tính có trong mọi thẻ HTML, nó giúp bạn chỉ định phím tắt để select/activate (lựa chọn) thẻ đó.

Ngày 19. Không cho phép chỉnh sửa thẻ input

Thuộc tính readonly ngăn không cho người dùng được phép sửa giá trị của thẻ input. Điều này làm cho giá trị của thẻ input bất biến.

Nó khác với thuộc tính disabled bởi vì nó tập trung vào yếu tố “không cho chỉnh sửa” chứ không phải là disabled.

Ngày 20. Cách cải thiện khả năng tiếp cận

  • Sử dụng các thẻ HTML đúng theo ngữ cảnh của nó.
  • Một thẻ <label> cần được đi kèm với mọi form control.
  • Văn bản thay thế nên được chỉ định cho hình ảnh (thuộc tính alt)
  • Sử dụng tabindex = "0" để đánh dấu một thẻ không xứng đáng được focus (select).
  • Sử dụng thêm các thuộc tính roles để cung cấp thêm ngữ nghĩa cho thẻ HTML, chẳng hạn như role=”search” cho chức năng tìm kiếm.

Lập Trình Không Khó via Dev.to

Similar Posts