HTML hỗ trợ nhiều thuộc tính khác nhau cho các thẻ (tags) để cung cấp thông tin bổ sung và kiểm soát cách các phần tử hoạt động hoặc hiển thị trên trang web. Dưới đây là một số thuộc tính phổ biến và cách sử dụng chúng:
- class: Được sử dụng để xác định lớp CSS của một phần tử, cho phép áp dụng kiểu CSS cho nhóm các phần tử có cùng lớp.Ví dụ:
<p class="highlighted">Đoạn văn bản có kiểu làm nổi bật.</p> - id: Xác định một định danh duy nhất cho phần tử, thường được sử dụng để tùy chỉnh bằng CSS hoặc để liên kết đến phần tử bằng JavaScript.Ví dụ:
<div id="main-content">Nội dung chính</div> - style: Được sử dụng để thêm kiểu CSS trực tiếp vào phần tử, thường được sử dụng cho các điều chỉnh nhỏ.Ví dụ:
<p style="color: blue;">Chữ màu xanh</p> - src: Xác định nguồn (URL) của một tài nguyên như hình ảnh hoặc video.Ví dụ:
<img src="image.jpg" alt="Hình ảnh"> - href: Xác định liên kết của thẻ
<a>.Ví dụ:<a href="https://www.example.com">Trang web ví dụ</a> - alt: Cung cấp mô tả thay thế cho hình ảnh, được hiển thị khi hình ảnh không thể tải.Ví dụ:
<img src="image.jpg" alt="Mô tả hình ảnh"> - width và height: Xác định chiều rộng và chiều cao của một phần tử như hình ảnh.Ví dụ:
<img src="image.jpg" alt="Hình ảnh" width="300" height="200"> - disabled: Được sử dụng để vô hiệu hóa một phần tử nào đó, chẳng hạn như nút trong biểu đồ.Ví dụ:
<button disabled>Nút bị vô hiệu hóa</button> - placeholder: Hiển thị một văn bản gợi ý trong trường nhập liệu trước khi người dùng nhập.Ví dụ:
<input type="text" placeholder="Nhập tên của bạn"> - value: Xác định giá trị mặc định của một trường nhập liệu.
Ví dụ: <input type="text" value="Giá trị mặc định">
- target: Xác định cách mở liên kết khi người dùng nhấp vào.
Ví dụ: <a href="https://www.example.com" target="_blank">Mở trong tab mới</a>
- type: Được sử dụng trong các phần tử biểu đồ để xác định kiểu dữ liệu nhập.
Ví dụ: <input type="text">, <input type="email">, <input type="checkbox">,…
Đây chỉ là một số ví dụ về các thuộc tính trong HTML. Có nhiều thuộc tính khác dành riêng cho từng loại phần tử và mục đích sử dụng cụ thể.
Dưới đây là một số ví dụ về cách sử dụng các thuộc tính trong HTML:
- Thuộc tính class và style:html
<p class="highlighted">Chữ được làm nổi bật bằng CSS.</p>
<p style="color: blue;">Chữ màu xanh.</p>
Thuộc tính id:
html
<div id="main-content">Đây là phần nội dung chính.</div>
<p id="info">Thông tin quan trọng.</p>
Thuộc tính src và alt:
html
<img src="image.jpg" alt="Mô tả hình ảnh">
<img src="avatar.jpg" alt="Hình đại diện">
Thuộc tính href:
html
<a href="https://www.example.com">Trang web ví dụ</a>
<a href="mailto:[email protected]">Liên hệ qua email</a>
Thuộc tính width và height:
html
<img src="image.jpg" alt="Hình ảnh" width="300" height="200">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Thuộc tính disabled:
html
<button disabled>Nút bị vô hiệu hóa</button>
<input type="text" disabled>
Thuộc tính placeholder và value:
html
<input type="text" placeholder="Nhập tên của bạn">
<input type="text" value="Giá trị mặc định">
Thuộc tính target:
html
<a href="https://www.example.com" target="_blank">Mở trong tab mới</a>
<a href="pdf-document.pdf" target="_blank">Mở tài liệu PDF trong tab mới</a>
Thuộc tính type:
html
<input type="text" placeholder="Nhập email" name="email"> <input type="password" placeholder="Nhập mật khẩu" name="password"> <input type="checkbox" id="subscribe" name="subscribe" value="yes">
Nhớ rằng các ví dụ trên chỉ là một số cách sử dụng các thuộc tính. Có rất nhiều thuộc tính khác và cách sử dụng tùy thuộc vào mục đích và kiểu phần tử bạn đang làm việc. Trên đây là giới thiệu Các thuộc tính của HTML.