Các thuộc tính trong HTML

Chúng ta đã tìm hiểu một số thẻ HTML và cách sử dụng của nó như các thẻ <h1>, <h2>, thẻ đoạn văn <p> và các thẻ khác. Chúng ta đã sử dụng các thẻ này chỉ với các tác dụng đơn giản nhất của các thẻ, nhưng hầu hết các thẻ HTML có thể cũng có các thuộc tính hay các đặc trưng, mà có thể cung cấp cho chúng ta thêm một số tác dụng hữu ích khác (chẳng hạn như định dạng, style, ...).

Một thuộc tính được sử dụng để xác định đặc trưng của một phần tử HTML và được đặt trong một thẻ mở của phần tử đó. Tất cả các thuộc tính được chia thành 2 phần : tên và một giá trị:

Tên là tên của thuộc tính. Ví dụ, phần tử đoạn văn <p> trong ví dụ dưới mang một thuộc tính tên có tên là align, và bạn có thể sử dụng thuộc tính này để căn chỉnh của đoạn văn trong một trang.
Giá trị là những gì mà bạn muốn gán thuộc tính và được đặt trong các trích dẫn. Ví dụ dưới chỉ 3 giá trị có thể của thuộc tính align: left, center, và right.

Tên thuộc tính và giá trị thuộc tính là không phân biệt chữ hoa và chữ thường. Tuy nhiên, W3C đề nghị thuộc tính chữ thường và thuộc tính giá trị trong phiên bản HTML 4 đã giới thiệu. Ví dụ:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du thuoc tinh align trong HTML</title>
</head>
<body>
<p align="left">Doan van nay duoc can chinh trai</p>
<p align="center">Doan van nay duoc can chinh giua</p>
<p align="right">Doan van nay duoc can chinh phai</p>
</body>
</html>

Chạy đoạn code sẽ hiển thị kết quả:

Doan van nay duoc can chinh trai

Doan van nay duoc can chinh giua

Doan van nay duoc can chinh phai

Các thuộc tính cốt lõi trong HTML

Có 4 thuộc tính cốt lõi có thể được sử dụng trong phần lớn các phần tử HTML (mặc dù không phải toàn bộ) là:

Thuộc tính id
Thuộc tính title
Thuộc tính class
Thuộc tính style

Thuộc tính id trong HTML

Các thuộc tính id của một thẻ HTML được sử dụng để nhận diện duy nhất bất kỳ phần tử nào trong một trang HTML. Có 2 lý do chính mà bạn có thể muốn sử dụng một thuộc tính id trên một phần tử là:

Nếu một phần tử mang thuộc tính id như là một định danh duy nhất, nó có thể xác định đích danh phần tử đó và nội dung của nó.
Nếu bạn có 2 phần tử cùng tên trong một trang Web, bạn có thể sử dụng thuộc tính id để phân biệt giữa 2 phần tử mà có cùng tên đó.

Bây giờ, chúng ta sử dụng thuộc tính id để phân biệt giữa 2 phần tử đoạn văn như ví dụ dưới.

Ví dụ

<p id="html">Vi du 1 ve thuoc tinh id trong HTML</p>
<p id="css">Vi du 2 ve thuoc tinh id trong HTML</p>

Thuộc tính title trong HTML

Thuộc tính title cung cấp một tiêu đề cho một phần tử. Cú pháp cho thuộc tính title tương tự như phần giải thích ở trên của thuộc tính id.

Chế độ xử lý của thuộc tính này phụ thuộc vào phần tử mang nó, mặc dù nó thường hiển thị một tooltip khi bạn rê chuột qua. Ví dụ:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du thuoc tinh title trong HTML</title>
</head>
<body>
<h3 title="Vi du thuoc tinh title!">Ban re chuot qua day</h3>
</body>
</html>

Hiển thị kết quả:

Ban re chuot qua day

Bây giờ bạn hãy thử rê con trỏ chuột qua "Ban re chuot qua day" và bạn sẽ thấy một tooltip sẽ được phóng to.

Thuộc tính class trong HTML

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

Giá trị của thuộc tính này có thể là một danh sách tên các class riêng rẽ được phân biệt nhau bởi khoảng trống. Ví dụ:

class="tenClass1 tenClass2 tenClass3"

Thuộc tính style trong HTML

Thuộc tính này cho phép bạn xác định rõ các quy tắc Cascading Style Sheet (CSC) trong phần tử.

