Các thuộc tính HTML

Thuộc tính cung cấp các thông tin bổ sung cho các thẻ HTML.

Thuộc tính HTML

  • Các thẻ HTML có thể khai báo thêm các thuộc tính
  • Các thuộc tính cung cấp thêm các thông tin cần thiết cho thẻ
  • Thuộc tính luôn được viết trong thẻ mở
  • Thuộc tính đi thành cặp thuộc_tính/giá_trị dạng: thuộc_tính="giá_trị"

Thuộc tính lang

Thuộc tính lang được khai báo trong thẻ mở <html>.

Thuộc tính này khai báo ngôn ngữ của tài liệu HTML.

Khai báo ngôn ngữ giúp ích nhiều cho các ứng dụng khác khi muốn truy cập vào tài liệu (như máy tìm kiếm chẳng hạn).

Ví dụ:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Hai kí tự đầu nói về ngôn ngữ (en), còn hai kí tự sau nói về nhánh ngôn ngữ (US - đất nước sử dụng).

Thuộc tính title

Thuộc tính title dùng để định nghĩa tiêu đề của một thành phần HTML.

Khi duyệt web, bạn di chuột tới thành phần nào của trang, một tooltip sẽ xuất hiện nếu bạn có khai báo thuộc tính title, nội dung chính là giá trị khi khai báo.

Bạn hãy thử di chuột lên tiêu đề "Thuộc tính title" bên trên.

Ví dụ:

<p title="Giới thiệu về TBit">
Cộng đồng TBit bắt đầu hoạt động từ tháng 8/2014 với mục đích phi lợi nhuận. Diễn đàn là nơi trao đổi, giao lưu, học hỏi các vấn đề về công nghệ thông tin...
</p>

Thuộc tính href

Thẻ <a> dùng để khai báo một liên kết trên trang web. Muốn khai báo địa chỉ đích của liên kết ta viết thêm thuộc tính href cho nó.

Ví dụ:

<a href="https://tbit.vn">Tới trang chủ TBit</a>

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

Thuộc tính width và height dùng để khai báo kích thước của đối tượng, như của hình ảnh chẳng hạn.

  • width: chiều rộng
  • height: chiều cao

Ví dụ:

<img src="/tbit.jpg" width="400" height="150">

Trong ví dụ trên hình ảnh có độ rộng là 400px và cao là 150px (px:pixel - điểm ảnh, một đơn vị đo phổ biến khi thiết kế web).

Thuộc tính alt

Thuộc tính alt dùng để khai báo một đoạn văn bản thay thể (alternative) khi vì lí do nào đó, một thành phần của HTML không được hiển thị lên trang web.

Thuộc tính này cũng được đọc bởi các chương trình đọc màn hình (screen reader), dành cho những người khiếm thị (chỉ nghe được).

<img src="/tbit.jpg" alt="Logo của TBit" width="400" height="150">

Luôn viết thuộc tính bằng chữ in thường (lowercase)

HTML không bắt buộc bạn phải viết in thường hay in hoa. Bạn có thể viết width hoặc WIDTH, thậm chí WiDth đều được.

Tuy nhiên chúng tôi khuyên bạn nên viết mã HTML bằng chữ in thường là tốt nhất.

Luôn đặt giá trị của thuộc tính trong cặp dấu nháy

HTML5 không bắt buộc bạn phải dùng cặp dấu nháy " " để bao đóng giá trị của thuộc tính. Nhưng bạn nên làm như vậy nếu không muốn gặp một số điều phiền phức sau này, ví dụ như giá trị của thuộc tính có chứa dấu cách.

Ví dụ hợp lệ (nhưng không khuyên dùng):

<a href=https://tbit.vn>

Nhưng ví dụ sau đây sai cú pháp:

<p title=Logo của TBit>

Dùng dấu nháy đơn hay nháy kép?

Cả dấu nháy đơn ' ' và dấu nháy kép " " đều được chấp nhận khi bạn viết giá trị của thuộc tính.

Trong một số trường hợp, như muốn có dấu nháy trong thuộc tính, bạn có thể sử dụng các cặp dấu nháy đơn và nháy kép bao nhau.

Ví dụ:

<p title='Logo của "TBit"'>

hoặc

<p title="Logo của 'TBit'">

đều được chấp nhận.

Một số thuộc tính của các thẻ HTML

Thuộc tính Mô tả
alt Khai báo phần văn bản thay thế
disabled Khai báo không kích hoạt đối với thẻ <input>
href Khai báo URL của liên kết
id Khai báo mã định danh (ID) của đối tượng
class Khai báo lớp (class) của đối tượng.
src Khai báo URL của một tài nguyên, như hình ảnh chẳng hạn
style Khai báo sử dụng CSS ngay trong thẻ HTML
title Khai báo tiêu đề (tooltip) cho một đối tượng
value Khai báo giá trị cho thẻ <input>

Ngoài ra còn nhiều thuộc tính nữa mà chúng ta sẽ tìm hiểu trong những nội dung tiếp theo.