Widget / MiscellaneousS2C Home « Widget / Miscellaneous
In this lesson we look at the widget tags inroduced in HTML5 along with some other new tags that don't fit into any particualar category; these being the<data>, <details>, <dialog>, <summary> and <time> HTML tags.
The Data Element
The <data> tag and its' closing </data> tag are used for showing human-readable content along with a value that is machine-readable.
The Details Element
The <details> tag and its' closing </details> tag are used to specify additional information the user can open or close interactively.
Must be used with the <summary> child element which displays a heading for the contents of the <details> element.
The Dialog Element
The <dialog> tag and its' closing </dialog> tag represent part of a HTML document that the user can interact with.
The Summary Element
The <summary> tag and its' closing </summary> tag are used to define a header within the <details> tag where summary information can be clicked on to show/hide it.
The <summary> tag must be the first child element within the <details> tag.
The time Element
The <time> tag and its' closing </time> tag are used is used for defining the date and/or time within a HTML document.
<table> <tr> <th>Fruit</th> <th>Colour</th> <th>Quantity</th> </tr> <tr> <td><data value="11111">Banana</data><td> <td>Yellow</td> <td>5</td> </tr> <tr> <td><data value="22222">Pea</data><td> <td>Green</td> <td>50</td> </tr> </table>
In the example above we are giving each fruit a machine readable number via the <data> tag; this could for example be a stock number that a script could use for doing some processing on a particular kind of fruit.
Details & Summary Examples
<details> <summary>Server2Client Website</summary> <p>Tutorials on client and server programming.</p> </details> <hr> <details open> <summary>HTML5</summary> <p>Latest Specification.</p> </details>
Tutorials on client and server programming.
In the examples above we are creating two details elements, the second of which is open and you can see the summary contents.
<dialog>closed dialog window</dialog> <dialog open>open dialog window</dialog>
In the examples above we are creating two dialog elements, we only see the open one.
<p>Does early evening start at <time>3:00</time>, <time>4:00</time> or <time>5:00</time>?.</p> <p>What costumes shall I get the children for <time datetime="2020-10-31 18:00"> Halloween</time>?.</p>
Does early evening start at , or ?.
What costumes shall I get the children for ?.
In the examples above we are creating two time elements, the second of which used the datetime attribute.
Lesson 8 Complete
In this lesson we looked at the widget tags inroduced in HTML5 along with some other new tags that don't fit into any particualar category.
In the next lesson we take a final look at tables and their more advanced features.
The <data> data tag
The <details> details tag
The <dialog> dialog tag
The <summary> summary tag
The <time> time tag