Thuộc tính trong HTML – Một số thuộc tính hay được sử dụng – Học HTML


LinkVietVip.Com là một website miễn phí, nơi mà bạn có thể rút gọn liên kết miễn phí và kiếm thu nhập từ việc chia sẻ liên kết rút gọn đó của mình.
Download, Tải về, Tải Xuống, Down,Mở,Xem, Open, Load, Tiếp Tục,Chơi, Chơi Game,Continue, Reading,Xem tiếp, Xem thêm, Chuyển hướng tới địa chỉ bên ngoài vui lòng xem bên dưới.

Ở bài trước chúng ta đã được biết đến thành phần trong HTML thì ở bài học này chúng ta sẽ được biết đến một khái niệm khác đó là Thuộc Tính HTML. Thuộc tính trong HTML là gì? Được sử dụng ra sao? Cấu trúc như thế nào? Chúng ta hãy cùng nhau tìm hiểu về thuộc tính trong bài viết này nhé.

Thuộc tính HTML là gì?

Thuộc tính cung cấp thêm thông tin về thành phần trong HTML. Nói một cách dễ hiểu thì thuộc tính là một thành phần của một thẻ HTML để tăng thêm thuộc tính cho thẻ đó, có thể thêm nhiều hoặc không dùng, tuy nhiên có những thuộc tính bắt buộc phải có tùy theo mục đích sử dụng thẻ đó của bạn.

Nếu bạn không thêm thuộc tính vào thẻ nó sẽ hiển thị mặc định, để thay đổi phong cách hiển thị mặc định mà không cần thêm thuộc tính trong HTML hãy thay đổi trong CSS nhé bạn. Tuy nhiên có nhiều thuộc tính bạn bắt buộc phải thêm vào thẻ HTML mà không thẻ thay đổi trong CSS hãy tìm hiểu dần dần về nó nhé ^^.

Thuộc tính có rất nhiều công dụng như có thể thay đổi phong cách hiển thị, miêu tả thêm,…

Tóm gọn lại thì:

  • Thành phần HTML có thể có nhiều thuộc tính
  • Các thuộc tính cung cấp thêm thông tin về một thành phần
  • Các thuộc tính luôn luôn được đặt ở thẻ mở
  • Các thuộc tính đi theo cặp ( Tên/Giá trị ) : <font color=”red”>HoanTN </font>

Một Số Thuộc Tính Trong HTML

Dưới đây sẽ là một số thuộc tính thường được sử dụng trong HTML.

Thuộc tính lang

Ngôn ngữ của trang web có thể được khai báo trong thẻ <html>.

Ngôn ngữ được khai báo trong thuộc tính lang.

Việc khai báo ngôn ngữ rất quan trọng với các ứng dụng truy cập và bộ máy tìm kiếm:

<!DOCTYPE html>
<html lang="vi-VN">
<body>
<h1>Đề mục trang</h1>
<p>Nội dung trang.</p>
</body>
</html>

Hai ký tự đầu tiên quy định ngôn ngữ (vi). Hai ký tự tiếp theo quy định tên quốc gia (VN).

Thuộc tính title

Đoạn văn bản trong HTML được quy định bằng thẻ <p>.

Trong ví dụ dưới, thẻ <p> có thuộc tính là title với giá trị là “Giới thiệu về HoanTN.Com”:

<!DOCTYPE html>
<html>
<body>
<h1>Giới thiệu về HoanTN.Com</h1>
<p title="Giới thiệu về HoanTN.Com">
HoanTN.Com là website chia sẻ kiến thức liên quan đến lĩnh vực CNTT được tổng hợp từ nhiều nguồn khác nhau và kinh nghiệm từ bản thân chia sẻ miễn phí dành cho tất cả mọi người.
</p>
<p><b>
Nếu bạn di chuột vào đoạn văn bản trên, chú thích sẽ xuất hiện.
</b></p>
</body>
</html>

Thuộc tính href

Liên kết trong HTML được quy định bằng thẻ <a>. Địa chỉ của liên kết được quy định bằng thuộc tính href:

<!DOCTYPE html>
<html>
<body>
<a href="https://hoantn.com">Đây là một liên kết</a>
</body>
</html>

Thuộc tính về kích thước

Ảnh trong HTML được quy định bằng thẻ <img>.

