You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Attribute là gì? Tại sao thuộc tính lại quan trọng trong HTML như vậy?

Attribute là gì? Tại sao thuộc tính lại quan trọng trong HTML như vậy?

Chúng ta sẽ cùng tìm hiểu xem trong HTML Attribute về mức độ quan trọng của nó trong quá trình bạn tạo ra những đoạn code.

Xem thêm bài viết

Ở bài trước, chúng ta đã biết đến thuật ngữ HTML Tag và HTML Element dành cho các trình duyệt rồi. Hôm nay chúng ta sẽ cùng đến với thuật ngữ hoàn toàn mới và là một trong những thuật ngữ quan trọng mà bạn nên nắm rõ trước khi tiến hành học những dòng code đầu tiên của HTML.

Thuật ngữ hôm nay chúng ta sẽ học chính là Attribute (thuộc tính). Đối với thuật ngữ này bạn nên nắm rõ và tường tận vì chúng sẽ có ảnh hưởng rất lớn đến HTML.

Attribute là gì?

Attribute hay còn gọi là thuộc tính của thẻ hay phần tử. Ở đây mình sẽ gọi là thuộc tính. Thuộc tính rất quan trọng và cũng thường xuyên được sử dụng.

Thuộc tính dùng để bổ sung thông tin cho thẻ của bạn. Chắc chắn bạn đã nắm vững thuật ngữ Content và thuật ngữ HTML Tag (thẻ). Vậy bạn có còn nhớ đến một thẻ rất quan trọng trong HTML không? Thiếu thẻ này là toàn bộ công sức của bạn sẽ đi tong. Đó là thẻ <html>. Thẻ này có một thuộc tính là lang (viết tắt từ language). Chức năng của thuộc tính này là để giúp cho các trang tìm kiếm đồng thời hỗ trợ cho trình duyệt đọc ngôn ngữ trang web của bạn nhanh chóng hơn. Nếu không có thì thời gian khởi động trang sẽ tương đối lâu hơn bình thường do trình duyệt gặp khó khăn vì không biết ngôn ngữ bạn đang viết là gì. Thẻ này giúp cho trình duyệt xác định được ngôn ngữ và xuất trang web cho người dùng nhanh hơn. Tính ra thì thuộc tính quá lợi hại luôn ấy chứ. 

Mỗi thẻ chỉ có một thuộc tính?

Trong một thẻ có thể có rất nhiều thuộc tính khác nhau. Bạn có thể thấy điều này trong bài viết về thẻ <meta>(Meta). Trong thẻ Meta có hai thuộc tính bỗ trợ cho nhau. Còn trong thẻ <img> mà bạn sắp sửa được học cũng sẽ có nhiều thuộc tính bao gồm cả alt, title, width, height,…

Thẻ nào có nhiều thuộc tính và thẻ nào có ít thuộc tính tuỳ thuộc vào công dụng của thẻ. Không có liên quan đến chuyện mình thích thì mình ghi vào. Bởi nếu bạn không áp dụng đúng thuộc tính cho đúng thẻ thì sau này bạn rất dễ nhầm lẫn các thuộc tính của thẻ. Ví dụ như bạn để thuộc tính lang sang thẻ <head> chẳng hạn.

Cấu trúc của thuộc tính

Thuộc tính có hai phần. Phần thứ nhất là tên của thuộc tính và phần thứ hai là giá trị của thuộc tính.

Cú pháp chính xác của thuộc tính :

Name= “value”

Chúng ta lấy ví dụ thẻ <img> có thuộc tính alt. Cú pháp của thuộc tính này khi gắn vào thẻ sẽ như thế này :

<img= “images/cocacola.jpg” alt= “Chai nước ngọt Coca Cola”/>

Bạn đừng quan tâm đến phần giá trị của thẻ img. Chúng ta sẽ học trong phần sau. Hãy quan tâm từ phần alt trở đi. Theo đó alt chính là tên của thuộc tính và cụm từ “Chai nước ngọt Coca Cola” chính là giá trị của thuộc tính đó. Dù là văn bản hay là số thì giá trị của chúng là ngang ngửa nhau.

