Thuộc tính html
Thuộc tính HTML cung cấp các thông tin bổ sung cho các phần tử HTML
Thuộc tính HTML
- Tất cả các phần tử HTML đều có thể có các thuộc tính bên trong nó
- Các thuộc tính cung cấp thông tin bổ sung cho các phần tử HTML hoạt động
- Các thuộc tính luôn được chỉ định và bắt đầu trong một thẻ mở
- Các thuộc tính thường có trong các cặp tên/giá trị như: name="value"
Thuộc tính href
Thẻ <a> định nghĩa một siêu liên kết. Thuộc tính href xác định URL của trang liên kết được chỉ định đi tới khi người dùng click vào:
Ví dụ
<a href="https://book-code.com.vn/">Học lập trình web tại book-code.com.vn</a>
Kết quả
Thuộc tính src
Thẻ <img> được sử dụng để nhúng một hình ảnh trong một trang HTML. Thuộc tính src quy định cụ thể đường dẫn đến hình ảnh sẽ được hiển thị.
Ví dụ
<img src="book-code.png">
Có hai cách để chỉ định URL trong thuộc tính src:
1. URL tuyệt đối: Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src = "https://book-code.com.vn/images/img_girl.jpg".
Lưu ý
Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài, nó có thể đột ngột bị xóa hoặc thay đổi đường dẫn url.
2. URL tương đối: Liên kết đến một hình ảnh được lưu trữ bên trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến folder hiện tại (folder cùng cấp). Ví dụ: src = "img_girl.jpg". Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến folder cấp cao hơn. Ví dụ: src = "/images/img_girl.jpg".
Lưu ý
Tốt nhất là bạn nên sử dụng các URL tương đối. Hình ảnh sẽ không bị lỗi nếu bạn thay đổi tên miền.
Thuộc tính chiều rộng và chiều cao
Thẻ <img> cũng có thể chứa các thuộc tính width và height, chúng được dùng để xác định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):
Ví dụ
<img src="book-code.png" width="50px" height="50px">
Kết quả
Thuộc tính alt
Thuộc tính alt được khuyến nghị nên dùng cho thẻ <img> chỉ định đoạn văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị (do lỗi ảnh, hoặc ảnh bị xóa ...).
Ví dụ
<img src="adcd.png" alt="ảnh đã bị lỗi">
Kết quả
Thuộc tính style
Thuộc tính style được sử dụng để thêm các yếu tố hiển thị cho thẻ HTML, chẳng hạn như màu sắc, font chữ, kích thước ....
Ví dụ
<p style="color:green">Đoạn văn bản này có màu xanh</p>
Đoạn văn bản này có màu xanh
Thuộc tính lang
Chúng ta phải luôn sử dụng thuộc tính lang bên trong thẻ <html>, để khai báo ngôn ngữ của trang Web. Điều này để hỗ trợ các công cụ tìm kiếm và trình duyệt hiển thị đúng kết quả mong muốn.
Ví dụ sau chỉ định tiếng anh là ngôn ngữ chính của tài liệu HTML
<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong thuộc tính lang. Hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối cùng xác định quốc gia của người lập nên tài liệu đó.
Ví dụ sau chỉ định ngôn ngữ là tiếng anh, và xuất xứ của tài liệu là từ Việt Nam
<!DOCTYPE html> <html lang="en-VI"> <body> ... </body> </html>
Thuộc tính title
Thuộc tính title định nghĩa một số thông tin cần bổ sung để diễn dãi thêm về một phần tử HTML.
Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải cho phần tử khi bạn rê chuột qua phần tử đó.
Ví dụ
<p title="học html">Thuộc tính title trong thẻ html</p>
Kết quả
Thuộc tính title trong thẻ html
Luôn sử dụng thuộc tính chữ thường
Tiêu chuẩn HTML không yêu cầu tên thuộc tính chữ thường. Tuy nhiên, W3C đề xuất các thuộc tính chữ thường trong HTML và yêu cầu các thuộc tính chữ thường cho các loại tài liệu nghiêm ngặt hơn như XHTML.
Luôn trích dẫn các giá trị thuộc tính trong dấu ngoặc kép
Tiêu chuẩn HTML không yêu cầu dấu ngoặc kép xung quanh các giá trị thuộc tính được trích dẫn. Tuy nhiên, W3C khuyến nghị sử dụng dấu ngoặc kép trích dẫn trong HTML và yêu cầu trích dẫn cho các loại tài liệu nghiêm ngặt hơn như XHTML.
Đúng
<a href="https://book-code.com.vn/">Học lập trình web</a>
Chưa đúng
<a href=https://book-code.com.vn/>Học lập trình web</a>
Ví dụ sau nếu không sử dụng dấu ngoặc kép trong giá trị thuộc tính, giá trị thuộc tính hiển thị sẽ bị lỗi vì có chứa khoản trắng
<p title=web book-code>Web book-code</p>
Kết quả
Web book-code
Dấu ngoặc đơn hay dấu ngoặc kép
Sử dụng dấu ngoặc kép xung quanh trong trích dẫn các giá trị thuộc tính là cách làm phổ biến nhất trong HTML, nhưng dấu ngoặc đơn cũng có thể được sử dụng khi cần trích dẫn nội dung chú ý nào đó bên trong giá trị thuộc tính.
Ví dụ
<p title="website 'book-code' học HTML">Học HTML</p>
Kết quả
Học HTML
Hoặc ngược lại cũng sẽ có kết quả tương tự