The HTML5 time element represents dates and times in a machine-readable format using the datetime attribute, enhancing accessibility and SEO. It displays custom text to users while providing precise temporal data to machines. For dates, use YYYY-MM-DD; for times, use HH:MM or HH:MM:SS, optionally combined with a date separated by "T". Durations follow ISO 8601's "P" format like P2H30M for 2 hours and 30 minutes. This element aids screen readers and search engines, especially when paired with schema.org markup, improving rich snippets for events or publications. Always include datetime when visible text isn't a standard format.
The HTML5 time element is used to represent dates and times in a machine-readable format while allowing custom display text. It helps search engines, assistive technologies, and other tools understand temporal data on your page.
Basic Syntax and Use
The time element uses the datetime attribute to specify the machine-readable date or time. The content inside the tag is what users see.
- If no datetime is provided, the visible text must already be a valid date/time format.
- Use it for publication dates, event times, durations, and any time-related data.
Representing Dates
To mark up a full date, use the YYYY-MM-DD format in the datetime attribute.
The event starts on .
This tells browsers and crawlers that October 15 refers to October 15, 2025.Representing Times
For specific times of day, use the HH:MM or HH:MM:SS format. Include the date if context requires it.
Examples:The "T" separates the date and time when both are included.
Marking Durations
You can represent time spans using the "P" duration syntax from ISO 8601.
Example: This means a duration of 2 hours and 30 minutes. Useful for movies, workouts, or events.Accessibility and SEO Benefits
The time element improves accessibility by giving screen readers clear temporal information. Search engines may use it to enhance rich snippets in results, especially for events or articles.
- Always include datetime when the visible text isn’t a standard date/time string.
- Use it with microdata or schema.org markup for even better SEO.
The above is the detailed content of How to use the HTML5 time element for dates and times. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to use server-sent events (SSE) in HTML5?
Sep 21, 2025 am 06:11 AM
SSEenablesreal-time,unidirectionalserver-to-clientupdatesviaHTTP;useEventSourceinJavaScripttoconnect,handlemessageswithonmessage,setserverresponsetypetotext/event-stream,formatdatawith"data:"and"\n\n",andoptionallyincludeeventIDsf
How to use ARIA roles for accessibility in HTML5?
Sep 21, 2025 am 04:41 AM
ARIAenhanceswebaccessibilitybyaddingsemanticmeaningtoelementswhennativeHTMLisinsufficient.UseARIAroleslikerole="button",aria-expanded,andaria-labelforcustomcomponentsordynamiccontent,butalwaysprefernativeHTMLelementssuchasbuttonornav.Update
How to manage focus for accessibility in HTML5?
Sep 21, 2025 am 05:27 AM
UsesemanticHTMLelementslikeandfornativefocusabilityandkeyboardsupport.EnsurelogicaltaborderandvisiblefocusindicatorsviaCSS.Programmaticallymanagefocusindynamiccontentlikemodalsusingelement.focus(),trappingfocusinsideandreturningitafterclosure.ApplyAR
How to validate a form field against a regular expression in HTML5?
Sep 22, 2025 am 05:11 AM
UsethepatternattributeinHTML5inputelementstovalidateagainstaregex,suchasforpasswordsrequiringnumbers,uppercase,lowercase,andminimumlength;pairwithtitleforuserguidanceandrequiredfornon-emptyenforcement.
How to properly use the element in HTML5?
Sep 17, 2025 am 06:33 AM
ThetimeelementinHTML5representsdatesandtimesinamachine-readableformat,enhancingaccessibilityandSEO;usethedatetimeattributewithISO-formattedvaluestoprovidesemanticmeaning,especiallyforhuman-friendlytextordurations,ensuringconsistentinterpretationbymac
How to embed a PDF document in an HTML5 page?
Sep 21, 2025 am 05:08 AM
Use or embed PDF; it is simple and direct, supports alternate content, has good compatibility and can be removed from borders, and choose according to your needs.
How to make an HTML5 image map responsive
Sep 17, 2025 am 04:34 AM
To make HTML5 image map responsive, you can dynamically scale coordinates through JavaScript or absolutely position the overlay element using CSS; first make sure the image itself is responsive, and then recalculate the area area coordinates according to the original and current size ratio through JavaScript when page loading and window adjustment, or use a transparent link to cover the image with percentage positioning to achieve cross-device adaptation, and ultimately ensure that the interactive area is correctly scaled with the image. The two methods have applicable scenarios. The JavaScript solution is compatible with the original structure, and the CSS solution is simpler and requires no scripts. It should be selected according to project needs, and both need to test the multi-screen effect and ensure that the touch area is large enough. It is recommended to use JavaScript method for a simple layout of complex maps.
How to use the placeholder attribute in HTML5 forms?
Sep 23, 2025 am 05:17 AM
Theplaceholderattributeprovidesashorthintininputfields.Itappearsfaintlyanddisappearswhentypingbegins,supportedintext,email,tel,search,andtextareaelements.Useittoshowexampleslike"example@email.com",butnotasareplacementforlabels.Labelsensureb