Chúng ta sẽ xem thêm một số ví dụ nữa nhé! Các thuộc tính được đặt ở trong các thẻ mở. 

 

<!doctype html>
<html>
    <head>
        <title>Học thiết kế cùng Huỳnh Tòng</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="HTML, CSS, JavaScript"/>
        <meta name="description" content="Trang web học thiết kế cùng Huỳnh Tòng"/>
    </head>
    <body>
        <h1 style="color:red;">Chào mừng đến trang tự học thiết kế cùng Huỳnh Tòng</h1>
        <p>Tự sáng tạo ra trang web của chính bạn. Bạn dám thử thách giới hạn sáng tạo của chính bạn không?</p>
        
    </body>
</html>

Kết quả của ví dụ

Như bạn đã thấy thì khi chúng ta sử dụng thuộc tính Style trong thẻ H1 thì chúng ta có thể tô màu đỏ cho tiêu đề H1 với giá trị trong thuộc tính Style là Color.

Chúng ta thử chèn một hình ảnh vào trang web nào.

<!doctype html>
<html>
    <head>
        <title>Học thiết kế cùng Huỳnh Tòng</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="HTML, CSS, JavaScript"/>
        <meta name="description" content="Trang web học thiết kế cùng Huỳnh Tòng"/>
    </head>
    <body>
        <h1 style="color:red; ">Chào mừng đến trang tự học thiết kế cùng Huỳnh Tòng</h1>
        <p>Tự sáng tạo ra trang web của chính bạn. Bạn dám thử thách giới hạn sáng tạo của chính bạn không?</p>
        <img src="images/man-utd.jpg" alt="Manchester United" title="Cổ động Manchester United"/>
        
    </body>
</html>

Kết quả ví dụ

Bạn đã chèn được hình vào trang web. Nhưng có vẻ chúng không được như ý lắm. Hình ảnh quá lớn so với kích thước mà bạn muốn. Bạn muốn điều chỉnh hình ảnh về kích thước mà bạn muốn. Chúng ta sẽ dùng thuộc tính Width và Height để điều chỉnh hình ảnh.

<!doctype html>
<html>
    <head>
        <title>Học thiết kế cùng Huỳnh Tòng</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="HTML, CSS, JavaScript"/>
        <meta name="description" content="Trang web học thiết kế cùng Huỳnh Tòng"/>
    </head>
    <body>
        <h1 style="color:red; ">Chào mừng đến trang tự học thiết kế cùng Huỳnh Tòng</h1>
        <p>Tự sáng tạo ra trang web của chính bạn. Bạn dám thử thách giới hạn sáng tạo của chính bạn không?</p>
        <img src="images/man-utd.jpg" alt="Manchester United" title="Cổ động Manchester United" width=800 height=500/>
        
    </body>
</html>

Kết quả ví dụ sau khi thêm thuộc tính Width và Height.

Thuộc tính đã giúp bạn thực hiện việc điều chỉnh kích thước cho hình ảnh mà bạn muốn chèn về một kích thước phù hợp nhất. Quá tuyệt!

Cú pháp của thuộc tính chỉ mang tính chất tham khảo là nhiều. Bạn đừng quan tâm đến nó quá. Bạn xem ví dụ sẽ dễ hiểu hơn. Vì bạn sẽ không dùng đến cú pháp này mà thay vào đó là bạn biết áp dụng vào trang HTML mới là quan trọng nhất.

Vậy là bạn đã học xong phần bài học về thuộc tính. Cũng không quá khó nhằn nhưng bạn cần nắm vững từng ý một. Lúc nãy vừa mới đề cập đến thẻ <html> có thuộc tính lang. Sau này khi bạn muốn viết một trình duyệt với ngôn ngữ Ấn Độ đi chăng nữa thì bạn chỉ cần tra bảng ngôn ngữ ISO 639-1 là được. Bảng ISO này có rất nhiều ngôn ngữ khác nhau. Bạn chỉ cần tìm là có thể thấy ngay ngôn ngữ bạn cần. Bảng đó sẽ được cung cấp cho các bạn trong bài học về thẻ <html>. Hẹn các bạn vào bài học lần sau.




Đặt câu hỏi cho bài viết này ?