HTML Attribute

02/05/2019

Bài sau » « Bài trước
  • Tất cả các thẻ HTML đều có thuộc tính (Attributes).
  • Thuộc tính cung cấp thông tin mô tả thêm cho các thẻ HTML.
  • Các thuộc tính luôn nằm trong thẻ mở (thẻ bắt đầu).
  • Thuộc tính luôn có dạng tên/giá trị như sau: name="giá trị".
Thuộc tính   Mô tả
alt Chỉ định đoạn text thay thế khi không tìm thấy hình ảnh. Ngoài ra alt còn tốt cho SEO hình ảnh.
title Hiển thị đoạn text mô tả thêm cho thẻ (tag) chứa nó (Dạng tooltip).
lang Chỉ định ngôn ngữ chính của website.
src Chỉ định đường dẫn (URL) của hình ảnh. Hoặc đường dẫn file javascript, jquery trong thẻ script.
href Chỉ định đường dẫn đích cho thẻ a. Hoặc đường dẫn file css trong thẻ link.
width Chỉ định độ rộng của hình ảnh.
height Chỉ định chiều cao của hình ảnh.
style Chỉ định đoạn CSS inline được viết cho thẻ chứa nó.

Thuộc tính alt

Chỉ định đoạn text thay thế khi không tìm thấy hình ảnh. Ngoài ra alt còn tốt cho SEO hình ảnh.

<img src="aodai.jpg" alt="Đây là áo dài Việt Nam" />

Thuộc tính title

Thuộc tính title hiển thị đoạn text mô tả thêm cho thẻ (tag) chứa nó (Dạng tooltip) khi bạn đưa chuột lên (mouse over).

<p title="Mô tả hiển thị dạng tooltip"> Đoạn văn bản có title</p>

Thuộc tính lang

Thuộc tính lang dùng để chỉ định ngôn ngữ của website, được khai báo trong thẻ html. Việc khai báo ngôn ngữ quan trọng cho các thiết bị trợ năng (screen readers) hoặc bộ máy tìm kiếm (search engine).

<html lang="vi" >

Giá trị bên trong thuộc tính lang là 2 kí tự mã ngôn ngữ theo quốc gia được qui định theo chuẩn quốc tế.

Thuộc tính src

Thuộc tính src chỉ định đường dẫn (URL) của hình ảnh. Hoặc đường dẫn file javascript, jquery trong thẻ script.

<img src="aodai.jpg" alt="Đây là áo dài Việt Nam" />

<script src="js/jquery.min.js"></script>

Thuộc tính href

Chỉ định đường dẫn đích cho thẻ a. Hoặc đường dẫn file css trong thẻ link.

<a href="https://www.google.com">Google</a>

<link href="css/style.css" rel="stylesheet" />

Thuộc tính width, height

Chỉ định độ rộng và chiều cao của hình ảnh trong thẻ img.

<img src="aodai.jpg" alt="Đây là áo dài Việt Nam" width="300" height="500" />

Trong ví dụ trên thì width="300" có nghĩa là rộng 300 pixel, height="500" nghĩa là cao 500 pixel.

Thuộc tính style

 Chỉ định đoạn CSS inline được viết cho thẻ chứa nó như là color, font, size,...

<p style="color: red;">Đoạn text có màu đỏ.</p>

Chú ý: Bạn có thể học thêm về các thuộc tính CSS ở trang này : CSS Cơ bản

Viết chữ thường hay chữ in hoa cho các thuộc tính ?

- Chuẩn HTML5 không yêu cầu phải viết chữ thường.

- Tiêu đề của thuộc tính có thể viết chữ hoa và chữ thường như titleTITLE.

- Theo W3C đề nghị nên viết chữ thường trong HTML.

Dấu nháy cho giá trị của thuộc tính

- Chuẩn HTML5 không yêu cầu phải có dấu nháy (") cho giá trị của thuộc tính.

- Theo W3C đề nghị thì nên viết các giá trị của thuộc tính vào trong dấu nháy. Cùng xem ví dụ dưới đây về việc không hiển thị đúng giá trị của thuộc tính title do nội dung có khoảng trắng :

<p title=Giới thiệu>Đoạn text là paragraphs.</p>

- Dấu nháy kép (") là khá phổ biến trong HTML, nhưng ta cũng có thể dùng dấu nháy đơn (').

- Trong một số trường hợp, Nội dung của giá trị đã có dấu nháy kép (") thì ta dùng dấu nháy đơn (') để bao ở ngoài và ngược lại. Xem ví dụ dưới đây :

<p title='Giới thiệu "paragraph" là gì ?'>Đoạn text là paragraphs.</p>

<p title="Giới thiệu 'paragraph' là gì ?">Đoạn text là paragraphs.</p>

Bài sau » « Bài trước
Back to top