Home Home » Kiến thức HTML » Các thuộc tính trong HTML

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="center">Doan van nay duoc can chinh giua</p>

<p align="left">Doan van nay duoc can chinh trai</p>


</html>

<p align="right">Doan van nay duoc can chinh phai</p>


</body>
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 idtrê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ínhid để 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>


</body>

<h3 title="Vi du thuoc tinh title!">Ban re chuot qua day</h3>


</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.

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
ltrTừ trái qua phải (giá trị mặc định)
rtlTừ phải qua trái (cho các ngôn ngữ như Hebrew, Arabic… mà được đọc từ phải qua trái)

VÍ DỤ


<!DOCTYPE html>



<html dir="rtl">

<head>


<title>Vi du thuoc tinh dir trong HTML</title>

</head>
<body>


</body>

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


</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>


</html>

Trang VietJack duoc viet bang tieng Viet.


</body>

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:langnà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ínhGiá trịChức năng
alignright, left, centerCác thẻ căn chỉnh theo chiều ngang
valigntop, middle, bottomCác thẻ căn chỉnh theo chiều dọc trong một phần tử HTML
bgcolorGiá trị số, thập lục phân, RGBĐặt màu nền phía sau một phần tử
backgroundURLĐặt ảnh nền phía sau một phần tử
idNgười dùng tự định nghĩaĐặt tên một phần tử để sử dụng với Cascading Style Sheets
classNgười dùng tự định nghĩaPhân loại một phần tử để sử dụng với Cascading Style Sheets
widthGiá trị sốXác định độ rộng của bảng, hình ảnh hoặc ô trong bảng
heightGiá trị sốXác định chiều cao của bảng, hình ảnh hoặc ô trong bảng
titleNgười dùng tự định nghĩa"Pop-up" tiêu đề của phần tử
Chia sẻ bài viết
Bài liên quan