How to use the HTML datetime Attribute
This Blog You Will Learn
ஃWhat is the datetime Attribute
ஃ Why Use the datetime Attribute
ஃ When to use the datetime Attribute
ஃ Syntax
ஃ Explain Program
ஃ Output
What is the datetime Attribute
✅HTML datetime attribute is use store a date and time value in machine-readable format.
✅ <time> - representing date and times
✅<del> - text was deleted
✅<ins> - text was inserted
Why Use the datetime Attribute
- provides machine-readable data
- Help search engines
- more semantic and accurate
- Allow integration
- Improves accessibility
- human -friendly text while storing exact timestamp data
When to use the datetime Attribute
✔ Event Schedules
✔ blog publication dates
✔ inserted or deleted text timestamps
✔ Historical dates
Syntax
Syntax of HTML <datetime> tag
<input type="datetime-local" id="datetime">
How to use the HTML datetime Attribute
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Input Type Datetime </title>
</head>
<body><center>
<h3> HTML input type="datetime" element</h3>
<form>
<label>Select your DateTime :-</label>
<input type="datetime-local" id="datetime" >
</form>
</center>
</body>
</html>
How to use the HTML datetime Attribute
Explain Program
Step 1]
<!DOCTYPE html>
This declare the document type.
browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
<title> HTML Input Type Datetime </title>
</head>
- <head> section
- head section contains metadata about page. not visible on the page itself.
- <title> tag
- title section set the title of the page shows the browser tab.
Step 4]
<body><center>
- < body> tag contains all the content visible to webpage.
- <body> tag contains all the visible content of the page.
- inside <body> show the browser screen.
- <center> all the content center
Step 5]
<h3> HTML input type="datetime" element</h3>
- <h3> tag is a level 3 heading.
- display a title on the page
Step 6]
<form>
<label>Select your DateTime :-</label>
<input type="datetime-local" id="datetime" >
</form>
- <form> tag defines HTML form user can input data.
<label>Select your DateTime :-</label>
- <label> tag provide Text label for input field.
- label tag accessibility because screen readers can read the label user understand input.
- allows user to click on the label to focus input user.
<input type="datetime-local" id="datetime" >
- <input type> create a date and time input field.
- id assign unique identifier .
- user click the field and choose date and time picker.
Step 7]
closing the Tag
</center>
</body>
</html>
How to use the HTML datetime Attribute
Output
Related Post :-
