HTML Thuộc Tính

Thuộc Tính Là Gì

Thuộc tính giúp cung cấp thông tin thêm cho phần tử. Mỗi phần tử HTML có thể có một hoặc nhiều thuộc tính khác nhau.

Ở ví dụ dưới đây phần tử a có hai thuộc tính là hreftitle:

<a href="https://www.codehub.vn" title="CodeHub.vn">Trang chủ codehub.vn</a>

Chạy Thử

Thuộc tính của phần tử:

  • Giúp cung cấp thêm thông tin về phần tử.
  • Mỗi thuộc tính được biểu diễn theo dạng: tên_thuộc_tính = "giá_trị_thuộc_tính". Ví dụ: href="https://www.codehub.vn".
  • Thuộc tính (đi kèm với giá trị) luôn được đặt ở thẻ mở.
  • Mỗi phần tử HTML có thể có một hoặc nhiều thuộc tính khác nhau. Ở ví dụ trên phần tử a có hai thuộc tính là hreftitle.

Ở phần tiếp theo dưới đây chúng ta sẽ tìm hiểu một số thuộc tính phổ biến hay sử dụng.

Thuộc Tính href (Phần Tử a)

Thuộc tính href của phần tử a được dùng để xác định địa chỉ của liên kết HTML:

<a href="https://www.codehub.vn">Trang chủ codehub.vn</a>

Chạy Thử

Thuộc Tính title (Phần Tử a)

Thuộc tính title của phần tử a được dùng để thiết lập tiêu đề cho liên kết HTML.

<a href="https://www.codehub.vn" title="CodeHub.vn">Trang chủ codehub.vn</a>

Chạy Thử

Khi liên kết trên được hiển thị trên trình duyệt, nếu bạn rê chuột lên liên kết thì trình duyệt lúc này sẽ hiển thị một hộp thoại nhỏ với nội dung là giá trị của thuộc tính title.

Thuộc tính src (Phần Tử img)

Thuộc tính src của phần tử img được dùng để xác định vị trí của hình ảnh.

<img src="https://www.codehub.vn/img/logo.png">

Chạy Thử

Chúng ta có thể bỏ qua phần tên miền và giao thức (http hoặc https) nếu như địa chỉ của hình ảnh và địa chỉ của trang HTML chứa ảnh này thuộc cùng một website:

<img src="/img/logo.png">

Cách sử dụng địa chỉ như trên còn được gọi là địa chỉ tương đối và chỉ hoạt động được nếu như địa chỉ trang HTML và địa chỉ hình ảnh nằm trên cùng một website (cùng tên miền và giao thức). Ngược lại địa chỉ được gọi là tuyệt đốinếu bạn tham chiếu đầy đủ tên miền và giao thức như ví dụ trước đó.

Thuộc Tính title (Phần Tử img)

Thuộc tính title của phần tử img được dùng để xác định tiêu đề của hình ảnh.

<img src="https://www.codehub.vn/img/logo.png" title="Logo CodeHub.vn">

Chạy Thử

Khi ảnh trên được hiển thị trên trình duyệt, nếu bạn rê chuột lên ảnh thì trình duyệt lúc này sẽ hiển thị một hộp thoại nhỏ với nội dung là giá trị của thuộc tính title.

Thuộc Tính alt (Phần Tử img)

Thuộc tính alt của phần tử img dùng để mô tả tóm tắt nội dung hình ảnh và sẽ được hiển thị trong trường hợp trình duyệt không hiển thị được ảnh (ví dụ liên kết của ảnh không đúng hoặc địa chỉ ảnh không hợp lệ hoặc không tồn tại..).

<img src="https://www.codehub.vn/img/logo.png" alt="Logo CodeHub.vn">

Chạy Thử

Lưu ý: Thuộc tính alt thường được đánh giá có mức độ quan trọng hơn thuộc tính title vì nó được sử dụng bởi các thiết bị screen reader dành cho người khiếm thị, ngoài ra cách máy tìm kiếm như Google, Bing.. cũng sử dụng thuộc tính này để xác định nội dung của hình ảnh.

Thuộc Tính widthheight (Phần Tử img)

Thuộc tính widthheight của phần tử img dùng để xác định chiều cao của hình ảnh.

<img src="https://www.codehub.vn/img/logo.png" width="200px" height="200px">

Chạy Thử

Ảnh trên sẽ có chiều rông là 200 pixel (đọc là /píc-xeo/) và chiều cao là 200 pixel. Mỗi pixel tương ứng một dấu chấm trên màn hình máy tính. Độ rộng và độ cao của pixel ứng với độ phân giải màn hình máy tính.

Ngoài pixel bạn có thể sử dụng đơn vị là centimet (cm) hoặc point (pt)... với 1pt = 0.035.cm.

Nếu không có đơn vị nào được đưa vào giá trị của thuộc tính width hoặc height thì đơn vị mặc định pixel sẽ được sử dụng:

Ví dụ đoạn mã HTML dưới đây tương đương với ví dụ phía trước:

<img src="https://www.codehub.vn/img/logo.png" width="200" height="200">

Đặt Giá Trị Thuộc Tính Trong Dấu Nháy

Bạn nên đặt giá trị của thuộc tính trong cặp dấu nháy đơn hoặc nháy kép:

<a href='https://www.codehub.vn'>Trang chủ codehub.vn</a>

Hoặc:

<a href="https://www.codehub.vn">Trang chủ codehub.vn</a>

Mặc dù điều này là không bắt buộc trong HTML và bạn có thể không sử dụng dấu nháy và bạn hoàn toàn có thể viết mã HTML như sau:

<a href=https://www.codehub.vn>Trang chủ codehub.vn</a>

Tuy nhiên bạn nên sử dụng dấu nháy vì trong một số trường hợp không sử dụng dấu nháy sẽ có thể gây ra lỗi.

Ví dụ dưới đây giá trị của thuộc tính title sẽ không phải là Trang Chủ:

<a href="https://www.codehub.vn" title=Trang Chủ>Trang chủ codehub.vn</a>

Ngoài ra bạn cũng nên sử dụng "" thay vì '' vì cách này được sử dụng phổ biến. Tuy nhiên cần linh hoạt trong một số trường hợp.

Ví dụ nếu trong giá trị của thuộc tính có dấu nháy kép thì bạn nên sử dụng dấu nháy đơn:

<a href="https://www.codehub.vn" title='"CodeHub.vn"'>Trang chủ codehub.vn</a>

Nếu bạn vẫn muốn sử dụng dấu nháy kép trong trường hợp trên thì bạn cần thoát ký tự đặc biệt này bằng cách đặt trước nó ký tự \ như sau:

<a href="https://www.codehub.vn" title="\"CodeHub.vn\"">Trang chủ codehub.vn</a>
Content must not be empty

Related Tutorial