Download - The Other Side of HTML
![Page 1: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/1.jpg)
Other Side HTML
The
of
![Page 2: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/2.jpg)
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.
![Page 3: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/3.jpg)
<optgroup> creates a grouping of options within a <select> element.
Where?
What?
How?
<optgroup>
![Page 4: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/4.jpg)
<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+
![Page 5: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/5.jpg)
<figcaption>
![Page 6: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/6.jpg)
Ceci est une fig.
(well, kinda)
![Page 7: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/7.jpg)
<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+
![Page 8: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/8.jpg)
<main><main> represents the main content (duh) of the body of a document.
Where?
What?
How?
All browsers (use shim)
![Page 9: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/9.jpg)
<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.
![Page 10: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/10.jpg)
<tdi>
![Page 11: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/11.jpg)
<tdi>
![Page 12: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/12.jpg)
<dfn>
<dfn> is the definition element. It indicates the definition of a term.
Where?
What?
How?
![Page 13: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/13.jpg)
<kbd><kbd> is the keyboard input element. It represents user input from a keyboard.
Where?
What?
How?
![Page 14: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/14.jpg)
<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+
![Page 15: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/15.jpg)
<matte>
![Page 16: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/16.jpg)
<matte>
![Page 17: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/17.jpg)
<site>
![Page 18: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/18.jpg)
<site>
![Page 19: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/19.jpg)
<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?
![Page 20: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/20.jpg)
<samp><samp> is the sample element. It's used to identify sample output from a computer program.
Where?
What?
How?
![Page 21: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/21.jpg)
<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+
![Page 22: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/22.jpg)
<var><var> is the variable element. It represents a variable in a math expression or programming context.
Where?
What?
How?
![Page 23: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/23.jpg)
<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?
![Page 24: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/24.jpg)
MDN lists it as IE 5.5 - 7.0. Not supported in iOS Safari???
![Page 25: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/25.jpg)
<meter><meter> represents a scale or a fractional value within a range.
Where?
What?
How?
![Page 26: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/26.jpg)
<scale>
![Page 27: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/27.jpg)
<scale>
![Page 28: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/28.jpg)
<item>
![Page 29: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/29.jpg)
<item>
![Page 30: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/30.jpg)
<menuitem><menuitem> represents a command someone can run through a popup menu. (Right-click)
Where?
What?
How?
![Page 31: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/31.jpg)
<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?!
![Page 32: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/32.jpg)
<output><output> is the result of a calculation or action.
Where?
What?
How?
No IE support (yet), mobile support unknown
![Page 33: The Other Side of HTML](https://reader034.vdocuments.us/reader034/viewer/2022050721/55a641c61a28ab93518b4648/html5/thumbnails/33.jpg)
Thanks!