Thuộc tính trong HTML: Tổng hợp A-Z, Cú pháp & Ví dụ

Khi tìm hiểu về cách xây dựng website, bạn sẽ sớm nhận ra các thẻ HTML thôi là chưa đủ. Các thuộc tính trong HTML chính là chìa khóa để “thổi hồn” vào từng phần tử, giúp chúng trở nên mạnh mẽ và hữu dụng hơn. Bài viết này của Da I Kin sẽ cùng bạn tìm hiểu tất tần tật về thuộc tính, từ cú pháp cơ bản, các loại phổ biến cho đến những ví dụ trực quan nhất để bạn có thể tự tin áp dụng ngay.

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

Hãy tưởng tượng thẻ HTML là một danh từ, ví dụ như một ngôi nhà. Vậy thì thuộc tính chính là các tính từ mô tả cho ngôi nhà đó. Nó có thể là màu sắc, địa chỉ, hay số tầng.

Trong HTML, thuộc tính cũng có vai trò tương tự. Thuộc tính cung cấp thông tin bổ sung cho một phần tử HTML. Thông tin này có thể thay đổi cách trình duyệt hiển thị phần tử hoặc cách phần tử đó hoạt động.

Cú pháp cơ bản của một thuộc tính

Cú pháp của thuộc tính rất đơn giản và luôn tuân theo một quy tắc chung. Chúng luôn được đặt bên trong thẻ mở của một phần tử và đi theo cặp name=”value” (tên=”giá trị”).

name: Là tên của thuộc tính, ví dụ như href (cho liên kết) hay src (cho hình ảnh).
value: Là giá trị cụ thể bạn muốn gán cho thuộc tính đó, ví dụ như một đường link hoặc tên file ảnh.

Ví dụ với thẻ liên kết <a>:

<a href="https://wiweb.vn">Đây là một liên kết</a>

Ở đây, href là tên thuộc tính và https://wiweb.vn là giá trị của nó. Thẻ <a> giờ đây không chỉ là văn bản, nó đã trở thành một liên kết có thể nhấp vào.

Một số lưu ý quan trọng khi sử dụng thuộc tính

Để mã của bạn luôn sạch sẽ và hoạt động ổn định, hãy ghi nhớ vài điểm sau:

Luôn đặt trong thẻ mở: Thuộc tính không bao giờ xuất hiện ở thẻ đóng.
Sử dụng chữ thường: Mặc dù HTML không phân biệt hoa thường, viết tên thuộc tính bằng chữ thường là một quy ước chung và được khuyến khích.
Luôn dùng dấu ngoặc kép: Hãy luôn bao bọc giá trị của thuộc tính bằng dấu ngoặc kép (""). Điều này giúp tránh lỗi, đặc biệt khi giá trị có chứa khoảng trắng.

*Thuộc tính (Attribute) trong HTML là gì?*

Các thuộc tính toàn cục quan trọng nhất

Một điểm cực kỳ thú vị trong HTML là sự tồn tại của các thuộc tính toàn cục (hay Global Attributes). Đúng như tên gọi, bạn có thể sử dụng chúng cho hầu hết mọi thẻ HTML. Chúng mang lại khả năng kiểm soát và tùy biến mạnh mẽ cho trang web của bạn. Hãy cùng Da I Kin điểm qua 4 thuộc tính toàn cục quan trọng nhất nhé.

Thuộc tính id

Thuộc tính id gán cho một phần tử một định danh duy nhất trên toàn bộ trang. Mỗi id chỉ được xuất hiện một lần. Nó giống như số Căn cước công dân của mỗi người vậy, không ai trùng với ai.

Công dụng chính của id là để JavaScript có thể tìm và thao tác chính xác với phần tử đó, hoặc để CSS áp dụng một kiểu đặc biệt.

<h1 id="main-heading">Đây là tiêu đề chính của trang</h1>

Thuộc tính class

