Các thuộc tính HTML

Chúng ta đã thấy một số thẻ HTML và cách sử dụng của chúng như thẻ tiêu đề <h1>, <h2>, thẻ đoạn văn <p> và các thẻ khác. Chúng ta đã sử dụng chúng cho đến nay ở dạng đơn giản nhất, nhưng hầu hết các thẻ HTML cũng có thể có các thuộc tính và nó bổ sung thêm một số thông tin cho thẻ.

Một thuộc tính được sử dụng để xác định các đặc điểm của một phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần - tên (name)giá trị (value)
  • Name là thuộc tính bạn muốn đặt tên. Ví dụ: phần tử đoạn văn <p> trong ví dụ mang thuộc tính có tên là align. Bạn có thể sử dụng thuộc tính này để căn lề (alignment) đoạn văn bản trên trang.
  • Value là giá trị bạn muốn đặt cho thuộc tính và luôn được đặt trong dấu nháy. Ví dụ dưới đây xác định ba giá trị của thuộc tính align: left, centre right.

Tên thuộc tính và giá trị thuộc tính không phân biệt chữ hoa chữ thường. Tuy nhiên, World Wide Web Consortium W3C khuyến nghị các thuộc tính/giá trị thuộc tính chữ thường theo đề xuất của HTML 4.

Ví dụ

Đây là căn lề trái

Đây là căn lề giữa

Đây là căn lề phải

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ thuộc tính align</title>
</head>
<body>
<p align = "left">Đây là căn lề trái</p>
<p align = "center">Đây là căn lề giữa</p>
<p align = "right">Đây là căn lề phải</p>
</body>
</html>

Các thuộc tính chính (core)

Bốn thuộc tính cốt lõi có thể được sử dụng chính trong các phần tử HTML (mặc dù không phải tất cả) đó là:
  • Id
  • Title
  • Class
  • Style

Thuộc tính Id

Thuộc tính id của thẻ HTML được sử dụng để xác định duy nhất phần tử trong trang HTML. Có hai lý do chính mà bạn có thể muốn sử dụng thuộc tính id trên một phần tử:
  • Nếu một phần tử mang thuộc tính id là một định danh duy nhất, chúng ta có thể xác định phần tử đó và nội dung của nó.
  • Nếu bạn có hai thành phần cùng tên trong một trang Web (hoặc style sheet ), bạn có thể sử dụng thuộc tính id để phân biệt giữa các thành phần có cùng tên.
Chúng ta sẽ thảo luận về style sheet trong hướng dẫn khác. Hiện tại, hãy sử dụng thuộc tính id để phân biệt giữa hai thành phần đoạn văn như dưới đây.

Ví dụ:
<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>

Thuộc tính title

Thuộc tính title đưa ra một gợi ý tiêu đề cho phần tử. Cú pháp cho thuộc tính title tương tự như được giải thích cho thuộc tính id.

Hành vi của thuộc tính này sẽ phụ thuộc vào phần tử chứa nó, mặc dù nó thường được hiển thị dưới dạng một chú giải khi con trỏ đi qua phần tử hoặc trong khi phần tử đang tải.

Ví dụ:

Ví dụ thẻ heading đã được đánh tiêu đề

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ thuộc tính title</title>
</head>
<body>
<h3 title = "Xin chào HTML!">Ví dụ thẻ heading đã được đánh tiêu đề</h3>
</body>
</html>
Bây giờ hãy thử đưa con trỏ qua "Ví dụ thẻ heading đã được đánh tiêu đề" và bạn sẽ thấy title bạn sử dụng trong mã code xuất hiện như một chú giải của con chuột.

Thuộc tính class

Thuộc tính class được sử dụng để kết hợp một phần tử với style sheet và xác định class của phần tử. Bạn sẽ tìm hiểu thêm về việc sử dụng thuộc tính class khi bạn học Cascading Style Sheet (CSS). Vì vậy, bây giờ bạn có thể bỏ qua nó.

