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:
- Header,
<header> - Navigation bar,
<nav> - Main Content,
<main>với thẻ<article>và thẻ<section> - Sidebar,
<aside> - 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.
<div contenteditable="true"> Bạn có thể chỉnh sửa nội dung này! </div>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/612fozew/1/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
<a href="tai-lieu-lap-trinh.pdf" download="LapTrinhKhongKho.pdf"> Download tài liệu </a>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/docvuw8j/1/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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, …
<input list="languages" placeholder="Choose language" /> <datalist id="languages"> <option>Python</option> <option>Javascript</option> <option>Java</option> </datalist>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/6jd0L8gy/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/spfrg05y/4/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
<img srcset="pizza-small.jpg,
pizza-medium.jpg 1.5x,
pizza-large.jpg 2x"
src="pizza-large.jpg"
alt="a slice of cheesy pizza">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://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ơ, …)
<blockquote> The future was uncertain, absolutely, and there were many hurdles, twists, and turns to come, but as long as I kept moving forward, one foot in front of the other, the voices of fear and shame, the messages from those who wanted me to believe that I wasn't good enough, would be stilled. ― Chris Gardner, <cite>The Pursuit of Happyness</cite> </blockquote> <p> <q>The goal isn't to live forever, the goal is to create something that will.</q><br> ― Chuck Palahniuk, <cite>Diary</cite> </p>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/w38zmqb7/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
<p> <q>The goal isn't to live forever, the goal is to <mark>create something</mark> that will. </q><br /> ― Chuck Palahniuk, <cite>Diary</cite> </p>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/8xrh07vs/1/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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).
<p draggable="true"> Drag and Drop me on the other side! </p>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/kp53dqsz/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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
maxvà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
<label for="downdload">Download Progress</label> <progress id="download" max="100" value="50"> </progress> <br/> <label for="temp">Temperature Meter:</label> <meter id="temp" min="0" max="100" low="40" high="60" optimum="80" value="10"> </meter>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/f3qws0c5/3/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
<audio controls src="dope_music.mp3"> Your browser does not support the audio element. </audio>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/9hsjckxy/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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ế.
<p>Go to a <del>movie</del> <ins>conference</ins> this weekend. </p>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/wzmuvcxp/1/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/c9k6expa/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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ínhtype="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ínhtype="date"cung cấp giao diện chọn thời gian cho người dùng.
<label>Choose Color: </label> <input type="color" value="#ffffff" /> <br/> <label>Choose date: </label> <input type="date" value="" />
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/jy2kez6w/6/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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ẻ đó.
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/rxysmquk/3/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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.
[wpcc-iframe loading=”lazy” width=”100%” height=”300″ src=”https://jsfiddle.net/nguyenvanhieu/qfan58oj/embedded/html,result/” allowfullscreen=”allowfullscreen” allowpaymentrequest frameborder=”0″]
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
Để lại một bình luận