Nhìn vào hình dưới thì có bao nhiêu attributes bạn thấy quen thuộc? Một vài attributes đã quá quen thuộc như src, alt, type, name hay autocomplete còn một vài có vẻ khá lạ vì có khi chúng ta chưa dùng đến chúng bao giờ poster, srcset, spellcheck, ...
Attributes
Trong HTML, các thuộc tính (attributes) được sử dụng để cung cấp thêm thông tin về các phần tử HTML. Trong bài đăng này, cùng điểm lại cũng như tìm hiểu thêm về định nghĩa của một số attributes trong HTML nào.
Bắt đầu thôi 🚀🚀🚀
Accept
Bạn có thể sử dụng thuộc tính accept với phần tử <input> (chỉ dành cho tệp) để chỉ định loại tệp mà máy chủ có thể chấp nhận.
<input type="file" accept=".jpg, .jpeg, .png">
Alt
Bạn có thể sử dụng thuộc tính alt với phần tử <img> để chỉ định văn bản thay thế trong trường hợp hình ảnh không thể hiển thị trên trang web.
<img src="hinhanh.png" alt="Tranh phong cảnh">
Autocomplete
Bạn có thể sử dụng thuộc tính autocomplete với các thẻ <form>, <input> và <textarea> để kiểm soát tính năng tự động điền dữ liệu của trình duyệt.
<input type="text" name="name" autocomplete="on" />
Contenteditable
Bạn có thể sử dụng thuộc tính contenteditable để chỉ định xem nội dung của phần tử có thể chỉnh sửa được hay không. Nó cho phép người dùng sửa đổi nội dung trong phần tử.
Đây là thuộc tính toàn cục, có nghĩa là bạn có thể sử dụng thuộc tính này với tất cả các phần tử HTML.
<div contenteditable="true">Nội dung này có thể chỉnh sửa được</div>
Download
Bạn có thể sử dụng thuộc tính download với thẻ <a> để chỉ định rằng khi người dùng nhấp vào liên kết, tài nguyên được liên kết sẽ được tải xuống thay vì điều hướng.
<a href="document.pdf" download="document.pdf">Tải PDF</a>
Hidden
Bạn có thể sử dụng thuộc tính hidden để ẩn phần tử trên trang web. Thuộc tính này rất có ích khi kiểm soát khả năng việc hiển thị khi dùng JavaScript hoặc CSS.
Đây là thuộc tính toàn cục, có nghĩa là bạn có thể sử dụng thuộc tính này với tất cả các phần tử HTML.
<div hidden>Đây là nội dung bị ẩn</div>
Loading
Bạn có thể sử dụng thuộc tính loading với thẻ <img> để kiểm soát cách trình duyệt tải hình ảnh. Có ba giá trị: “eager,” “lazy,” and “auto”.
<img src="image.png" loading="lazy" />
Multiple
Bạn có thể sử dụng thuộc tính multiple với các thẻ <input> và <select> để cho phép người dùng chọn/nhập nhiều giá trị cùng một lúc.
<input type="file" multiple />
<select multiple> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="typescript">TypeScript</option>
</select>
Poster
Bạn có thể sử dụng thuộc tính poster với thẻ <video> để hiển thị hình ảnh cho đến khi người dùng phát video.
<video controls poster="image.png" width="500"> <source src="video.mp4" type="video/mp4" />
</video>
Readonly
Bạn có thể sử dụng thuộc tính readonly với thẻ <input> để chỉ định phần tử đó ở chế độ chỉ đọc, không thể chỉnh sửa.
<input type="text" value="This is readonly." readonly />
Srcset
Bạn có thể sử dụng thuộc tính srcset với các thẻ <img> và <source> (trong <picture>) để cung cấp danh sách các nguồn hình ảnh. Điều này giúp trình duyệt chọn các hình ảnh khác nhau cho các kích thước màn hình khác nhau.
<img src="hinhanh.png" srcset="hinhanh.png, hinhanh-2x.png, hinhanh-3x.png">
Spellcheck
Bạn có thể sử dụng thuộc tính spellcheck với các thẻ <input> (ngoại trừ mật khẩu), các phần tử có thể chỉnh sửa nội dung và phần tử <textarea> để bật hoặc tắt tính năng kiểm tra chính tả của trình duyệt.
<input type="text" spellcheck="false" />
Title
Bạn có thể sử dụng thuộc tính title để cung cấp thêm thông tin về một phần tử. Thông tin này thường được hiển thị khi người dùng di chuột qua phần tử.
Đây là thuộc tính toàn cục, có nghĩa là bạn có thể sử dụng thuộc tính này với tất cả các phần tử HTML.
<a href="document.pdf" title="Nhấn để tải">Tải File</a>
Kết
Sau bài viết, những thuộc tính trên mình nghĩ là NÊN cần biết, cùng ghi chú lại để có thể tối ưu code và ứng dụng của bạn nhé!
Nguồn tham khảo: developer.mozilla.org
Find me: bunhere.com
I am always looking for feedback on my writing, so please let me know what you think. ❤️