HTML-Zeit-Tag

Wie wir alle wissen, entwickelt sich HTML im Bereich der Webentwicklung ständig weiter und ist weltweit eine beliebte Auszeichnungssprache. Es wird gesagt, dass Webentwickler das HTML-Element aktualisieren und kennen lernen müssen. In diesem Artikel lernen wir einige wichtige Tags kennen, die als Zeit-Tag bezeichnet werden. Für Menschen ist es einfach, Datum und Uhrzeit in vielen Formen zu lesen, aber wenn es um Maschinen geht, ist es nicht einfach, bis dahin kommt herein. Dieses Tag definiert einen bestimmten Zeitraum und gibt Datum und Uhrzeit für die jeweiligen Webseiten an. Daher sind sie sehr nützlich und stellen das für Menschen lesbare Tag dar. Dieses für Menschen lesbare Format ist ein wertvolles Format von Internetprotokollen. Die -Tag wird in HTML 5 unterstützt, jedoch nicht in der HTML 4.01-Version.

Die Zeit kann auf folgende Weise definiert werden:

• Zeitdauer
• Richtige Zeit im 24-Stunden-Format
• Das Datum im Gregorianischen Kalender

Dank der Vorteile des Zeitfortschritts sind Webseiten strukturierter und machen den HTML-Code für Suchmaschinen leichter lesbar, um die Idee auf der Webseite zu analysieren, sowie Vorteile für die Entwicklung der Veranstaltungsplanung und aller zeitbezogenen Veranstaltungsfunktionen. Beispielsweise wird die Suchmaschine mit aktuellen Ereignissen verknüpft, wodurch die aktuelle Webseite durch visuelle Zeitereignisse höher eingestuft wird.

Syntax:

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

Durch die Verwendung des grundlegenden Datums-/Uhrzeitattributs erhält das Zeit-Tag Eindeutigkeit mit bestimmten Formaten, da es für Computer gedacht ist.

Aus der obigen Syntax geht hervor, dass Das Tag enthält sowohl die Uhrzeit als auch das Datum oder sogar beides zusammen. Das erwartete Format wird vom größten Zeitraum bis zum unteren Zeitraum Jahr – Monat – Datum hh: mm: ss Zeitzone angegeben. Wenn das Attribut „Datum/Uhrzeit“ nicht vorhanden ist, wird dieses Format verwendet.

Attribute

Attribute spielen in HTML eine wichtige Rolle. Mit diesem HTML-Element hat der Benutzer die Flexibilität, Termine zu seiner Arbeit und Geburtstagserinnerungen zu seinen jeweiligen Kalendern hinzuzufügen; Ein weiterer Vorteil besteht darin, dass Suchmaschinen uns bessere Suchergebnisse liefern können. Dieses Zeitelement unterstützt globale und Ereignisattribute; Abgesehen davon ist Datum und Uhrzeit ein wesentliches Attribut. Um Werte wie „Montag“ anzuzeigen, wird das Datums-/Uhrzeitattribut „Freitag“ dargestellt.

Die folgende Tabelle veranschaulicht das Attribut und seine Beschreibung für dieses Element:

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.

Attributname Beschreibung DatumUhrzeit Es gibt eine maschinenlesbare Eingabezeit des Elements an. Veröffentlichungsdatum Es hat einen booleschen Wert, der das Veröffentlichungsdatum des Inhalts angibt.

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.

Das obige ist der detaillierte Inhalt vonHTML-Zeit-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!