HTML datetime Attribute Explained with Examples

How to use the HTML datetime Attribute

html datetime tag

This Blog You Will Learn

ஃ What is the datetime Attribute

ஃ Why Use the datetime Attribute

ஃ When to use the datetime Attribute

ஃ Syntax

ஃ structure diagram examples

ஃ Explain Program

ஃ Output 

What is the datetime Attribute

The datetime HTML Attribute use  to specify  the exact date/ time in machine-readable format.

✅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

  1. provides machine-readable data
  2. Help search engines
  3. more semantic and accurate
  4. Allow integration 
  5. Improves accessibility
  6. 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">

structure diagram examples

HTML datetime Attribute Explained with Examples

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

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  ஃ   What Is CSS Text Color  ஃ   Syntax   ஃ   Purpose of Text Color  ஃ    Real world Use Cases  ஃ    What Is CSS Text Color  Example    ஃ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more