Bài 5: Các thuộc tính HTML

Các thuộc tính cung cấp thêm thông tin cho các phần tử HTML.

Các thuộc tính của HTML

Các phần tử HTML có tập các thuộc tính (attributes)
Các thuộc tính cung cấp thêm các thông tin cho một phần tử
Các thuộc tính luôn luôn nằm trong thẻ bắt đầu
Các thuộc tính được đặt trong cặp tên/giá trị như sau: name=”value”

Thuộc tính ngôn ngữ “lang”

Ngôn ngữ của tài liệu có thể khai báo trong thẻ <html>.

Các ngôn ngữ được khai báo trong thuộc tính lang.

Khai báo một ngôn ngữ là rất quan trọng cho các ứng dụng đọc màn hình (screen reader) và công cụ tìm kiếm:

<!DOCTYPE html>
<html lang=“en-US”>
<body>
<h1>Tiêu đề đầu tiên</h1>
<p>Đoạn đầu tiên.</p></body>
</html>

Hai chữ cái đầu xác định ngôn ngữ (ví dụ en). Nếu một ngôn ngữ có thể sử dụng nhiều nước khác nhau như tiếng anh Anh, tiếng anh Mỹ, thì sử dụng hai chữ cái (ví dụ US).

Thuộc tính tiêu đề “title”

Các đoạn văn bản của HTML được xác định trong cặp thẻ <p> .

Xem trong ví dụ dưới đây, trong thẻ <p> có thuộc tính title. Giá trị của thuộc tính là: “Về website Tìm ở đây“:

Ví dụ

<p title=“Website Tìm ở đây”>
Tìm ở đây là một site cung cấp kiến thức các nhà phát triển ứng dụng Web.
Nó cung cấp các hướng dẫn và tài liệu tham khảo bao gồm nhiều vấn đề của lập trình web,
bao gồm: HTML, CSS, JavaScript, XML, SQL, PHP, ASP, v.v.
</p>

	Khi bạn di chuyển chuột đến các phần tử, nội dung của thuộc tính title sẽ hiển thị dưới dạng như một chú giải (tooltip).

Thuộc tính href

Các liên kết (links) HTML được xác định bởi cặp thẻ <a>. Địa chỉ liên kết được xác định trong thuộc tính href

Ví dụ

<a href=“https://timoday.edu.vn”>Website tìm ở đây</a>

Bạn sẽ học thêm một các liên kết và các thẻ <a> trong các bài học sau.

Các thuộc tính về kích thước

Các hình ảnh trong HTML được xác định bởi thẻ <img> .

tệp nguồn (src), và kích thước các ảnh (rộng và cao) được cung cấp như các thuộc tính:

Ví dụ

Kích thước của các ảnh được xác định các pixel, width =”104″ nghĩa là độ rộng ảnh trên màn hình 104 pixel.

Bạn sẽ học thêm về thẻ <img> trong bài sau.

Thuộc tính alt

Các thuộc tính alt xác định một đoạn văn bản được sử dụng thay thế, Khi đó phần tử HTML sẽ không hiển thị giá trị của thuộc tính này.

Các giá trị của thuộc tính có thể đọc bởi “phần mềm đọc màn hình“.

Ví dụ

Khuyên: Nên sử dụng các thuộc tính chữ thường

Chuẩn HTML5 không yêu cầu tên các thuộc tính là chữ thường.

Tiêu đề các thuộc tính có thể viết bằng chữ hoa hay chữ như tiêu đề.

W3C kiến nghị chữ thường trong HTML4 và yêu cầu chữ thường khắt khe hơn cho các tài liệu như XHTML.

	Chữ thường là phổ biến nhất. Chữ thường dễ đánh hơn.

Khuyên: luôn luôn có dấu nháy kép cho giá trị thuộc tính

Chuẩn HTML5 không yêu cầu dấu nháy kép quanh giá trị các thuộc tính.

Thuộc tính href trình bày ở trên có thể viết như sau:

Ví dụ

W3C kiến nghị sử dụng dấu nháy kép cho giá trị thuộc tính trong HTML4, và yêu cầu khắt khe hơn như các tài liệu kiểu XHTML.

Đôi khi là cần thiết sử dụng dấu nháy kép. Như trường hợp hiển thị không chính xác khi phần giá trị của thuộc tính chứa một khoảng trống:

Ví dụ

	Sử dụng dấu nháy kép là phổ biến nhất. Không dùng dấu nháy kép có thể xảy ra lỗi.

Sử dụng nháy đơn hay nháy kép?

Dấu nháy kép là thông dụng nhất trong HTML, tuy nhiên dấu nháy đơn vẫn có thể được sử dụng.

Trong một số trường hợp, khi các giá trị thuộc tính của nó chứa dấu nháy kép, thì nó cần phải sử dụng thêm dấu nháy đơn:

Hoặc ngược lại:

Tóm tắt nội dung bài học

Các phần tử trong HTML có thể có nhiều thuộc tính.
Thuộc tính title cung cấp thêm thông tin”chú giải”.
Thuộc tính href cung cấp địa chỉ liên kết.
Thuộc tính width và height cung cấp thông tin kích thước của các bức ảnh.
Thuộc tính alt cung cấp văn bản cho phần mềm đọc màn hình.
Nên sử dụng chữ thường cho tên của các thuộc tính trong HTML.
Luôn khai báo giá trị các thuộc tính trong dấu nháy kép.

Các thuộc tính của HTML

Dưới đây là bảng danh sách các thuộc tính hay sử dụng trong HTML:

Thuộc tính	Mô tả
alt	Chỉ định một văn bản thay thế cho hình ảnh
disabled	Chỉ định phần tử đầu vào bị vô hiệu hóa
href	Chỉ đinh địa chỉ URL (địa chỉ trang web) của một liên kết
id	Chỉ đinh một id duy nhất cho một phần tử
src	Chỉ định một địa chỉ URL (địa chỉ trang web) cho một hình ảnh
style	Chỉ định một kiểu CSS cho một phần tử
title	Chỉ định thêm thông tin cho phần từ( hiển thị như một chú giải)
value	Chỉ định giá trị (nội dung) được hiển thị trên các thẻ đầu vào như thẻ input