<!DOCTYPE html>
<html>
<head>
<title>Vi du thuoc tinh style trong HTML</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Hoc HTML tai VietJack...</p>
</body>
</html>

Nó sẽ hiển thị kết quả:

Hoc HTML tai VietJack...

Lúc này bạn chưa học về CSS, vì thế hãy tiếp tục tiến hành mà không cần lo lắng về CSS. Tại đây chúng ta cần hiểu các thuộc tính HTML là gì và cách chúng sử dụng để định dạng nội dung.

Quảng cáo

Các thuộc tính Global trong HTML

Có 3 thuộc tính Global có trong hầu hết (không phải tất cả) các phần tử XHTML.

Thuộc tính dir
Thuộc tính lang
Thuộc tính xml:lang

Thuộc tính dir trong HTML

Thuộc tính dir cho phép bạn chỉ đạo trình duyệt phương hướng mà văn bản hiển thị (chẳng hạn từ trái qua phải). Thuộc tính này nhận một trong 2 giá trị, hiển thị ở bảng dưới:

Giá trị	Ý nghĩa
ltr	Từ trái qua phải (giá trị mặc định)
rtl	Từ phải qua trái (cho các ngôn ngữ như Hebrew, Arabic… mà được đọc từ phải qua trái)

Quảng cáo

Ví dụ

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Vi du thuoc tinh dir trong HTML</title>
</head>
<body>
Phan van ban nay duoc hien thi tu phai sang trai.
</body>
</html>

Hiển thị kết quả như sau:

Phan van ban nay duoc hien thi tu phai sang trai.

Khi thuộc tính dir được sử dụng trong thẻ <html> , nó quyết định cách mà văn bản xuất hiện trong toàn bộ tài liệu. Khi sử dụng với thẻ khác, nó điều khiển hướng của văn bản cho nội dung của thẻ đó.

Thuộc tính lang trong HTML

Thuộc tính lang cho phép bạn chỉ rõ ngôn ngữ chính sử dụng trong một tài liệu, nhưng thuộc tính này được giữ trong HTML chỉ cho khả năng tương thích ngược với các phiên bản trước của HTML. Thuộc tính này được thay thế bằng thuộc tính xml:lang trong tài liệu XHTML mới.

Các giá trị của thuộc tính lang là các mã ngôn ngữ hai ký tự tiêu chuẩn ISO-639. Bạn có thể kiểm tra danh sách các code này ở chương Mã hóa ngôn ngữ HTML: ISO 639.

Ví dụ

<!DOCTYPE html>
<html lang="vi">
<head>
<title>Vi du thuoc tinh lang trong HTML</title>
</head>
<body>
Trang VietJack duoc viet bang tieng Viet.
</body>
</html>

Thuộc tính xml:lang trong XHTML

Thuộc tính xml:lang trong XHTML thay cho thuộc tính lang. Giá trị của thuộc tính xml:lang này có thể là một mã quốc gia trong ISO-639 như đã đề cập ở trên.

Các thuộc tính chung trong HTML

Bảng dưới miêu tả các thuộc tính khác mà sử dụng dễ dàng với nhiều thẻ HTML:

Thuộc tính	Giá trị	Chức năng
align	right, left, center	Các thẻ căn chỉnh theo chiều ngang
valign	top, middle, bottom	Các thẻ căn chỉnh theo chiều dọc trong một phần tử HTML
bgcolor	Giá trị số, thập lục phân, RGB	Đặt màu nền phía sau một phần tử
background	URL	Đặt ảnh nền phía sau một phần tử
id	Người dùng tự định nghĩa	Đặt tên một phần tử để sử dụng với Cascading Style Sheets
class	Người dùng tự định nghĩa	Phân loại một phần tử để sử dụng với Cascading Style Sheets
width	Giá trị số	Xác định độ rộng của bảng, hình ảnh hoặc ô trong bảng
height	Giá trị số	Xác định chiều cao của bảng, hình ảnh hoặc ô trong bảng
title	Người dùng tự định nghĩa	"Pop-up" tiêu đề của phần tử

Quảng cáo

Chúng ta sẽ nghiên cứu các ví dụ liên quan khi chúng ta tiến hành với các thẻ HTML khác. Để tìm hiểu danh sách đầy đủ của các thể HTML và các thuộc tính liên quan, bạn truy cập để vào chương Danh sách các thẻ HTML.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com: