HTML5 Months and Dates

Microsyntax Dates and Times in HTML – Part 1

Foreword: In this part of the series, I talk about the machine-readable format for months and dates in HTML 5.

By: Chrysanthus Date Published: 1 Jul 2015

Introduction

This is part 1 of my series, Microsyntax Dates and Times in HTML. In this part of the series, I talk about the machine-readable format for months and dates in HTML 5. Version HTML4 and below did not have this feature. In HTML today, microsyntax means machine-readable. I will first of all talk about the HTML elements that need these mycrosyntax formats for dates and/or times before I talk about the months and dates formats.

The elements concerned are the time, ins, del and form input elements. time is a text-level semantic element. ins and del are Edit Elements. I call the elements of time, ins and del, text elements.

The time Element
The time element is a double tag element. It has an attribute called, datetime that is optional. The idea is that you type the date and/or time as content to the time element in the way the user is used to; then you type the same date and/or time as value to the datetime attribute in microsyntax format. The computer (machine) or ECMAScript is to read the attribute value of the time element and not the content. The content is for the user (Internet reader).

Assume that you are a USA citizen, producing a web page for USA citizens. A date for the time content, will be something like, June 27 2015, while the corresponding value to the datetime attribute, will be 2015-06-27, which is the microsyntax format (see below).

Note: You no longer have to type time arbitrarily in an HTML document. If you want to type time, you have to use the time element.

The ins Element
The ins element, meaning insert element, represents an addition to the HTML document. It is a double tag element. Its content is the insertion. The element has two attributes, which are cite and datetime. The cite attribute is for a link (URL) to the source of the quotation or more information about the edit. The value of the datetime attribute is for the date and/or time when the insertion was made in microsyntax format. This is to be read by the machine (or ECMAScript), and not by human.

The del Element
The del element represents a removal from the document. The element is not really removed from the document. It remains there but possibly stroked by a line. It is a double tag element. It has a cite and datetime attribute for similar reasons as the ins element.

The Form input Element
This is a single tag element found in a form. It can be typed like,

<input type=date>

or like,

<input type=time>

or in some other variety. The shape and sometimes the purpose of the input element depend on the value of the type attribute. Here, the idea is, if the type attribute is date, then the user can type the date in a manner he is used to; then your ECMAScript will convert what has been typed to a microsyntax format and assign the result to the value of the input element. If you do not have ECMAScript to do this, then the user has to type (input) the date in microsyntax format.

If the type attribute value is time, then the user can type the time in a manner he is used to; then your ECMAScript will convert what has been typed into a microsyntax format and assign the result to the value of the input element. If you do not have ECMAScript to do this, then the user has to type (input) the time in microsyntax format.

For the rest of this tutorial, I explain the microsyntax formats for months and dates.

Pre-Knowledge
This series is part of my HTML professional course. At the bottom of this page, you have links to the different series you should have studied before reaching here.

MicroSyntaxes for HTML Months and Dates

Before we continue, know that the sign > means, greater than; the sign < means, less than; the sign ≤ means, less than or equal to.

Months
In HTML today, a month consists of a month and year; not just month. A string is a valid month string representing a year and month if it consists of the following components in the given order:

Four or more digits, representing year, where year > 0; no space, then a - character; no space, then two digits representing the month in the range 1 ≤ month ≤ 12.

If the month has one digit, e.g. 5, then you have to precede that digit with a zero.

Examples of microsyntax months are: 2015-06 and 2016-12.

Dates
Users type dates in different countries in different ways. However, the microsyntax has just one format. A string is a valid date string representing a year, month, and day of the month, if it consists of the following components in the given order:

A valid month string (see above), representing year and month; no space, a – character; no space, two digits representing day of the month, in the range 1 ≤ day ≤ maxday, where maxday is the number of days in the month (and year).

Examples of microsyntax dates are: 2015-06-22 and 2016-12-03.

Yearless Date
This is no big deal. A date consists of a year, month and day of the month. A microsyntax yearless date is a date without the year; but it has the month and the day of the month.

A string is a valid yearless date string representing a month and a day if it consists of the following components in the given order:

Optionally, two – characters; no space, two digits representing the month in the range 1 ≤ month ≤ 12; no space, a – character; no space, two digits representing day in the range 1 ≤ day ≤ maxday, where maxday is the number of days in the month.

Examples of yearless dates are 06-22 and 12-03.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML5 Months and Dates

Microsyntax Dates and Times in HTML – Part 1

Introduction

MicroSyntaxes for HTML Months and Dates

Related Links

Comments