Balise de temps HTML

Comme nous le savons tous, le HTML est en constante évolution dans le domaine du développement Web et c'est un langage de balisage populaire dans le monde entier. On dit que les développeurs Web doivent mettre à jour et se renseigner sur l'élément HTML. Dans cet article, nous apprendrons quelques balises importantes appelées balises temporelles. Il est facile pour les humains de lire la date et l'heure sous de nombreuses formes, mais lorsqu'il s'agit de machines, il n'est pas facile d'analyser le entre. Cette La balise définit une période particulière et spécifie la date et l'heure des pages Web particulières. Par conséquent, ils sont très utiles et représentent la balise lisible par l’homme. Ce format lisible par l’homme est un format précieux de protocoles Internet. Le La balise est prise en charge dans HTML 5 mais pas dans la version HTML 4.01.

L'heure peut être définie des manières suivantes :

• Durée
• Heure correcte sur 24 heures
• La date sur le calendrier grégorien

Avec les avantages de la progression du temps, les pages Web sont plus structurées et permettent aux moteurs de recherche de lire facilement le code HTML pour analyser l'idée sur la page Web et offrent des avantages pour le développement de la planification d'événements et de toute fonction événementielle liée au temps. Par exemple, le moteur de recherche est connecté aux événements actuels, ce qui permet de classer la page Web actuelle plus haut en fonction des événements temporels visuels.

Syntaxe :

<time> 2020-01-28 </time>

L'utilisation de l'attribut date-heure de base donne à l'étiquette temporelle un caractère unique avec des formats spécifiques car elle est destinée aux ordinateurs.

D'après la syntaxe ci-dessus, il est dit que le la balise contient à la fois l’heure, la date ou même les deux ensemble. Le format attendu est donné de la période la plus grande à la période la plus basse année – mois-date hh : mm : ss fuseau horaire. En l'absence de l'attribut Date Heure, ce format est utilisé.

Attributs

L'attribut joue un rôle important en HTML. Avec cet élément HTML, l'utilisateur a la possibilité d'ajouter des dates de planning sur son travail et des rappels d'anniversaire sur ses calendriers respectifs ; un autre avantage est que les moteurs de recherche peuvent nous donner de meilleurs résultats de recherche. Cet élément temporel prend en charge les attributs globaux et d'événement ; en dehors de cela, un attribut essentiel est la date et l'heure. Pour afficher les valeurs telles que « Lundi », l'attribut date-heure « Vendredi » est représenté.

Le tableau ci-dessous illustre les attributs et leur description liés à cet élément :

Attribute Name	Description
DateTime	It specifies a machine-readable input time of the element.
Pubdate	It has a Boolean value that Specifies the publication date of the content.

Nom de l'attribut Description DateHeure Il spécifie un temps d'entrée lisible par machine de l'élément. Publier Il a une valeur booléenne qui spécifie la date de publication du contenu.

There are some different ways of representing the date-time attribute. The profile of ISO 8601 provides the standards which follow the ABNF notation. And the letters below ‘T’ and ‘Z’ should be declared in the Upper case.

1. Year and Month

Very Simple Format with the year before.

2019 – 08

2. Date Alone

1946-08-17

3. Date without Year

08-21

4. Only Time Display

13: 55: 30. 522

5. Date and Time

2014 – 08 -21T15:55

Here T is for separation between Date and Time.

6. Time Zone Format

It initiates with either plus or minus and, in some cases, ( : ) is replaced With the capital ‘Z’.

+ 08 : 05

7. Year and Week

Follow the corresponding number of weeks after the letter ‘W’ to represent a week.

2017 – W 20

8. Duration (with Two methods)

2w 3d 4 h 25 min 12.402s

Also, it supports global attribute along with this element like id, class, style and supporting event attributes like onabort, onfocus, onclick, onmousedown, onmouseout, onkeyup, onchange, ondrag, ondrop, onselect, onmessage, onscroll.

Examples to Implement HTML Time Tag

Using this tag, You can display the date or time without a datetime attribute. The following are some examples:

Example #1 – using a tag.

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML Time Tag
</title>
</head>
<body style="text-align:left;">
<h2>HTML Time Tag demo</h2>
<p> India celebrate as
<time>2020-01-26</time> Republic day
</p>
</body>
</html>

Output:

Example #2

Making a time element to the title attribute to show detailed information about the user in a nice human-readable or machine-readable format.

Code:

<!DOCTYPE html>
<html>
<body>
<h2> <center> Date Time Example </center> </h2>
<h3>The Stand- Up Comedy show starts at <time datetime="2018-07-04T20:00:00Z">20:00</time> coming Saturday.</h3>
<h3>The preview show starts in <time datetime="PT3H0M3S">5h 1m 0s</time>.</h3>
</body>
</html>

In the below Output, the time tag instructs the browser about the text used between the attribute is a time reference ( 5 h 1m 0s) but doesn’t display the time attribute.

Output:

Example #3 – Using Css.

Code:

<!doctype html>
<html>
<body>
<article>
<body style="background-color:yellow;">
<h1>Title of the document</h1>
<p>Introduction to the Article</p>
</article>
<footer>
<p>This content is published on <time>2016-1-20</time>.</p>
<p>Our shop opens at <time>08:00</time>.</p>
</footer>
</body>
</html>

Output: 

Example #4 – Using pubdate attribute.

Code:

<!DOCTYPE html>
<html>
<body>
<article>
<h1>A good Article</h1>
<p>Introduction on a given Article.</p>
<footer>
<p>Content published on <time datetime="2019-02-04" pubdate>February the 4th, 2019</time>
</footer>
</article>
</body>
</html>

Output:

Conclusion

Therefore, we learned how to work with the tag and also came to know how the web crawlers interpret the date and time on the web page. People started using the time tag in the HTML document as the usage of this tag increased in search engines. Using the date/time attribute, the browser clarifies the time, and some websites make their default time theme, like Reddit, word press, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!