 |
| HTML-TIME-TAG |
<time> Tag in HTML5
1. Introduction of <time> tag
2. Syntax of <time> tag
3. Attributes & events of <time> tag
4. Example of <time> tag
Introduction to HTML5 <time> Tag
Many times you need to show on the webpages when a job is done at which time, which day, month and year. For example, when an article is published, its published date and time is shown.
There was no tag before HTML5 that could markup date and time. Before it, we were used JavaScript (date object), microformats and microdata etc. HTML5 provides <time> tag to markup date and time in a web page. <time> tag represents date and time in the Gregorian calendar.
The main purpose of introducing this tag is to easily index the time and date of the webpage by search engines. If you use the <time> tag then any type of search engine crawler can easily see, what is the published date and time of the post?
Before the <time> tag, search engine crawlers had to use different ways to address this. It was a very time consuming and complex task.
The <time> tag is a machine-readable format for showing time ont the webpage. This can be easily understood by all the search engines. With the <time> tag you can present date and time in good looking formate for both the user and machine.
Syntax of HTML5 <time> Tag
The syntax of <time> tag is given as below.
<time attribute = "value"> Text </ time>
As you can see in the syntax, it is defined the <time> tag by the opening and closing tags. Two attributes are available with <time> tag which you will learn in this tutorial. You can define the text that you want to mark between the opening and closing tag.
Attributes of HTML5 <time> Tag
Two attributes are available with this element. These are given below.
datetime
By this attribute, you can define time in the machine-readable format. The datetime attribute is specified in yyyy-mm-dd format. There is a year, month and day. If you do not want to define the day, you can define year and month (yyyy-mm) only.
Example of HTML5 <time> Tag
Example of datetime attribute is given below.
The above example produces the output below.
 |
| TIME-TAG-DATETIME-ATTRIBUTE |
pubdate
This attribute shows that the date and time defined in the <time> element is the publication time and date of the document. This attribute indicates the publication date of that article.
This is explained by the example.
The output of the above script is given below.
 |
| TIME-TAG-PUBDATE-ATTRIBUTE |
As you can see in the above example, the date is defined by datetime attribute. The pubdate attribute here indicates the publication date of the article defined above. This example produces the output below.
There is no need to define the value of pubdate. But stilL, you can define it as well.
<time datetime = "2018-12-16" pubdate = "pubdate"> December 16th 2018 </ time>
Both of these methods are valid for definition pubdate attribute.
One thing you should always keep in mind is that the time is defined for the time machine (search engine crawlers) defined by the datetime attribute of the tag and the time defined as a string between the opening and closing tags are displayed to the user.
<time> tag also supports global attributes and events attributes of HTML.
Мy brother suggested І might like thіs blog.
ReplyDeleteΗe ԝaѕ entirely right. Thіs post tгuly mɑde my day. Ⲩou cann't imagine just һow
much time І haԁ spent for tһis information! Thankѕ!
Someone necessarily lend a hand to make severely posts I
ReplyDeletewould state. That is the very first time I frequented your web page and to this point?
I amazed with the analysis you made to make this particular put up amazing.
Great task!
By the way, I heard about this awsome affiliate program for Instagram influencers.
Better apply soon before all the spots are filled up. Here is the link:
http://ix.sk/psMTV