HTML - Microdata: Hướng dẫn dành cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của HTML Microdata. Đừng lo lắng nếu bạn là người mới bắt đầu - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau học từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ ngạc nhiên vì biết được nhiều điều!

HTML - Microdata

Microdata là gì?

Trước khi chúng ta bắt đầu, hãy bắt đầu từ những điều cơ bản. Microdata là cách để thêm ý nghĩa cho nội dung HTML của bạn. Nó giống như tặng cho trang web của bạn một ngôn ngữ bí mật mà các công cụ tìm kiếm và các chương trình máy tính có thể hiểu. Đủ thú vị phải không?

Sử dụng Microdata trong tài liệu HTML

Bây giờ, hãy cùng nhau làm việc với một chút mã code! Dưới đây là một ví dụ đơn giản về cách chúng ta có thể sử dụng Microdata:

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
<span itemprop="telephone">(123) 456-7890</span>
</div>

Hãy phân tích này:

itemscope告诉浏览器 rằng <div> này chứa Microdata.
itemtype xác định loại mục chúng ta đang mô tả (trong trường hợp này, là một Person).
itemprop gán nhãn cho các thông tin cụ thể (tên, chức vụ, điện thoại).

Hãy tưởng tượng như điền một mẫu về một người. Mỗi itemprop giống như một trường trong mẫu đó.

Các thuộc tính toàn cục

Microdata giới thiệu một số thuộc tính mới có thể được sử dụng trên bất kỳ phần tử HTML nào. Hãy nhìn chúng trong bảng sau:

Thuộc tính	Mô tả
itemscope	Chỉ ra rằng HTML chứa Microdata
itemtype	Xác định từ điển (ví dụ: schema.org)
itemprop	Định nghĩa một thuộc tính của mục
itemid	Cung cấp một идентификатор duy nhất cho mục
itemref	Tham chiếu đến các thuộc tính không phải là con của itemscope

Các loại dữ liệu thuộc tính

Khi chúng ta sử dụng Microdata, chúng ta có thể xác định các loại dữ liệu khác nhau. Dưới đây là bảng khác hiển thị một số loại dữ liệu phổ biến:

Loại dữ liệu	Ví dụ
Text	`<span itemprop="name">John Doe</span>`
Number	`<span itemprop="age">30</span>`
Date	`<time itemprop="birthDate" datetime="1990-05-15">May 15, 1990</time>`
URL	`<a href="http://example.com" itemprop="url">My Website</a>`

Hỗ trợ API Microdata

Bây giờ, hãy nói về điều thực sự thú vị! Các trình duyệt hỗ trợ Microdata có một API đặc biệt (Application Programming Interface) cho phép JavaScript tương tác với Microdata trên trang.

Dưới đây là một ví dụ đơn giản:

var items = document.getItems("http://schema.org/Person");
for (var i = 0; i < items.length; i++) {
var name = items[i].properties["name"][0];
console.log("Found person: " + name);
}

Mã này tìm tất cả các mục "Person" trên trang và ghi tên của chúng vào console. Nó giống như có một chức năng tìm kiếm siêu mạnh cho HTML của bạn!

Định nghĩa từ điển Microdata

Cuối cùng, hãy nói về từ điển. Một từ điển là như một từ điển cho Microdata. Nó định nghĩa các thuộc tính mà một mục có thể có. Từ điển phổ biến nhất được sử dụng là Schema.org, được hỗ trợ bởi các công cụ tìm kiếm lớn.

Dưới đây là một ví dụ sử dụng từ điển Schema.org cho một bộ phim:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">Science Fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Trong ví dụ này, chúng ta đang mô tả một bộ phim với tên, đạo diễn, thể loại và liên kết đến trailer của nó. Các công cụ tìm kiếm có thể sử dụng thông tin này để hiển thị các片段 phong phú trong kết quả tìm kiếm.

Kết luận

Và thế là chúng ta đã cùng nhau hành trình qua vùng đất của HTML Microdata, từ những khái niệm cơ bản đến những sử dụng nâng cao. Nhớ rằng, Microdata là về việc thêm ý nghĩa vào HTML của bạn, giúp máy móc hiểu nội dung của bạn tốt hơn.

Khi bạn tiếp tục hành trình phát triển web của mình, bạn sẽ thấy rằng Microdata giống như một vũ khí bí mật trong bộ công cụ của bạn. Nó giúp các công cụ tìm kiếm hiểu nội dung của bạn tốt hơn, có thể cải thiện khả năng hiển thị của trang web của bạn. Ngoài ra, nó còn là một cách tuyệt vời để cấu trúc dữ liệu của bạn theo một định dạng tiêu chuẩn.

Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy vui vẻ với nó! Ai biết được, trang web tiếp theo bạn xây dựng với Microdata có thể chính là người thay đổi thế giới. Chúc các bạn may mắn!

Credits: Image by storyset