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 Details Element
Must be used with the <summary> child element which displays a heading for the contents of the <details> element.
The Dialog Element
The Summary Element
The time Element
<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