Cách sử dụng HTML Attributes (thuộc tính)

Học cách dùng thuộc tính HTML, qua các tên và giá trị thuộc tính phổ biến.

HTML Attributes là gì?

Trong HTML, attributes (thuộc tính) là công cụ chỉnh sửa dùng thêm thông tin cho phần tử HTML hoặc thay đổi hành vi mặc định (out of the box).

Phần tử HTML không có thuộc tính:

<tag>Nội dung</tag>

Phần tử HTML có thuộc tính:

<tag attribute="value">Nội dung</tag>

Với mô hình đó, xem ví dụ thực tế.

Thuộc tính href

href là thuộc tính quan trọng nhất HTML.

href chỉ định URL cho:

• Siêu liên kết (links).
• Nhập tài nguyên ngoài: style, script.

Dùng phổ biến href thêm URL link trên anchor <a>:

<a href="url-path">Text link</a>

Link cho phép người dùng nhấp chuyển trang, nội bộ (cùng domain) hoặc ngoài (domain khác).

Liên kết nội bộ

Link nội bộ dùng đường dẫn tương đối:

<a href="/">Trang chủ</a>

Chuẩn "/" dẫn đến trang chủ bất kỳ web nào, là trang index.html.

Nếu trang Giới thiệu file about.html, link nội bộ:

<a href="/about">Giới thiệu</a>

Link đến trang About TechStacker

Liên kết ngoài

Link ngoài cần đường dẫn tuyệt đối:

<a href="https://www.youtube.com">Đi YouTube.com</a>

Thuộc tính target

Khi làm việc với anchor, xem thuộc tính quan trọng khác: target.

target chỉ định nơi mở link khi nhấp.

Ví dụ, nhấp link ngoài dưới, đến YouTube cùng tab:

<a href="https://www.youtube.com/">Đi YouTube.com</a>

Đi YouTube.com

Xảy ra vì mặc định <a> có target="_self" — mở trong cùng cửa sổ.

Link này:

<a href="https://www.youtube.com/"></a>

Được máy đọc như:

<a href="https://www.youtube.com/" target="_self"></a>

Muốn mở tab mới? Ghi đè _self bằng _blank:

<a href="https://www.youtube.com" target="_blank" rel="noopener" >Đi YouTube.com (mở tab mới)</a >

Bây giờ link YouTube mở tab mới:

Đi YouTube.com (tab mới)

Tôi quảng bá kênh YouTube:

Link kênh YouTube (TechStacker).

Đọc thêm về anchor/link.

Thuộc tính không có giá trị

Thuộc tính thường có tên và giá trị, như anchor.

Nhưng đôi khi giá trị (hành vi) tích hợp trong tên.

Ví dụ defer sửa <script>:

<script defer src="app.js"></script>

defer không có = hay giá trị vì hành vi tích hợp.

defer là boolean. Boolean cho dữ liệu 2 giá trị: true/false (enable/disable).

Xem kỹ defer.

<script> không defer thực thi JS từ src app.js ngay khi trình duyệt tải:

<script src="app.js"></script>

Mặc định HTML parse từ trên xuống, từng dòng. JS ở đầu chạy trước khi parse xong.

Đó là hành vi mặc định script.

Thêm defer vào <script> vô hiệu hóa mặc định:

<script defer src="app.js"></script>

Bây giờ JS không chạy cho đến khi trang tải xong.

Nghĩa đen defer = trì hoãn/đợi.

• Không defer, JS chạy ngay tải xong.
• Có defer, JS đợi chạy sau khi HTML tải xong.

Nếu thuộc tính gây bối rối, đừng lo, hiểu gấp 10 lần khi thực hành.

Thuộc tính tùy chỉnh

Có thể tạo custom attributes, kiểm soát bằng JavaScript. Tên custom attribute phải có tiền tố data-:

<tag data-custom-attribute-name="value">Nội dung</tag>

Ví dụ, phần tử thức ăn "Táo". Nhấp vào hiển thị loại trong popup.

Tạo custom attribute food-type (nhớ data-) thêm vào <div> với text Táo:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Táo </div>

JavaScript làm tính năng hoạt động:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

Demo tại đây.

Cách HTML hoạt động:

• Thêm onclick vào <div>. Thuộc tính sự kiện gắn listener lắng nghe click!
• Gán giá trị showDetailsBox(this) cho onclick.
• showDetailsBox() tên hàm JS gọi khi nhấp Táo.
• this trong (this) tham số tham chiếu đối tượng nó thuộc về (this hơi nâng cao, không sao nếu chưa hiểu).
• id thuộc tính tích hợp chỉ định ID duy nhất. Đây ID là apple.

Cách JavaScript hoạt động ngoài phạm vi hướng dẫn HTML, giải thích đơn giản:

Khi showDetailsBox() gọi bởi onclick, chạy khối { ... }:

function showDetailsBox(food) { ... }

Dòng đầu, JS chọn phần tử có data-food-type, gán vào biến foodType:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") ... }

Dòng 2 chạy alert() hiện popup giá trị foodType là fruit:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

Đừng lo nếu chưa hiểu hết, nhiều thứ tiêu hóa, đặc biệt người mới. Thực hành sẽ hiểu!

Tham khảo MDN web docs HTML attribute reference.

Quan trọng: Đừng lưu nội dung quan trọng cần hiển thị/truy cập trong data attributes, vì công nghệ hỗ trợ đôi khi không truy cập. Crawler có thể không index giá trị data attributes — đừng đặt nội dung SEO quan trọng ở đây.