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.

Data Example


<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>
Fruit Colour Quantity
Banana Yellow 5
Pea Green 50

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>
Server2Client Website

Tutorials on client and server programming.

HTML5

Latest Specification.

In the examples above we are creating two details elements, the second of which is open and you can see the summary contents.

Dialog Examples


<dialog>closed dialog window</dialog>
<dialog open>open dialog window</dialog>
closed dialog window open dialog window


In the examples above we are creating two dialog elements, we only see the open one.

Time Examples


<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.

Related Tutorials/Quizzes

Widgets / Miscellaneous Quiz

What's Next?

In the next lesson we take a final look at tables and their more advanced features.

HTML5 Reference

The <data> data tag

The <details> details tag

The <dialog> dialog tag

The <summary> summary tag

The <time> time tag