Thuộc tính HTML
Thuộc tính cung cấp thêm thông tin về thành phần trong HTML Thuộc tính HTML Thành phần HTML có thể có nhiều thuộc tính Các thuộc tính cung cấp thêm thông tin về một thành phần Các thuộc tính luôn luôn được đặt ở thẻ mở Các thuộc tính đi theo cặp tên/giá trị như: name = ...
Thuộc tính cung cấp thêm thông tin về thành phần trong HTML
Thuộc tính HTML
- Thành phần HTML có thể có nhiều thuộc tính
- Các thuộc tính cung cấp thêm thông tin về một thành phần
- Các thuộc tính luôn luôn được đặt ở thẻ mở
- Các thuộc tính đi theo cặp tên/giá trị như: name = “value”
Thuộc tính lang
Ngôn ngữ của trang web có thể được khai báo trong thẻ <html>.
Ngôn ngữ được khai báo trong thuộc tính lang.
Việc khai báo ngôn ngữ rất quan trọng với các ứng dụng truy cập và bộ máy tìm kiếm:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="vi-VN"> <body> <h1>Đề mục trang</h1> <p>Nội dung trang.</p> </body> </html> |
Hai ký tự đầu tiên quy định ngôn ngữ (vi). Hai ký tự tiếp theo quy định tên quốc gia (VN).
Thuộc tính title
Đoạn văn bản trong HTML được quy định bằng thẻ <p>.
Trong ví dụ dưới, thẻ <p> có thuộc tính là title với giá trị là “Giới thiệu về WebVN”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <h1>Giới thiệu về WebVN</h1> <p title="Giới thiệu về WebVN"> WebVN là một trang web của các lập trình viên, cung cấp các bài hướng dẫn và thư viện bao gồm nhiều ngôn ngữ để lập trình web : HTML, CSS, JavaScript, XML, SQL, PHP, v.v... </p> <p><b> Nếu bạn di chuột vào đoạn văn bản trên, chú thích sẽ xuất hiện. </b></p> </body> </html> |
Demo
Thuộc tính href
Liên kết trong HTML được quy định bằng thẻ <a>. Địa chỉ của liên kết được quy định bằng thuộc tính href:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <a href="https://webvn.com">Đây là một liên kết</a> </body> </html> |
Demo
Thuộc tính về kích thước
Ảnh trong HTML được quy định bằng thẻ <img>.
Tên tệp tin (src) và kích cỡ ảnh (awidth và height) là những thuộc tính của thẻ <img>:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <img src="https://webvn.com/wp-content/uploads/2014/10/wvnlogo.png" awidth="200" height="72" alt="Logo WebVN"> </body> </html> |
Demo
Kích cỡ của ảnh có đơn vị đo là pixel: awidth=”200″ có nghĩa kích thước chiều dài là 200 pixels.
Bạn sẽ được học thêm về ảnh và thẻ <img> trong những bài tiếp theo.
Thuộc tính alt
Thuộc tính alt quy định đoạn văn bản thay thế khi một thành phần HTML vì một lý do nào đó không thể hiển thị.
Ví dụ như khi bạn chèn một hình ảnh vào website nhưng do địa chỉ ảnh không chính xác hoặc đã bị thay đổi, dẫn tới ảnh không thể hiển thị trên trình duyệt. Lúc này đoạn văn bản thay thế sẽ hiển thị thay ảnh.
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <img src="https://webvn.com/wp-content/uploads/2014/10/wvnlogo.png" awidth="200" height="72" alt="Logo WebVN"> </body> </html> |
Demo
Luôn sử dụng chữ viết thường cho các thuộc tính
Chuẩn HTML5 không yêu cầu bạn viết thường tên các thuộc tính.
Bạn có thể viết thuộc tính bằng chữ hoa hoặc chữ thường như : Title hoặc TITLE.
Tổ chức W3C khuyến cáo nên viết thường các thẻ trong HTML4 và yêu cầu phải viết thường cho những kiểu tài liệu có cấu trúc chặt chẽ như XHTML.
Tại WebVN chúng tôi luôn viết thường tên các thuộc tính.
Luôn sử dụng dấu nháy cho giá trị thuộc tính
Chuẩn HTML5 không yêu cầu bạn phải sử dụng dấu nháy cho giá trị thuộc tính.
Thuộc tính href, như phần ví dụ bên trên có thể được viết lại như sau:
|
1 |
<a href=https://webvn.com> |
Tổ chức W3C khuyến cáo sử dụng dấu nháy trong HTML4 và yêu cầu sử dụng dấu nháy cho những kiểu tài liệu có cấu trúc chặt chẽ như XHTML.
Đôi khi việc sử dụng dấu nháy là bắt buộc. Như ví dụ bên dưới, trình duyệt sẽ hiển thị không chính xác vì giá trị thuộc tính có chứa dấu cách :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <h1>Sử dụng dấu nháy</h1> <p title=Cách sử dụng dấu nháy> Bạn không thể thiếu dấu nháy cho giá trị thuộc tính nếu trong đó có dấu cách. </p> <p><b> Nếu bạn di chuột vào nội dung đoạn văn bản bên trên, trình duyệt sẽ chỉ hiển thị chữ đầu tiên trong thuộc tính title của thẻ p. </b></p> </body> </html> |
Demo
Tại WebVN chúng tôi luôn sử dụng dấu nháy cho giá trị thuộc tính.
Nháy đơn hay nháy kép
Dấu nháy kép được sử dụng nhiều nhất trong HTML.
Trong một vài trường hợp khi bản thân giá trị thuộc tính có chứa dấu nháy kép, bạn cần phải sử dụng dấu nháy đơn:
|
1 |
<p title='Cách "Sử dụng" dấu nháy'> |
hay ngược lại
|
1 |
<p title="Cách 'Sử dụng' dấu nháy"> |
Tổng kết bài học
- Tất cả các thành phần của HTML đều có thuộc tính
- Thuộc tính title trong HTML cung cấp thêm thông tin về tiêu đề cho nội dung
- Thuộc tính href trong HTML cung cấp thông tin địa chỉ cho các liên kết
- Thuộc tính awidth và height trong HTML cung cấp thông tin về kích cỡ cho ảnh
- Thuộc tính alt trong HTML cung cấp đoạn văn bản thay thế khi ảnh không được hiển thị
- Tại WebVN chúng tôi luôn viết thường tên các thuộc tính trong HTML
- Tại WebVN chúng tôi luôn sử dụng dấu nháy kép cho giá trị thuộc tính
Bài tập
Bài tập 1 Bài tập 2 Bài tập 3Các thuộc tính trong HTML
Dưới đây là danh sách những thuộc tính thường được sử dụng trong HTML:
| Thuộc tính | Miêu tả |
|---|---|
| alt | Đoạn văn bản thay thế khi ảnh không hiển thị |
| disabled | Khóa người dùng tương tác với thẻ |
| href | Quy định địa chỉ trong một liên kết |
| id | Quy định định danh duy nhất cho một thành phần |
| src | Nguồn (địa chỉ) tới ảnh |
| style | Sử dụng CSS bên trong một thành phần |
| title | Cung cấp thêm thông tin về thành phần |
| value | Giá trị của thẻ input |