Trái ngược với id, thuộc tính class được dùng để nhóm nhiều phần tử có chung một đặc điểm lại với nhau. Bạn có thể sử dụng cùng một tên class cho nhiều thẻ HTML khác nhau.

Đây là thuộc tính id và class khác biệt lớn nhất. class rất hữu ích khi bạn muốn áp dụng cùng một kiểu CSS cho một nhóm các phần tử.

<p class="highlight-text">Đoạn văn bản này được làm nổi bật.</p>
<p>Đoạn này thì không.</p>
<span class="highlight-text">Phần này cũng được làm nổi bật.</span>

Thuộc tính style

Bạn muốn thay đổi nhanh màu sắc hoặc kích thước của một phần tử mà không cần viết file CSS riêng? Thuộc tính style trong HTML cho phép bạn làm điều đó. Nó giúp bạn thêm các quy tắc CSS trực tiếp vào thẻ HTML.

Tuy nhiên, Da I Kin khuyên bạn chỉ nên dùng cách này cho các chỉnh sửa nhỏ, đơn lẻ. Với các dự án lớn, việc quản lý CSS trong file riêng sẽ hiệu quả hơn rất nhiều.

<p style="color:blue; font-size:18px;">Đoạn văn bản này màu xanh và cỡ chữ 18px.</p>

Thuộc tính title

Thuộc tính title cung cấp thêm một mẩu thông tin về phần tử. Khi người dùng di chuột lên phần tử đó, nội dung của title sẽ hiển thị dưới dạng một ô chú thích nhỏ (tooltip).

<p title="Da I Kin là chuyên gia thiết kế website">Hãy di chuột vào đây!</p>

*Các thuộc tính toàn cục (Global Attributes) quan trọng nhất*

Tổng hợp các thẻ HTML và thuộc tính thông dụng của nó

Mỗi thẻ HTML thường có những thuộc tính đặc trưng riêng để phục vụ cho mục đích của nó. Dưới đây là tổng hợp các thuộc tính trong HTML thông dụng nhất mà bạn sẽ gặp hàng ngày.

Thuộc tính cho thẻ liên kết

Thẻ <a> (anchor) dùng để tạo siêu liên kết.

href: Đây là thuộc tính quan trọng nhất, xác định URL (địa chỉ) mà liên kết sẽ trỏ tới.
target: Quy định cách mở liên kết. Giá trị _blank sẽ mở liên kết trong một tab mới.
title: Tạo một dòng mô tả khi người dùng di chuột qua liên kết.

<a href="https://wiweb.vn" target="_blank" title="Ghé thăm trang chủ Da I Kin">Da I Kin.vn</a>

Thuộc tính cho thẻ hình ảnh

Thẻ <img> dùng để chèn hình ảnh vào trang web.

src: Viết tắt của “source”, thuộc tính này chứa đường dẫn đến file hình ảnh. Đây là thuộc tính bắt buộc.
alt: Cung cấp một đoạn văn bản thay thế sẽ hiển thị nếu ảnh không tải được. Nó cũng rất quan trọng cho SEO và khả năng truy cập.
width và height: Xác định chiều rộng và chiều cao của hình ảnh (tính bằng pixel).

<img src="logo.png" alt="Logo của Da I Kin" width="150" height="50">

Thuộc tính cho các thẻ văn bản

Các thẻ văn bản như <p> (đoạn văn) hay <h1> (tiêu đề) thường sử dụng các thuộc tính toàn cục.

lang: Xác định ngôn ngữ của nội dung bên trong thẻ. Ví dụ: lang="vi" cho tiếng Việt.
id và class: Dùng để định danh hoặc phân nhóm, phục vụ cho việc tạo kiểu bằng CSS hoặc tương tác bằng JavaScript.

<h1 id="chapter-1" class="main-title" lang="vi">Chương 1: Giới thiệu</h1>

Thuộc tính cho thẻ form và input

Form là nơi người dùng nhập liệu, và các thuộc tính của nó rất đa dạng.