Tên tệp tin (src) và kích cỡ ảnh (width và height) là những thuộc tính của thẻ <img>:

<!DOCTYPE html>
<html>
<body>
<img src="url của ảnh" width="200" height="72" alt="HoanTN.Com">
</body>
</html>

Kích cỡ của ảnh có đơn vị đo là pixel: width=”200″ có nghĩa kích thước chiều rộng là 200 pixels. Còn thuộc tính height=”72″ là chiều cao

Bạn sẽ được học thêm về ảnh và thẻ <img> trong những bài tiếp theo.

Thuộc tính alt

Thuộc tính alt quy định đoạn văn bản thay thế nếu thành phần HTML được gán vì một lý do nào đó không thể hiển thị.

Ví dụ như khi bạn chèn một hình ảnh vào website nhưng do địa chỉ ảnh không chính xác hoặc đã bị thay đổi, dẫn tới ảnh không thể hiển thị trên trình duyệt. Lúc này đoạn văn bản thay thế sẽ hiển thị thay ảnh.

<!DOCTYPE html>
<html>
<body>
<img src="url của ảnh" width="200" height="72" alt="HoanTN.Com">
</body>
</html>

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

Chuẩn HTML5 không yêu cầu bạn viết thường tên các thuộc tính.

Bạn có thể viết thuộc tính bằng chữ hoa hoặc chữ thường như : Title hoặc TITLE.

Tổ chức W3C khuyến cáo nên viết thường các thẻ trong HTML4 và yêu cầu phải viết thường cho những kiểu tài liệu có cấu trúc chặt chẽ như XHTML.

Viết thường là cách viết thuộc tính HTML phổ biến nhất.

Luôn sử dụng dấu nháy cho giá trị thuộc tính

Chuẩn HTML5 không yêu cầu bạn phải sử dụng dấu nháy ( ” ” )cho giá trị thuộc tính.

Thuộc tính href, như phần bên trên có thể được viết lại như sau:


<a href=https://hoantn.com>

Tổ chức W3C khuyến cáo sử dụng dấu nháy trong HTML4 và yêu cầu sử dụng dấu nháy cho những kiểu tài liệu có cấu trúc chặt chẽ như XHTML.

Sử dụng dấu nháy rất phổ biến. Thiếu dấu nháy có thể dẫn đến các lỗi không mong muốn.

Đôi khi việc sử dụng dấu nháy là bắt buộc. Như ví dụ bên dưới, trình duyệt sẽ hiển thị không chính xác vì giá trị thuộc tính có chứa dấu cách :

<!DOCTYPE html>
<html>
<body>
<h1>Sử dụng dấu nháy</h1>
<p title=Cách sử dụng dấu nháy>
Bạn không thể thiếu dấu nháy cho giá trị thuộc tính nếu trong đó có dấu cách.
</p>
<p><b>
Nếu bạn di chuột vào nội dung đoạn văn bản bên trên, trình duyệt sẽ chỉ hiển thị chữ đầu tiên trong thuộc tính title của thẻ p.
</b></p>
</body>
</html>

Nháy đơn hay nháy kép

Dấu nháy kép được sử dụng nhiều nhất trong HTML.

Trong một vài trường hợp khi bản thân giá trị thuộc tính có chứa dấu nháy kép, bạn cần phải sử dụng dấu nháy đơn:

<p title='Cách "Sử dụng" dấu nháy'>

Hay ngược lại:

<p title="Cách 'Sử dụng' dấu nháy">

Tổng kết

Trong bải viết này chúng ta đã tìm hiểu và kết luận được một số nội dung như sau:

  • Tất cả các thành phần của HTML đều có thuộc tính
  • Thuộc tính title trong HTML cung cấp thêm thông tin về tiêu đề cho nội dung
  • Thuộc tính href trong HTML cung cấp thông tin địa chỉ cho các liên kết
  • Thuộc tính width và height trong HTML cung cấp thông tin về kích cỡ cho ảnh
  • Thuộc tính alt trong HTML cung cấp đoạn văn bản thay thế khi ảnh không được hiển thị
  • Nên viết thường tên các thuộc tính trong HTML
  • Nên sử dụng dấu nháy kép cho giá trị thuộc tính

Nếu có bất kỳ thắc mắc hay góp ý nào về bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML Online ^^.



Be the first to comment

Leave a Reply

Your email address will not be published.


*