Thuộc tính HTML là gì?
HTML (HyperText Markup Language) sử dụng thuộc tính để cung cấp thêm thông tin về các phần tử trên trang web. Thuộc tính nằm trong thẻ mở của phần tử và thường có giá trị xác định.
Ví dụ:
<a href="https://www.example.com">Liên kết</a>
Trong ví dụ trên, href là thuộc tính của thẻ <a>, xác định URL mà liên kết sẽ dẫn đến.
Sử dụng thuộc tính đúng cách giúp:
-
Tăng khả năng truy cập (Accessibility)
-
Tối ưu hóa SEO
-
Cải thiện trải nghiệm người dùng
Bảng các thuộc tính HTML
Dưới đây là danh sách các thuộc tính HTML phổ biến cùng mô tả ngắn gọn:
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
href |
URL liên kết hoặc tài nguyên | <a href="https://example.com">Liên kết</a> |
src |
Nguồn tập tin (ảnh, video, audio, script) | <img src="image.jpg" alt="Mô tả"> |
alt |
Văn bản thay thế cho hình ảnh | <img src="logo.png" alt="Logo công ty"> |
id |
Định danh duy nhất cho phần tử | <div id="header"></div> |
class |
Lớp CSS để định dạng | <p class="text-bold">Nội dung</p> |
title |
Mô tả khi di chuột lên phần tử | <a href="#" title="Chi tiết">Xem thêm</a> |
target |
Nơi mở liên kết (_blank, _self, ...) | <a href="#" target="_blank">Mở tab mới</a> |
placeholder |
Văn bản hiển thị khi input trống | <input type="text" placeholder="Nhập tên"> |
required |
Bắt buộc nhập liệu | <input type="email" required> |
checked |
Chọn trước checkbox hoặc radio | <input type="checkbox" checked> |
disabled |
Vô hiệu hóa phần tử | <button disabled>Không nhấn được</button> |
autofocus |
Tự động tập trung khi trang tải | <input type="text" autofocus> |
maxlength |
Giới hạn ký tự nhập liệu | <input type="text" maxlength="50"> |
min |
Giá trị nhỏ nhất cho input số hoặc ngày | <input type="number" min="1"> |
max |
Giá trị lớn nhất cho input số hoặc ngày | <input type="number" max="10"> |
step |
Bước nhảy cho input số hoặc ngày | <input type="number" step="2"> |
pattern |
Biểu thức chính quy cho input | <input type="text" pattern="[A-Za-z]{3,}"> |
value |
Giá trị mặc định hoặc nhập liệu | <input type="text" value="Hello"> |
name |
Tên phần tử khi gửi biểu mẫu | <input type="text" name="username"> |
form |
Liên kết input với form khác | <input type="text" form="form1"> |
action |
URL gửi biểu mẫu | <form action="/submit"></form> |
method |
Phương thức gửi biểu mẫu (GET, POST) |
<form method="POST"></form> |
enctype |
Kiểu mã hóa biểu mẫu | <form enctype="multipart/form-data"></form> |
novalidate |
Vô hiệu hóa kiểm tra form tự động | <form novalidate></form> |
autocomplete |
Bật/tắt điền tự động | <input type="email" autocomplete="off"> |
rel |
Quan hệ liên kết (stylesheet, nofollow) | <link rel="stylesheet" href="style.css"> |
media |
Loại thiết bị cho stylesheet | <link rel="stylesheet" media="screen" href="style.css"> |
download |
Tải xuống tập tin khi nhấp | <a href="file.pdf" download>Tải về</a> |
charset |
Bảng mã ký tự | <meta charset="UTF-8"> |
content |
Nội dung meta tag | <meta name="description" content="Mô tả website"> |
http-equiv |
Tương tự header HTTP | <meta http-equiv="refresh" content="30"> |
lang |
Ngôn ngữ của phần tử | <html lang="vi"> |
dir |
Hướng văn bản (ltr, rtl) |
<p dir="rtl">Văn bản từ phải sang trái</p> |
hidden |
Ẩn phần tử | <div hidden>Ẩn nội dung</div> |
draggable |
Cho phép kéo thả phần tử | <div draggable="true">Kéo tôi</div> |
contenteditable |
Cho phép chỉnh sửa nội dung | <p contenteditable="true">Chỉnh sửa tôi</p> |
tabindex |
Thứ tự focus khi tab | <button tabindex="1">Nút 1</button> |
spellcheck |
Bật/tắt kiểm tra chính tả | <input type="text" spellcheck="true"> |
loop |
Lặp video/audio tự động | <video src="video.mp4" loop></video> |
autoplay |
Phát video/audio tự động | <audio src="music.mp3" autoplay></audio> |
controls |
Hiển thị điều khiển media | <video src="video.mp4" controls></video> |
muted |
Tắt âm | <video src="video.mp4" muted></video> |
poster |
Hình hiển thị trước khi video phát | <video src="video.mp4" poster="poster.jpg"></video> |
srcset |
Nguồn ảnh đa kích thước | <img src="img.jpg" srcset="img-2x.jpg 2x"> |
sizes |
Kích thước tương ứng với điều kiện media | <img src="img.jpg" sizes="(max-width:600px) 480px, 800px"> |
usemap |
Liên kết đến bản đồ ảnh | <img src="map.jpg" usemap="#map1"> |
coords |
Tọa độ vùng ảnh trong <map> |
<area shape="rect" coords="34,44,270,350"> |
shape |
Hình dạng vùng ảnh | <area shape="circle" coords="50,50,40"> |
open |
Mở <details> mặc định |
<details open><summary>Chi tiết</summary></details> |
selected |
Chọn trước <option> |
<option selected>Chọn tôi</option> |
high |
Giá trị cao nhất <meter> |
<meter min="0" max="100" high="80"></meter> |
low |
Giá trị thấp nhất <meter> |
<meter min="0" max="100" low="20"></meter> |
optimum |
Giá trị tối ưu <meter> |
<meter min="0" max="100" optimum="50"></meter> |
cols |
Số cột textarea hoặc bảng | <textarea cols="30"></textarea> |
rows |
Số hàng textarea | <textarea rows="5"></textarea> |
colspan |
Số cột ô bảng chiếm | <td colspan="2">Nội dung</td> |
rowspan |
Số hàng ô bảng chiếm | <td rowspan="3">Nội dung</td> |
for |
Nhãn input trong <label> |
<label for="email">Email</label> |
list |
Liên kết input với <datalist> |
<input list="browsers"><datalist id="browsers"></datalist> |
kind |
Loại phụ đề <track> |
<track kind="subtitles" src="sub.vtt"> |
label |
Nhãn <track> hoặc <option> |
<option label="Nam" value="M">Nam</option> |
Lưu ý: Một số thuộc tính đã lỗi thời (ví dụ:
align,bgcolor) và nên thay bằng CSS.
Cách sử dụng thuộc tính HTML hiệu quả
- Thuộc tính mặc định: Một số thuộc tính như
checkedhoặcdisabledkhông cần giá trị. Ví dụ:
<input type="checkbox" checked>
- Thuộc tính có giá trị: Hầu hết thuộc tính yêu cầu giá trị cụ thể, ví dụ:
<img src="image.jpg" alt="Mô tả hình ảnh">
- Thuộc tính tùy chỉnh: Sử dụng
data-*để lưu trữ dữ liệu riêng biệt mà không ảnh hưởng đến HTML hoặc CSS.
<div data-user-id="12345">Người dùng</div>
- Thuộc tính HTML5 nâng cao: HTML5 hỗ trợ nhiều thuộc tính mới như
autofocus,required,placeholder,novalidate, giúp trải nghiệm form tốt hơn.
Tối ưu SEO với thuộc tính HTML
-
Alt text cho hình ảnh giúp Google hiểu nội dung ảnh và tăng SEO.
-
Sử dụng title và aria-label tăng khả năng truy cập.
-
Thuộc tính như
rel="nofollow"hoặctarget="_blank"giúp quản lý liên kết. -
Dữ liệu có cấu trúc (
data-*,itemprop) giúp công cụ tìm kiếm hiểu rõ nội dung.
Tham khảo thêm
Kết luận
Thuộc tính HTML đóng vai trò cốt lõi trong việc xây dựng trang web chuẩn SEO và thân thiện với người dùng. Việc nắm vững cách sử dụng các thuộc tính cơ bản và nâng cao sẽ giúp bạn:
-
Cải thiện khả năng truy cập cho mọi đối tượng người dùng
-
Tối ưu hóa SEO on-page, giúp công cụ tìm kiếm hiểu rõ nội dung
-
Nâng cao trải nghiệm người dùng, làm trang web trực quan và tiện lợi hơn
Phản hồi (0)