Thẻ <form>:
action: Chỉ định URL sẽ xử lý dữ liệu khi form được gửi đi.
method: Xác định phương thức HTTP để gửi dữ liệu (GET hoặc POST).
Thẻ <input>:
type: Xác định loại ô nhập liệu (ví dụ: text, password, email, submit).
name: Đặt tên cho ô nhập liệu để máy chủ có thể nhận dạng.
placeholder: Hiển thị một đoạn văn bản gợi ý mờ trong ô nhập liệu.

<form action="/submit-form.php" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="user_email" placeholder="Nhập email của bạn">
  <input type="submit" value="Gửi">
</form>

*Tổng hợp các thẻ HTML và thuộc tính thông dụng của nó*

Giải đáp các câu hỏi thường gặp (FAQ)

Khi mới làm quen, chắc hẳn bạn sẽ có vài thắc mắc. Da I Kin đã tổng hợp và giải đáp một số câu hỏi phổ biến nhất về thuộc tính trong HTML ngay dưới đây.

Thuộc tính HTML được sử dụng để làm gì?

Nói một cách đơn giản, thuộc tính được dùng để cung cấp thêm dữ liệu cho các thẻ HTML. Dữ liệu này giúp trình duyệt biết cách hiển thị phần tử (ví dụ: style, width), cách phần tử hoạt động (ví dụ: href), hoặc cung cấp thông tin cho các công nghệ khác như CSS và JavaScript (id, class).

Sự khác biệt chính giữa thuộc tính id và class là gì?

Đây là câu hỏi rất phổ biến! Điểm khác biệt cốt lõi nằm ở tính duy nhất.

id: Là độc nhất. Một giá trị id chỉ được sử dụng cho một phần tử duy nhất trên toàn bộ trang.
class: Là để phân nhóm. Cùng một giá trị class có thể được áp dụng cho nhiều phần tử khác nhau.

Bạn hãy nghĩ id là số Căn cước công dân (chỉ một người có), còn class là tên lớp học (nhiều học sinh cùng một lớp).

Tại sao nên dùng dấu ngoặc kép cho giá trị thuộc tính?

Tuy một số trường hợp không dùng ngoặc kép vẫn chạy, nhưng việc sử dụng chúng là một thói quen tốt và được coi là chuẩn mực. Lý do là:

Tránh lỗi: Nếu giá trị của thuộc tính chứa khoảng trắng (ví dụ title="Da I Kin - Thiết kế Website"), việc không có ngoặc kép sẽ gây ra lỗi.
Tính nhất quán: Giúp mã của bạn trông sạch sẽ, chuyên nghiệp và dễ đọc hơn.
Tương thích: Đảm bảo mã của bạn tương thích tốt hơn với các công cụ và chuẩn phân tích mã trong tương lai.

Lời kết

Qua bài viết này, chúng ta có thể thấy thuộc tính chính là “linh hồn” của các thẻ HTML. Chúng biến những phần tử tĩnh thành các thành phần có chức năng, có kiểu dáng và có ý nghĩa rõ ràng. Việc nắm vững cách sử dụng các thuộc tính trong HTML là bước đệm quan trọng để bạn tiến xa hơn trong lĩnh vực phát triển web.

Lời khuyên của Da I Kin là hãy bắt đầu thực hành ngay với các thuộc tính phổ biến như href, src, alt, id và class. Càng thực hành nhiều, bạn sẽ càng sử dụng chúng một cách tự nhiên.

Bạn có câu hỏi nào khác về thuộc tính trong HTML không? Hãy chia sẻ bên dưới phần bình luận nhé!

Nếu bạn đang cần thiết kế web chuyên nghiệp để thể hiện đẳng cấp thương hiệu, Da I Kin luôn ở đây để hỗ trợ. Liên hệ với chúng tôi ngay hôm nay!

Thuộc tính trong HTML: Tổng hợp A-Z, Cú pháp & Ví dụ