This document summarizes several lesser-known HTML elements, including <optgroup> for grouping options in a select element, <figure> for representing self-contained content like images, and <figcaption> as an optional caption for a <figure> block. It also covers elements like <main> for main content, <bdi> for bi-directional text isolation, and <dfn>, <kbd>, <mark>, <q>, <samp>, <time>, <var>, and <wbr>. Support for these elements varies across browsers.

1. Other Side
HTML
The
of

2. You've probably seen some of these elements before.
Maybe you just don't want to talk about it.
Maybe you have to support legacy IE.
Either way, let's have a look at some of the (potentially) lesser known HTML elements.

3. <optgroup> creates a grouping of options within
a <select> element.
Where?
What?
How?
<optgroup>

4. <figure>
<figure> represents self-contained content. It is
usually an image, illustration, diagram, code
snippet. It's important to note it can be removed
from the page without affecting the flow.
Where?
What?
How?
IE9+

5. <figcaption>

6. Ceci est une fig.
(well, kinda)

7. <figcaption>
<figcaption> is a caption or legend associated with
a <figure>. It can be the first or last element in a
<figure> block. It is an optional element.
Where?
What?
How?
IE9+

8. <main>
<main> represents the main content (duh) of the
body of a document.
Where?
What?
How?
All browsers (use shim)

9. <bdi>
<bdi> (or bi-directional isolation) isolates a span of
text that may be formatted in a different direction
from other text outside it.
Where?
What?
How?
Support is poor, but it can be used for semantics.

10. <tdi>

11. <tdi>

12. <dfn>
<dfn> is the definition element. It indicates the
definition of a term.
Where?
What?
How?

13. <kbd>
<kbd> is the keyboard input element. It represents
user input from a keyboard.
Where?
What?
How?

14. <mark>
<mark> is the mark element. It represents
highlighted text. It can be used to highlight search
terms on a search results page, for example.
Where?
What?
How?
IE9+

15. <matte>

16. <matte>

17. <site>

18. <site>

19. <q>
<q> is the quote element. It indicates an inline
quotation. It is intended for short quotations.
Its big brother is <blockquote>.
Where?
What?
How?

20. <samp>
<samp> is the sample element. It's used to identify
sample output from a computer program.
Where?
What?
How?

21. <time>
<time> is............ the time element.
It represents time on a 24 hour clock or a precise
date in the Gregorian calendar.
Where?
What?
How?
IE9+

22. <var>
<var> is the variable element. It represents a
variable in a math expression or programming
context.
Where?
What?
How?

23. <wbr>
<wbr> is the word break opportunity element. It
represents a position within text where the browser
may optionally break a line (helloooooo responsive)
Where?
What?
How?

24. MDN lists it as IE 5.5 - 7.0.
Not supported in iOS Safari???

25. <meter>
<meter> represents a scale or a fractional value
within a range.
Where?
What?
How?

26. <scale>

27. <scale>

28. <item>

29. <item>

30. <menuitem>
<menuitem> represents a command someone
can run through a popup menu. (Right-click)
Where?
What?
How?

31. <keygen>
<keygen> was designed for use with web-based
certificate management systems. It facilitates
generation of key material and submission of the
public part of that key through a form.
Where?
What?
How?
No IE support... but who cares, right?!

32. <output>
<output> is the result of a calculation or action.
Where?
What?
How?
No IE support (yet), mobile support unknown

33. Thanks!