Giá trị của thuộc tính cũng có thể là một danh sách các tên lớp được phân tách bằng dấu cách. Ví dụ:
class = "className1 className2 className3"

Thuộc tính style

Thuộc tính style cho phép bạn chỉ định quy tắc Cascading Style Sheet (CSS) trong phần tử.

Some text...

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính style</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Tại thời điểm này, chúng ta không học CSS, vì vậy hãy tiếp tục mà không bận tâm nhiều về CSS. Tại khóa học này, bạn cần hiểu các thuộc tính HTML là gì và cách sử dụng chúng khi định dạng nội dung.

Các thuộc tính Internationalization

Có ba thuộc tính Internationalization, có sẵn cho hầu hết (mặc dù không phải tất cả) các phần tử XHTML.
  • dir
  • lang
  • xml: lang

Thuộc tính dir

Thuộc tính dir cho phép bạn chỉ ra cho trình duyệt biết về hướng hiển thị của văn bản. Thuộc tính dir có thể lấy một trong hai giá trị:
  • ltr: Trái sang phải(giá trị mặc định)
  • rtl: Phải sang trái
Ví dụ:

Dòng chữ này sẽ bắt đầu từ phải sang trái.

<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Điều hướng hiển thị</title>
</head>
<body>
Dòng chữ này sẽ bắt đầu từ phải sang trái.
</body>
</html>
Khi thuộc tính dir được sử dụng trong thẻ <html>, nó sẽ xác định văn bản sẽ được trình bày trong toàn bộ tài liệu như thế nào. Khi được sử dụng trong một thẻ khác, nó điều khiển hướng của văn bản chỉ cho nội dung của thẻ đó.
Thuộc tính lang
Thuộc tính lang cho phép bạn chỉ ra ngôn ngữ chính được sử dụng trong tài liệu, nhưng thuộc tính này chỉ được giữ trong HTML để tương thích ngược với các phiên bản HTML trước đó. Thuộc tính này đã được thay thế bằng thuộc tính xml: lang trong các tài liệu XHTML mới.

Các giá trị của thuộc tính lang là mã ngôn ngữ hai ký tự chuẩn ISO-639. Xem mã ngôn ngữ HTML: ISO 639 để biết danh sách đầy đủ các mã ngôn ngữ.

Ví dụ:
<!DOCTYPE html>
<html lang = "vi">
<head>
<title>Trang ngôn ngữ tiếng Việt</title>
</head>
<body>
Trang này sử dụng ngôn ngữ tiếng Việt
</body>
</html>
Thuộc tính xml: lang
Thuộc tính xml: lang là sự thay thế XHTML cho thuộc tính lang. Giá trị của thuộc tính xml: lang phải là mã quốc gia ISO-639 như đã đề cập trong phần trước.

Một số thuộc tính chung

Dưới đây là một số thuộc tính khác có thể sử dụng được với nhiều thẻ HTML.

Một số thuộc tính cơ bản
Thuộc tính Giá trị Chức năng
align right, left, center Các thẻ gióng hàng ngang
valign top, middle, bottom Các thẻ gióng hàng dọc 
bgcolor numeric, hexidecimal, RGB value Đặt một màu nền trong một phần tử
background URL Đặt một ảnh nền trong một phần tử
id Người dùng tự định nghĩa Tên một phần tử sử dụng CSS
class Người dùng tự định nghĩa Phân loại một phần tử sử dụng CSS
width Giá trị số Xác định chiều rộng ảnh, bảng hoặc một ô trong bảng
height Giá trị số Xác định chiều cao ảnh, bảng hoặc một ô trong bảng
title Giá trị số Hiển thị pop-up tiêu đề của phần tử
Chúng ta sẽ thấy các ví dụ liên quan vì chúng ta sẽ tiến hành nghiên cứu các thẻ HTML khác. Để biết danh sách đầy đủ các Thẻ HTML và các thuộc tính liên quan, vui lòng xem tham chiếu danh sách các thẻ HTML.