Mytour sẽ hướng dẫn bạn về các thuộc tính trong HTML. Bạn cũng có thể đọc thêm các bài viết khác trên Mytour để tìm hiểu sâu hơn về ngôn ngữ lập trình HTML.
Khám Phá Các Thuộc Tính Trong HTML
1. Thuộc Tính Trong HTML
1.1. Thuộc Tính href Trong HTML
1.2. Thuộc Tính src Trong HTML
1.3. Thuộc Tính width và height Trong HTML
1.4. Thuộc Tính alt Trong HTML
1.5. Thuộc Tính style Trong HTML
1.6. Thuộc Tính lang Trong HTML
1.7. Thuộc Tính title Trong HTML
1.8. Dấu Ngoặc Đơn, Ngoặc Kép
1.9. Các Thuộc Tính Trong HTML
2. Một Số Lưu Ý
1. Thuộc Tính Trong HTML
- Tất Cả Các Phần Tử HTML Đều Có Thuộc Tính.
- Các Thuộc Tính Cung Cấp Thông Tin Bổ Sung Về Phần Tử.
- Thuộc tính thường xuất hiện ở đầu thẻ HTML.
- Thường sử dụng cặp tên/giá trị cho thuộc tính, ví dụ như name='value'.
1.1 Thuộc tính href trong HTML
Liên kết trong HTML thường được định nghĩa bằng thẻ a. Địa chỉ liên kết được chỉ rõ trong thuộc tính href.
Ví dụ: Dưới đây là một ví dụ về cách sử dụng thuộc tính href trong HTML:
Sau khi áp dụng thuộc tính href trong HTML, kết quả sẽ hiển thị như sau:
Để chèn hình ảnh trong HTML, bạn có thể sử dụng thẻ img.
Trong thuộc tính src, tên file của nguồn ảnh được chỉ định.
Ví dụ: Dưới đây là một ví dụ về cách sử dụng thuộc tính src trong HTML:
Khi sử dụng thuộc tính src trong HTML, kết quả sẽ hiển thị như sau:
1.3. Thuộc tính width và height trong HTML
Ảnh trong HTML có thêm các thuộc tính width và height, xác định kích thước của ảnh.
Ví dụ: Dưới đây là một ví dụ về cách sử dụng thuộc tính width và height trong HTML:
Khi sử dụng thuộc tính width và height trong HTML, kết quả sẽ hiển thị như sau:
Mặc định, width và height sử dụng đơn vị là pixel, ví dụ: width='500' tương đương với rộng 50 pixel.
1.4. Thuộc tính alt trong HTML
Thuộc tính alt định nghĩa văn bản thay thế khi hình ảnh không thể xuất hiện.
Chúng ta cũng có thể sử dụng screen reader để đọc nội dung của thuộc tính alt.
Ví dụ 1: Dưới đây là ví dụ minh họa về thuộc tính alt trong HTML:
Kết quả hiển thị sau khi sử dụng thuộc tính alt trong HTML như sau:
Thuộc tính alt trong HTML có ý nghĩa khi hình ảnh không thể hiển thị (ví dụ, nếu hình ảnh không tồn tại).
Ví dụ 2: Trong trường hợp này, hình ảnh không tồn tại.
Kết quả sau khi sử dụng thuộc tính alt có dạng như sau:
1.5. Đặc tính style trong HTML
Thuộc tính style trong HTML được dùng để xác định phong cách của phần tử, như màu sắc, font chữ, kích thước, ... .
Ví dụ: Ví dụ dưới đây sử dụng thuộc tính style trong HTML:
Kết quả hiển thị sau khi sử dụng thuộc tính style sẽ có dạng như sau:
1.6. Thuộc tính ngôn ngữ trong HTML
Ngôn ngữ được sử dụng trong tài liệu được xác định bởi thẻ html.
Ngôn ngữ được xác định thông qua thuộc tính lang.
Việc xác định ngôn ngữ là rất quan trọng, đặc biệt là với các ứng dụng hỗ trợ (như screen reader) và các công cụ tìm kiếm.
Ví dụ: Dưới đây là ví dụ về việc sử dụng thuộc tính lang trong HTML:
1.7. Thuộc tính title trong HTML
Thuộc tính title thường được thêm vào phần tử p. Giá trị của thuộc tính title sẽ xuất hiện như một hộp chú thích khi người dùng di chuột qua đoạn văn bản.
Ví dụ: Dưới đây là minh họa cách sử dụng thuộc tính title trong HTML:
Kết quả trả về sau khi sử dụng thuộc tính title có dạng như sau:
1.8. Dấu ngoặc đơn, ngoặc kép
Trong HTML, giá trị thuộc tính thường được đặt trong dấu ngoặc kép, tuy nhiên, trong một số trường hợp, chúng ta cũng có thể sử dụng dấu ngoặc đơn.
Nếu chính giá trị của thuộc tính chứa dấu ngoặc kép, chúng ta sẽ phải sử dụng dấu ngoặc đơn.
Ví dụ: Dưới đây là ví dụ về việc sử dụng dấu ngoặc đơn và ngoặc kép trong HTML:
Hoặc như bên dưới cũng là đúng:
1.9. Các thuộc tính trong HTML
Dưới đây là bảng liệt kê các thuộc tính thường được sử dụng trong HTML:
2. Những điều cần lưu ý
- Trong HTML5, việc viết tên thuộc tính không phân biệt chữ hoa và chữ thường. Đồng thời, không cần sử dụng dấu ngoặc kép cho tên thuộc tính.
Bài viết trên đây của Mytour đã giới thiệu về các thuộc tính trong HTML. Trong các bài tiếp theo, Mytour sẽ tiếp tục giới thiệu về các phần tử trong HTML. Nếu có thắc mắc hoặc câu hỏi, đừng ngần ngại để lại ý kiến trong phần bình luận dưới bài viết nhé.