Các thuộc tính của thẻ html – HTML Attributes

HTML Attributes là gì?

HTML Attributes là các thuộc tính của 1 thẻ html, chúng bổ trợ thông tin cho thẻ html đó

  • Tất cả các thẻ HTML đều có thể có các thuộc tính
  • Các thuộc tính cung cấp thông tin bổ sung cho một thẻ html cụ thể
  • Các thuộc tính luôn được chỉ định trong lúc mở thẻ html
  • Các thuộc tính thường có các cặp tên / giá trị như: name = “value”
Thuộc tính của thẻ html

Thuộc tính của thẻ html

Thuộc tính href của thẻ a

Thẻ <a> dùng để biểu diễn đường dẫn đến trang khác từ trang web hiện tại, và đích đến của trang web đó được biểu diện trong thuộc tính href của thẻ a này.

<a href="https://codezi.pro">Click vào đây</a>

Ở đây đường dẫn là https://codezi.pro được gán là giá trị của thuộc tính href. Bạn sẽ có 1 bài riêng nói về thẻ a và các thuộc tính của nó ở bài kế tiếp

Thuộc tính SRC

Thuộc tính src được sử dụng phổ biến trong việc biểu diễn giá trị của file ảnh trong thẻ <img>. Tuy nhiên nó cũng được sử dụng cho 1 số thẻ khác như <iframe>, <video>…

Sử dụng như sau

<img src="file_hinh_anh.jpg"/>
<iframe src="lien_ket_trang_web.html"></iframe>
<video src="file_video.mp4"></video>

Thuộc tính Style

Hay còn gọi là inline style, sử dụng trong tất cả các thẻ đều được kể cả body và html. Style dùng để định hướng giao diện hiện thị của thẻ chứa nó trên trang web html

<img style="padding:10px;border:1px solid red" src="file_image.jpg"/>
<p style="color:red">Học html cùng codezi.pro</p>
<span style="font-size:15px">Học nhanh lập trình với codezi</span>

Thuộc tính title

Thuộc tính title có thể sử dụng cho tất cả các thẻ trong html, title phát huy tác dụng khi người dùng di chuột (hover chuột) vào thẻ chứa thuộc tính title thì sẽ có 1 tooltip nhỏ được hiển thị lên ngay đầu con trỏ chuột với nội dung là giá trị của thẻ title

<p title="anh vừa hover vào em đó">Hover chuột vào đây</p>

Thuộc tính alt của thẻ img

Thuộc tính này có giá trị là text, với nội dung mô tả thêm cho phần hình ảnh nó hiển thị, trong thiết kế html chuẩn thì cứ là thẻ img thì bắt buộc cần có thuộc tính alt để mô tả thêm về hình ảnh

<img alt="Tôm hùm" src="đường dẫn ảnh con tôm hùm ở đây"/>

Luôn luôn sử dụng chữ thường cho tên thuộc tính

Có rất nhiều thuộc tính của thẻ html và mỗi thẻ lại có những thuộc tính riêng dành cho nó. Ở bài này là hướng dẫn ví dụ cơ bản về một số thuộc tính và cách dùng chúng.

Trong quá trình code html bạn nên sử dụng chữ thường thay vì chữ hoa (mặc dù html khong phân biệt hoa/thường đối với thẻ và thuộc tính của thẻ.

Luôn luôn đặt giá trị của thẻ trong cặp nháy đơn hoặc nháy kép

Đôi khi bạn quên hoặc cố ý việc giá trị của thuộc tính mà không có dấu ' hoặc dấu " và trình duyệt vẫn hiển thị và hoạt động như bình thường.

Tuy vậy chúng tôi vẫn khuyên bạn luôn luôn đặt giá trị của thuộc tính trong cặp ‘ hoặc ” (ngoại trừ các thuộc tính có giá trị là Số nguyên thì có thể không cần thiết.

<!--Đây là 1 ví dụ cách viết giá trị của thuộc tính href và title không đúng-->
<a href=link-trang-web.html title=xem chi tiết>Click vào đây</a>
<!--và Codezi khuyên bạn nên viết như thế này-->
<a href="link-trang-web.html" title="xem chi tiết">Click vào đây</a>

trong trường hợp nội dung trong thuộc tính có dấu nháy kép thì hãy sử dụng nháy đơn theo ví dụ sau, và ngược lại

<!--và Codezi khuyên bạn nên viết như thế này-->
<a href="link.html" title='xem chi tiết bài "Tôi yêu codezi"'>Click vào đây</a>

<a href="link.html" title="xem chi tiết bài 'Tôi yêu codezi'">Click vào đây</a>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *