Hướng dẫn thẻ <time> trong HTML5

Hướng dẫn thẻ <time> trong HTML5
      Accelerated Mobile Pages

HTML5 ra đời đã sử dụng các thẻ element (phần tử) để mô tả rõ ràng ý nghĩa của nó cho cả trình duyệt và người lập trình hiểu. Đó được gọi là Các...

HTML5 ra đời đã sử dụng các thẻ element (phần tử) để mô tả rõ ràng ý nghĩa của nó cho cả trình duyệt và người lập trình hiểu. Đó được gọi là Các yếu tố ngữ nghĩa trong HTML5. Hôm nay hãy cùng Tạp Chí Web tìm hiểu về thẻ < time > trong HTML5.

Thời gian là một khái niệm vô tận. Con người, động vật hay thực vật đều đã trải qua khái niệm này ngay từ khi xuất hiện. 

Trên thiết kế web cũng vậy, nhu cầu cũng không khác nhau. Trong môi trường này, chúng ta cũng cần phải giao tiếp với người khác ở những thời điểm nhất định về ngày, giờ…

Trước khi [HTML5] ra đời, chúng ta không có một yếu tố ngữ nghĩa nào để đánh dấu thời gian. Trong những năm gần đây, xuất hiện một số giải pháp đáng chú ý nhất là Microformats và MIcrodata, đã cố gắng chỉnh sửa lỗ hổng này cho các trường hợp cụ thể (ví dụ như ngày tháng năm sinh, thời gian xuất bản…).

the time trong html5
Hướng dẫn thẻ < time > trong HTML5

Và khi HTML5 ra đời thì điều này đã không còn phải lo lắng nữa. Trong bài viết này, Tạp chí web sẽ hướng dẫn một số tài liệu thiết kế web về thẻ < time > trong HTML5, giúp giải quyết các vấn đề về thời gian.



Các thẻ < time > đã được giới thiệu trong HTML5 vào năm 2009. Sau đó vào năm 2011 thì thẻ < time > bị loại bỏ thay vào đó là thẻ < data >. Tuy nhiên sau đó thẻ < time > lại được giới thiệu lại và cải thiện các định dạng thời gian mới. Lúc này, thì thẻ < time > gây khá nhiều tranh cãi trong cộng đồng thiết kế và phát triển web.

Các thẻ < time > miêu tả một ngày hoặc một mốc thời gian trong lịch Gregorian. Đây là một inline element (như < span > và < a >) và closing tag (như < div > và < span >). Khi được sử dụng ở dạng đơn giản nhất, nội dung của các phần tử sẽ là một chuỗi giá trị ngày/giờ hợp lệ. 

Một ví dụ như sau:
Trong đoạn mã trên, xác định một ngày cụ thể là ngày 01 tháng 2 năm 2009. Định dạng được sử dụng trong đoạn code trên là ( yyy-mm-dd ) khá quen thuộc với những ai đã có nhiều thời gian phát triển trên Linux, nhưng sau này thì có nhiều định dạng khác hợp lệ nữa.

Trong phiên bản đầu tiên thì yêu cầu phải có ngày chính xác trong định dạng. Ví dụ bạn không thể chỉ để “Tháng 11 năm 2014”. Đây là một vấn đề lớn đối với các trường hợp ngày chưa được xác định chính xác.

May mắn là sau này định dạng không chứa ngày đã được cho phép sử dụng. Bạn có thể mô tả năm và tháng mà không cần ngày. 
Thuộc tính datetime

Các thuộc tính kỹ thuật cho thẻ < time > cũng được tiêu chuẩn hóa với một thuộc tính gọi là datetime.

Trong khi viết ngày định dạng ngày như thảo luận ở trên thì một số quốc gia/nền văn hóa sẽ không phù hợp. Ví dụ, người Ý viết ngày bằng cách sử dụng định dạng dd / mm / yy . Do đó, hiển thị ngày ở các định dạng khác có thể dẫn đến nhầm lẫn.

Vấn đề này có thể được giải quyết bằng cách sử dụng thuốc tính datetime của thẻ < time >. Đây là một thuộc tính tùy chọn có chứa các thông tin trong định dạng machine readable, cho phép chúng ta ghi ra các nội dung của nguyên tố theo bất kỳ cách mà chúng ta muốn.

Trong thực tế, nếu datetime không được xác định, nội dung sẽ tự chuyển đổi là một định dạng date/time hợp lệ, hoặc có thể tự sử dụng theo ý muốn của mình. Chúng ta có thể viết đoạn code như sau:
Hay thậm chí là
Cả hai ví dụ trên chứa nội dung ngày mà không phải là machine readable theo các thông số kỹ thuật, tuy nhiên chúng cũng được chấp nhận bởi vì sự hiện diện của thuộc tính datetime, được sử dụng như một định dạng hợp lệ. 

Thoạt nhìn, thì điều này có vẻ kỳ lạ. Tuy nhiên nội dung của thẻ < time > đã được thiết kế để phục vụ con người, chứ không phải máy móc. Bên cạnh đó, thực tế này cho phép việc quốc tế hóa ngày giờ. Ví dụ
Thuộc tính pubdate

Thuộc tính pubdate cho biết rằng đây là ngày công bố bài viết theo yêu cầu. Ví dụ đoạn code bên dưới:

This is the content of a great article.

Article published on



Trong trường hợp này, ngày 05 tháng 09 năm 2014 sẽ là ngày công bố bài viết này.

Tuy nhiên,thật không may thì thuộc tính pubdate đã được gỡ bỏ từ các spec. Quyết định này tạo ra một vấn đề lớn cho những ai sử dụng ngày công bố để đánh giá sự tươi mới và mức độ liên quan của một bài báo hay tin tức. Trong khi chúng ta vẫn có thể truy cập vào trang và xem ngày xuất bản, thì cũng cần một cách thức chuẩn dành cho máy móc để đọc date. 

Nếu muốn sử dụng thay thế pubdate, bạn có thể dùng giản đồ BlogPosting hay datePublished như minh họa bên dưới:

This is the content of a great article.

Article published on


Bây giờ tì bạn đã có một cái nhìn tổng quan đầy đủ về thẻ < time >, chúng ta hãy xem xét một số định dạng cho phép.

Các định dạng nội dung hợp lệ của thẻ < time > khi không sử dụng thuộc tính datetime như sau:

1/ Tháng

Đây là một chuỗi xác định một tháng cụ thể trong năm ở dạng yyyy-mm. Ví dụ
2/ Ngày (Ngày trong tháng)

Đây là một chuỗi xác định chính xác ngày trong định dạng yyyy-mmm-dd. Ví dụ
3/ Ngày/tháng không có năm

Đây là một chuỗi xác định ngày và tháng mà không có thời gian năm ở dạng mm-dd/ Ví dụ:
4/ Thời gian

Đây là một chuỗi xác định thời gian không có ngày và sử dụng ở định dạng 24 giờ, trong form HH:MM[:SS[.mmm]], trong đó:

- H là viết tắt của hour (giờ)
- M là viết tắt của minute (phút)
- S: là viết tắt của second (giây)
- m là viết tắt của milliseconds (mili giây)

Một ví dụ về định dạng này được hiển thị dưới đây:
Hay ví dụ khác
5/ Thời gian dự trữ

Định dạng này có mặt trong spec [W3C] nhưng không có trong phiên bản WHATWG. Điều này cần được yêu cầu chính xác thời gian theo định dạng: yyyy-mm-ddTHH:MM[:SS[.mmm]] hoặc yyyy-mm-dd HH:MM[:SS[.mmm]]. Ví dụ:
6/ Time Zone Offset
7/ Ngày/giờ toàn cầu

Đây là một chuỗi giá trị thông tin thời gian toàn bộ bao gồm thời gian và múi giờ. Ví dụ: 
<16th September 2014 at 18 hours,      20 minutes, and 30 seconds in a      time zone of GMT+1 (like Italy)>
8/ Tuần 

 Đây là một chuỗi xác định cụ thể một tuần trong năm. Ví dụ
9/ Năm

Đây là một chuỗi xác định năm cụ thể. Ví dụ 
<2014>
10/ Chuỗi khoảng thời hạn

Đây là một chuỗi xác định một khoảng thời gian. Một khoảng thời gian có thể bắt đầu với tiền tố “P” nghĩa là “period”, và sử dụng “D” để đánh dấu ngày. Ví dụ:
Trong trường hợp bạn cần phải tiếp tục xác định khoảng thời gian, sau “D” bạn có thể thêm “T” nghĩa là “time” và sử dụng “H” cho “hour”, “M” cho phút và “S” cho giây. Chẳng hạn: 
A duration of four days,      four hours, and three minutes
Định dạng này cho phép bạn chỉ định một hoặc nhiều thành phần thời gian khác nhau.

Hạn chế

Các thông số kỹ thuật hiện nay có một số hạn chế trong những gì bạn có thể xác định với thẻ < time >. Một trong những hạn chế là bạn không thể chỉ ra phạm vi ngày. Vì vậy, nếu bạn đang viết bài cho hội nghị kéo dài hơn 1 ngày, chẳng hạn từ ngày 26 tháng 6 năm 2014 đến ngày 28 tháng 6 năm 2014, thì bạn phải sử dụng hai thẻ < time >/ Một ví dụ như sau: 
-
1 <time datetime="2014-06-28">26<span class="hidden">June 2014</span></time>-<time datetime="2014-06-28">28 June 2014</time>

Hỗ trợ trình duyệt

Thẻ < time > được hỗ trợ trong các trình duyệt

- Chrome 33+
- Firefox 2+
- Internet Explorer 9 +
- Opera 22 +
- Safari 7 +

Tuy nhiên cũng đừng lo lắng với các trình duyệt cũ hơn. Trong thực tế, trong trường hợp phần tử này thiếu hỗ trợ chỉ đơn giản là trình duyệt sẽ hiển thị nó như một phần tử nội tuyến không rõ ràng.

Kết luận

Nếu bạn chưa từng sử dụng thẻ < time > trên thiết kế web của mình, thì Tạp Chí Web hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn. Nếu bạn đang bắt đầu tìm hiểu HTML5 thì hãy tải ngay bộ tài liệu thiết kế web HTML5 cơ bản để tìm hiểu và thực hành đi nhé. Chúc thành công!