Những Thuộc Tính HTML Bạn Cần Nắm Rõ

Bạn đã bao giờ tự hỏi có bao nhiêu thuộc tính trong HTML mà bạn không biết? Trong bài viết này, chúng ta sẽ cùng nhau khám phá và tìm hiểu một số thuộc tính quan trọng thường được sử dụng trong HTML. Một số thuộc tính như src, alt, type, name hay autocomplete có thể đã rất quen thuộc với bạn, nhưng còn nhiều thuộc tính khác có thể bạn chưa từng nghe đến như poster, srcset, spellcheck, và nhiều hơn nữa.

Thuộc Tính HTML Là Gì?

Trong HTML, thuộc tính (hay attributes) là những thông tin bổ sung giúp mô tả và điều chỉnh hành vi của các phần tử. Chúng ta hãy cùng điểm qua một số thuộc tính phổ biến trong HTML và cách sử dụng chúng.

1. Accept

Thuộc tính accept được sử dụng với phần tử <input> khi cho phép tải lên file. Nó chỉ định kiểu file mà máy chủ có thể chấp nhận.

<input type="file" accept=".jpg, .jpeg, .png">

2. Alt

Thành phần <img> kết hợp với thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, giúp bảo đảm trải nghiệm người dùng tốt hơn khi hình ảnh không thể tải.

<img src="hinhanh.png" alt="Tranh phong cảnh">

3. Autocomplete

Thuộc tính autocomplete có thể áp dụng cho các thẻ <form>, <input>, và <textarea> để điều khiển tính năng tự động điền của trình duyệt.

<input type="text" name="name" autocomplete="on" />

4. Contenteditable

contenteditable cho phép người dùng chỉnh sửa nội dung bên trong phần tử. Đây là thuộc tính toàn cục, có thể áp dụng cho mọi phần tử HTML.

<div contenteditable="true">Nội dung này có thể chỉnh sửa được</div>

5. Download

Sử dụng thuộc tính download với thẻ <a> để yêu cầu trình duyệt tải về nội dung liên kết thay vì điều hướng đến nó.

<a href="document.pdf" download="document.pdf">Tải PDF</a>

6. Hidden

hidden giúp bạn ẩn một phần tử trên trang mà vẫn tồn tại trong cấu trúc DOM, có thể được điều khiển hiển thị qua JavaScript hoặc CSS.

<div hidden>Đây là nội dung bị ẩn</div>

7. Loading

Thuộc tính loading cho phép bạn kiểm soát cách tải hình ảnh, với ba giá trị “eager,” “lazy,” và “auto.”

<img src="image.png" loading="lazy" />

8. Multiple

Bạn có thể dùng thuộc tính multiple để cho phép người dùng chọn hoặc nhập nhiều giá trị cùng một lúc cho thẻ <input> và <select>.

<input type="file" multiple />
<select multiple>
   <option value="java">Java</option>
   <option value="javascript">JavaScript</option>
   <option value="typescript">TypeScript</option>
</select>

9. Poster

poster, khi áp dụng với thẻ <video>, sẽ hiển thị một hình ảnh tĩnh cho đến khi video được phát.

<video controls poster="image.png" width="500">
   <source src="video.mp4" type="video/mp4" />
</video>

10. Readonly

Bạn có thể dùng thuộc tính readonly trên thẻ <input> để chỉ định rằng người dùng không thể chỉnh sửa nội dung bên trong phần tử đó.

<input type="text" value="This is readonly." readonly />

11. Srcset

Sử dụng srcset trong các thẻ <img> và <source> giúp trình duyệt chọn hình ảnh phù hợp với kích thước màn hình của người dùng.

<img src="hinhanh.png" srcset="hinhanh.png, hinhanh-2x.png, hinhanh-3x.png">

12. Spellcheck

spellcheck sẽ bật hoặc tắt tính năng kiểm tra chính tả cho các thẻ <input> và <textarea>.

<input type="text" spellcheck="false" />

13. Title

Thành phần title cung cấp thêm thông tin cho người dùng và hiển thị khi người dùng di chuột qua phần tử.

<a href="document.pdf" title="Nhấn để tải">Tải File</a>

Kết Luận

Hy vọng rằng danh sách các thuộc tính trên sẽ giúp bạn nắm rõ hơn về HTML và tối ưu hóa hiệu suất cũng như cải thiện trải nghiệm người dùng cho trang web của bạn. Việc hiểu rõ các thuộc tính này sẽ là một lợi thế lớn trong việc phát triển và tối ưu hóa mã nguồn của bạn. Hãy cùng ghi chú lại và áp dụng vào dự án của mình nhé!

Nguồn tham khảo: developer.mozilla.org

Tìm kiếm ý kiến phản hồi về bài viết của tôi? Hãy cho tôi biết bạn nghĩ gì! ❤️
source: viblo