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, ...). Trong bài viết này chúng ta sẽ tìm hiểu về các thuộc tính trong HTML các bạn nhé!
Thuộc tính trong HTML có tác dụng gì
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ụ
<html> <head> <title> Vi du thuoc tinh canh 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 chinh phai </p> </body> </html>
Chạy đoạn code sẽ hiển thị kết quả:
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
idnhư 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"> Represents an id character in HTML </p> <p id = "css"> Contains two id characters in 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ụ
<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ả:
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 (CSS). 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ử.
<html> <head> <title>Vi du thuoc tinh style trong HTML</title> </head> <body> <p style="font-family:arial; color:#FF0000;">Hoc HTML tai HocTV...</p> </body> </html>
Nó sẽ hiển thị kết quả:
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 |
|---|---|
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) |
Ví dụ
<html dir = "rtl"> <head> <title> The translation is in HTML </title> </head> <body> This ban is displayed from fade to boy. </body> </html>
Hiển thị kết quả như sau:
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ụ
<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>
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ử |
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.
