18/08/2018, 10:36

Khái niệm THUỘC TÍNH của phần tử HTML

Thuộc tính là gì? Quy tắc viết thuộc tính Thuộc tính (Attributes) dùng để thiết lập thêm thông số cho phần tử HTML. Thuộc tính được đặt bên trong thẻ mở của phần tử dưới dạng cặp thuộc tính="giá trị thuộc tính" Một phần tử có thể có nhiều thuộc tính. Ví dụ Phần tử <img> ...

Thuộc tính là gì? Quy tắc viết thuộc tính

Thuộc tính (Attributes) dùng để thiết lập thêm thông số cho phần tử HTML.

Thuộc tính được đặt bên trong thẻ mở của phần tử dưới dạng cặp thuộc tính="giá trị thuộc tính"

Một phần tử có thể có nhiều thuộc tính.

Ví dụ

Phần tử <img> bên dưới có ba thuộc tính:

  • Thuộc tính src dùng để thiết lập thông số là đường dẫn đến tập tin hình ảnh mà bạn muốn hiển thị
  • Thuộc tính awidth dùng để thiết lập thông số chiều rộng mà tấm hình sẽ hiển thị là 200 pixel
  • Thuộc tính height dùng để thiết lập thông số chiều cao mà tấm hình sẽ hiển thị là 100 pixel
<img src="http://code24h.com/public/home/img_demo/h2.jpg" awidth="200px" height="100px">
Xem ví dụ
Tên thuộc tính không phần biệt trường hợp chữ hoa hay chữ thường (Ví dụ: awidth hoặc WIDTH đều đúng). Tuy nhiên, ở một số phiên bản HTML sau này chỉ hỗ trợ tên thuộc tính ở dạng chữ thường (Ví dụ: awidth). Do đó, bạn nên tập thói quen viết thuộc tính bằng chữ thường.

Thuộc tính title

Thuộc tính title dùng để hiển thị một tooltip khi người dùng dí chuột vào phần tử HTML.

Thuộc tính title có thể sử dụng cho hầu hết các loại phần tử HTML, chẳng hạn như: <div>, <span>, <p>, <img>,....

Ví dụ: bạn thử dí chuột vào đây xem sao !
Ví dụ
<p title="Hello">Dí chuột vào đây</p>
Xem ví dụ

Lưu ý:

  • Nếu cặp dấu ngoặc bao xung quanh giá trị của thuộc tính là cặp dấu ngoặc kép " " thì giá trị của thuộc tính không được chứa dấu ngoặc kép "
  • Nếu cặp dấu ngoặc bao xung quanh giá trị của thuộc tính là cặp dấu ngoặc đơn ' ' thì giá trị của thuộc tính không được chứa dấu ngoặc đơn '
Ví dụ
<p title="hướng dẫn học "lập trình web" từ A đến Z">Dí chuột vào đây</p>  
<p title='hướng dẫn học 'lập trình web' từ A đến Z'>Dí chuột vào đây</p>  
<p title="hướng dẫn học 'lập trình web' từ A đến Z">Dí chuột vào đây</p>  
<p title='hướng dẫn học "lập trình web" từ A đến Z'>Dí chuột vào đây</p>  
Xem ví dụ

Thuộc tính lang

Thuộc tính lang được đặt bên trong thẻ <html> dùng để khai báo ngôn ngữ của trang web. Giúp các công cụ tìm kiếm như Google, Bing,... hiểu được, cải thiện việc làm SEO.

Kiểu ngôn ngữ của Việt Nam là "vi-VN"

Ví dụ
<!DOCTYPE html>
<html lang="vi-VN">
<head>
    <title></title>
</head>
<body>
</body>
</html>
0