Người Viết : ViKiMi Editor

Thuộc Tính HTML / HTML Attributes giúp tạo các phần tử chặt chẽ cho Website của bạn
Bạn đã bắt đầu quen thuộc với HTML và đã đến lúc bạn muốn chuẩn bị một cách thức cao hơn. Rõ ràng phải có những cung cấp để có thể sử dụng ở dạng dữ liệu cao hơn. Đó là những kiến thức nền mà bạn buộc lòng phải sử dụng nếu muốn có cách dùng khác hơn. Đây là những gì cơ bản hơn khiến cho bạn làm quen cách công việc chặt chẽ với HTML.
Vậy điều bạn cần chắc chắn phải khác biệt hơn trước !
Thực chất đó chỉ là những bổ sung cần thiết cho các phần tử HTML.
Chắc hẳn bạn nếu bạn mới tiếp xúc thì sẽ thấy lạ với Thuộc Tính HTML / HTML Attributes. Ngược lại, với người đã quen thuộc thì lại là một điều đơn giản. Đây là một phần bổ trợ cần thiết !
HTML Attributes / Thuộc Tính HTML
+ Tất cả mọi phần tử HTML đều cần thiết phải có Thuộc Tính
+ HTML Attributes cung cấp thông tin bổ sung cho các phần tử
+ Và các Thuộc Tính HTML đều nằm ở thẻ bắt đầu ( Start Tag ); Không có bất kỳ Thuộc Tính HTML nằm ở thẻ kết thúc ( End Tag )
+ Thuộc Tính HTML luôn có một cặp name / value (Tên / Giá Trị) :
name = “value”

Chúng ta cũng cần biết rằng với các thẻ HTML khác nhau thì chúng ta sẽ có các thuộc tính khác nhau được sử dụng đồng hành. Điều này sẽ giúp cho chương trình có thể hoạt động tốt hơn, cũng giúp không xuất hiện các Code thừa. Các thuộc tính bạn muốn sử dụng cho các thẻ phải tuân thủ đúng quy định của HTML, nếu không đúng quy định điều đó là sai.
+ Cách tốt nhất đó là bạn luôn sử dụng thuộc tính chữ thường ( Dù HTML không phân viết hoa hay viết thường đối với thuộc tính ).
Điều này sẽ giúp cho chương trình tường minh hơn, và XHTML thì sẽ luôn yêu cầu chữ thường.
+ Bạn nên sử dụng nháy đơn hay nháy kép khi viết thuộc tính HTML :
Dấu ngoặc kép bao giá trị thuộc tính ( / value ) được sử dụng phổ biến khi viết thuộc tính HTML, tuy nhiên dấu ngoặc đơn vẫn có thể sử dụng.
Lưu ý :
Nếu Giá trị thuộc tính ( / value ) chứa dấu ngoặc kép thì sẽ sử dụng dấu ngoặc đơn bao quanh giá trị thuộc tính và NGƯỢC LẠI:
<p title=’Ha Noi la “Thu Do” Viet Nam’>
Hoặc, ngược lại :
<p title=”Ha Noi la ‘Thu Do’ Viet Nam”>
Chúng ta sẽ làm quen với một số thuộc tính HTML cơ bản :
1 + Thuộc tính href
Thẻ Anchor <a> xác định một siêu liên kết / hyperlink.
Và thuộc href sẽ xác định URL được liên kết tới.
Example :
<!DOCTYPE html>
<html>
<body>
<h1>Thuộc tính href </h1>
<p>Anchor Tag / Thẻ a. Địa chỉ liên kết xác định bằng Thuộc Tính href :</p>
<a href="https:/vikimi-infotech.com" > Visit Site </a>
</body>
</html>
2 + Thuộc tính src
Thẻ <img> giúp đưa hình ảnh đến trang HTML.
Thuộc tính src xác định đường dẫn của hình ảnh chỉ định.
<img src=”img_top.jpg”>
Có 2 cách mà bạn có thể chỉ định liên kết cho thuộc tính src :
+ Tuyệt đối : Liên kết tới 1 hình ảnh bên ngoài Website.
Ví dụ : Trích ảnh từ Website khác
+ Tương đối : Liên kết 1 hình ảnh bên trong Website. Khi đó đường dẫn không có chứa tên miền. Nó sẽ không bắt đầu với dấu gạch chéo (Nếu bắt đầu với dấu gạch chéo thì nó sẽ liên quan tới tên miền)
Ví dụ : src = “img_top.jpg”
3 + Thuộc tính width & height
Bất kỳ một thẻ HTML nào muốn chỉ định độ rộng và chiều cao thì đều phải sử dụng đến thuộc tính width và height.
Nếu thẻ <img> muốn chỉ định độ rộng & chiều cao thì phải sử dụng thuộc tính width và height.
Example 1 : Chỉ định tuyệt đối.
<img src=”img_top.jpg” width=”600px” height=”600px”>
Example 2 : Chỉ định tương đối. Điều này sẽ phù hợp khi bạn muốn thiết kế hiển thị tương thích / responsive trên các thiết bị.
Do độ rộng và chiều cao được chỉ định bằng % so với phần tử Cha.
<img src=”img_top.jpg” width=”30%” height=”30%”>
4 + Thuộc tính alt
Thuộc tính hữu ích này được sử dụng cho hình ảnh của HTML.
Vì lý do bất kỳ hình ảnh không thể tải được thì văn bản thay thế này sẽ được hiển thị. Giúp hiển thị trong mọi trường hợp.
<!DOCTYPE html>
<html>
<body>
<h1>Thuộc Tính alt</h1>
<img src="img_top.jpg" alt="Heavy raining" width="500" height="600">
</body>
</html>
5 + Thuộc Tính Lang
Thuộc tính này nên được sử dụng trong thẻ <html> để chỉ định ngôn ngữ của Website.
Điều này sẽ hỗ trợ cho các công cụ tìm kiếm.
<!DOCTYPE html>
<html lang=”en-US”>
6 + Thuộc Tính Title
Thuộc tính Title giúp bổ sung thông tin đến một phần tử HTML.
Giá trị Thuộc tính Title sẽ hiển thị như một chú giải khi bạn di chuột qua phần tử.
<p title=” This is a tooltip for paragraph / Đây là một chú giải “> Đoạn văn bản P. </p>