Ngôn ngữ HTML bao gồm một số yếu tố. Chúng bao gồm các thành phần trang web thường được sử dụng như đoạn văn, tiêu đề, liên kết và hình ảnh. Ngoài ra còn có một số yếu tố mới được giới thiệu với HTML5, bao gồm tiêu đề, điều hướng, chân trang và hơn thế nữa. Tất cả các phần tử HTML này được sử dụng để tạo cấu trúc của một tài liệu và cho nó ý nghĩa. Để thêm nhiều ý nghĩa hơn cho các phần tử, bạn có thể cung cấp cho chúng các thuộc tính.
Thẻ mở HTML cơ bản bắt đầu bằng ký tự <. Tiếp theo là tên thẻ và cuối cùng, bạn hoàn thành thẻ bằng ký tự>. Ví dụ, thẻ đoạn mở sẽ được viết như sau:
Để thêm một thuộc tính vào thẻ HTML của bạn, trước tiên bạn đặt một dấu cách sau tên thẻ (trong trường hợp này là "p"). Sau đó, bạn sẽ thêm tên thuộc tính mà bạn muốn sử dụng tiếp theo là một dấu bằng. Cuối cùng, giá trị thuộc tính sẽ được đặt trong dấu ngoặc kép. Ví dụ:
Thẻ có thể có nhiều thuộc tính. Bạn sẽ tách từng thuộc tính khỏi các thuộc tính khác bằng một khoảng trắng.
Các phần tử với các thuộc tính bắt buộc
Một số phần tử HTML thực sự yêu cầu các thuộc tính nếu bạn muốn chúng hoạt động như dự định. Phần tử hình ảnh và phần tử liên kết là hai ví dụ về điều này.
Phần tử hình ảnh yêu cầu thuộc tính "src". Thuộc tính đó cho trình duyệt biết hình ảnh nào bạn muốn sử dụng ở vị trí đó. Giá trị của thuộc tính sẽ là đường dẫn tệp đến hình ảnh. Ví dụ:
Bạn sẽ nhận thấy rằng tôi đã thêm thuộc tính khác vào phần tử này, thuộc tính "alt" hoặc văn bản thay thế. Đây không phải là thuộc tính bắt buộc đối với hình ảnh, nhưng thực tiễn tốt nhất là luôn đưa nội dung này vào khả năng truy cập. Văn bản được liệt kê trong giá trị của thuộc tính alt là nội dung sẽ hiển thị nếu hình ảnh không tải được vì lý do nào đó.
Một phần tử khác yêu cầu các thuộc tính cụ thể là thẻ neo hoặc thẻ liên kết. Phần tử này phải bao gồm thuộc tính "href", viết tắt của "tham chiếu siêu văn bản". Đó là một cách ưa thích để nói "nơi liên kết này nên đi". Giống như phần tử hình ảnh cần phải biết hình ảnh nào cần tải, thẻ liên kết phải bạn biết nó ở đâu. Dưới đây là cách thẻ liên kết có thể trông như thế nào:
Liên kết đó giờ đây sẽ đưa một người đến trang web được chỉ định trong giá trị của một thuộc tính. Trong trường hợp này, nó là trang chính của.
Thuộc tính như CSS Hooks
Một cách sử dụng các thuộc tính khác là khi chúng được sử dụng như là "móc" cho các kiểu CSS. Bởi vì các tiêu chuẩn web quyết định rằng bạn nên giữ cấu trúc của trang (HTML) tách biệt với các kiểu của nó (CSS), bạn sử dụng các móc thuộc tính này trong CSS để quyết định cách trang cấu trúc sẽ hiển thị trong trình duyệt web. Ví dụ: bạn có thể có phần đánh dấu này trong tài liệu HTML của mình.
Nếu bạn muốn bộ phận đó có màu nền đen (# 000) và kích thước phông chữ là 1.5em, bạn sẽ thêm màu này vào CSS của mình:
.featured {background-color: # 000; kích thước phông chữ: 1,5em;}Thuộc tính lớp "nổi bật" hoạt động như một móc mà chúng tôi sử dụng trong CSS để áp dụng kiểu cho khu vực đó. Chúng tôi cũng có thể là một thuộc tính ID ở đây nếu chúng tôi muốn. Cả hai lớp và ID là các thuộc tính phổ quát, có nghĩa là chúng có thể được thêm vào bất kỳ phần tử nào. Chúng cũng có thể được nhắm mục tiêu với các kiểu CSS cụ thể để xác định sự xuất hiện trực quan của phần tử đó.
Về Javascript
Cuối cùng, việc sử dụng các thuộc tính trên các phần tử HTML nhất định cũng là thứ bạn có thể sử dụng trong Javascript. Nếu bạn có một tập lệnh đang tìm kiếm một phần tử có thuộc tính ID cụ thể, đó là một cách sử dụng phần phổ biến khác của ngôn ngữ HTML.