kr1st1nagr03g3r/lonelyhtml5elements.md

## lonelyhtml5elements.md

      
    Raw
  

              lonelyhtml5elements.md
            
          
    Reference: HTML5 Elements I don’t Often Use


HTML TAG:
What does it do?
What else does it do?
Specifications / Example
Supports all browsers?


<address>
The <address> tag defines the contact information for the author/owner of a document or an article.
Can be: email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.
yes


<abbr>
The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Adds a dotted line to the bottom of the abbreviated word and on hover will show the title.
<p>The <abbr title="Finding Outdoors Rather Eerie, Scary and Tiresome">FOREST</abbr> is nice to walk through</p>
yes


<area>
The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
<area> elements are always nested inside a <map> tag.
<img src="dogs.jpg" alt="dogs" usemap="#dogs" width="500" height="500">``<map name="workmap">``<area shape="rect" coords="34,44,270,350" alt="Bishon" href="Bishon.htm"> <area shape="rect" coords="290,172,333,250" alt="Pitbull" href="Pitbull.htm">  <area shape="circle" coords="337,300,44" alt="Dalmation" href="Dalmation.htm">``</map>
surprisingly, yes


<article>
Works for independent, contained content.
Works for a post, blog, or snippet.
The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element
some


<aside>
The <aside> tag defines some content aside from the content it is placed in.
The <aside> content is often placed as a sidebar in a document.
The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).
some


<audio>, also <source>
The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
<audio controls>``<source src="horse.ogg" type="audio/ogg">``<source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
Everything except Safari OGG


<base>
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
There can only be one single <base> element in a document, and it must be inside the <head> element.
<head>  <base href="https://www.kristinagroeger.com/" target="_blank">``</head>``<body>``<a href="tags/tag_base.asp">HTML base Tag</a>``</body>
yes


<bdi>
The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.
BDI stands for Bi-Directional Isolation.
The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it. So, if you have a mix of English and Japanese, you’d use this to reverse the direction of the text.
some, but no Safari


<bdo>
The <bdo> tag is used to override the current text direction.
BDO stands for Bi-Directional Override.
<p>I love carrots.</p>``<p>``<bdo dir="rtl">I love carrots.</bdo>``</p>I love carrots turns into: storrac evol I
yes


<blockquote>
Indents text to form a “quote”
Can be styled
Use <q> for inline (short) quotations.
yes


<caption>
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.
yes


<cite>
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
The text in the <cite> element usually renders in italic and it can be styled in CSS.
<p>``<cite>The Empire State Building</cite> was built in 1930.</p>
yes


<code>Also:<samp>, <kbd>
I actually do use this one pretty often, but it’s a fun one for the list.
The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
Sometimes I like to use code to tell you how to use an <code>``<h1>h1 tag</h1>``</code>
yes


<col>
The <col> tag specifies column properties for each column within a <colgroup> element.
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
I’d rather just style tables with css, but this is available.
yes


<colgroup>
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
yes


<datalist>
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
The <datalist>element's id attribute must be equal to the <input> element's list attribute (this binds them together).
All browsers, but only certain versions.


<dd>, <dl>, <dt>
The <dd> tag is used to describe a term/name in a description list.
The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). It indents underneath, but this can be styled.
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
yes


<del>, <ins>
The <del> tag defines text that has been redacted. <ins> will then add the replaced text manually.
It puts a strikethrough between tags on text.
<p>I really love <del>cats</del> <ins>dogs</ins>!</p> I really love cats dogs.
yes


<details>, <summary>
the <details> tag will create an accordion and provide information within the <summary> tag.
The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.
<details>``<summary>Dogs</summary>``<p>Sometimes dogs like to eat a lot of grass and then throw it up. For fun.</p>``</details>
All browsers, but only certain versions.


<dfn>
The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content.
The nearest parent of the <dfn> tag must also contain the definition/explanation for the term. Italicizes the text.
<p>``<dfn>Dalmatians</dfn> are dogs with white fur and black spots.</p>
yes


<fieldset>
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
The <legend> tag is used to define a caption for the <fieldset> element. Can accept the attributes of: disabled, form, and name.
yes


<figure>, <figcaption>
The <figcaption>tag defines a caption for a <figure> element.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figure>``<img src="Italy.jpg" alt="Beautiful Country" style="width:100%">``<figcaption>Figure 01, a map of Italy.</figcaption>``</figure>
All browsers, but only certain versions.


<small>
Typically renders text at 13.33px depending on if you use rem or em.
Smaller Text
-
Yes


<sub>, <sup>
The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font
The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O.
-
yes


<template>
The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.
The content inside <template> can be rendered later with a JavaScript.
You can use the <template>tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
All browsers, but only certain versions.


<track>, also <kind>, <label>, <src>, <srclang>
The <track> tag specifies text tracks for <audio> or <video> elements.
-
<video width="320" height="240" controls>  <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg">``<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">``</video>
All browsers, but only certain versions.


<wbr>
The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.
When a word is too long, the browser might break it at the wrong place. You can use the <wbr> element to add word break opportunities.
-
All browsers, but only certain versions.
HTML TAG:	What does it do?	What else does it do?	Specifications / Example	Supports all browsers?
`<address>`	The `<address>` tag defines the contact information for the author/owner of a document or an article.	Can be: email address, URL, physical address, phone number, social media handle, etc.	The text in the `<address>` element usually renders in italic, and browsers will always add a line break before and after the `<address>` element.	yes
`<abbr>`	The `<abbr>` tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".	Adds a dotted line to the bottom of the abbreviated word and on hover will show the title.	`<p>`The `<abbr title="Finding Outdoors Rather Eerie, Scary and Tiresome">`FOREST`</abbr>` is nice to walk through`</p>`	yes
`<area>`	The `<area>` tag defines an area inside an image map (an image map is an image with clickable areas).	`<area>` elements are always nested inside a `<map>` tag.	<img src="dogs.jpg" alt="dogs" usemap="#dogs" width="500" height="500">``<map name="workmap">``<area shape="rect" coords="34,44,270,350" alt="Bishon" href="Bishon.htm"> `<area shape="rect" coords="290,172,333,250" alt="Pitbull" href="Pitbull.htm">` <area shape="circle" coords="337,300,44" alt="Dalmation" href="Dalmation.htm">``</map>	surprisingly, yes
`<article>`	Works for independent, contained content.	Works for a post, blog, or snippet.	The `<article>` element does not render as anything special in a browser. However, you can use CSS to style the `<article>` element	some
`<aside>`	The `<aside>` tag defines some content aside from the content it is placed in.	The `<aside>` content is often placed as a sidebar in a document.	The `<aside>` element does not render as anything special in a browser. However, you can use CSS to style the `<aside>` element (see example below).	some
`<audio>`, also `<source>`	The `<audio>` tag is used to embed sound content in a document, such as music or other audio streams.	The `<audio>` tag contains one or more `<source>` tags with different audio sources. The browser will choose the first source it supports.	<audio controls>``<source src="horse.ogg" type="audio/ogg">``<source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.`</audio>`	Everything except Safari OGG
`<base>`	The `<base>` tag specifies the base URL and/or target for all relative URLs in a document.	There can only be one single `<base>` element in a document, and it must be inside the `<head>` element.	`<head>` <base href="https://www.kristinagroeger.com/" target="_blank">``</head>``<body>``<a href="tags/tag_base.asp">HTML base Tag</a>``</body>	yes
`<bdi>`	The `<bdi>` tag isolates a part of text that might be formatted in a different direction from other text outside it.	BDI stands for Bi-Directional Isolation.	The `<bdi>` tag isolates a part of text that might be formatted in a different direction from other text outside it. So, if you have a mix of English and Japanese, you’d use this to reverse the direction of the text.	some, but no Safari
`<bdo>`	The `<bdo>` tag is used to override the current text direction.	BDO stands for Bi-Directional Override.	`<p>`I love carrots.</p>``<p>``<bdo dir="rtl">I love carrots.</bdo>``</p>I love carrots turns into: storrac evol I	yes
`<blockquote>`	Indents text to form a “quote”	Can be styled	Use `<q>` for inline (short) quotations.	yes
`<caption>`	The `<caption>` tag defines a table caption.	The `<caption>` tag must be inserted immediately after the `<table>` tag.	By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.	yes
`<cite>`	The `<cite>` tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).	The text in the `<cite>` element usually renders in italic and it can be styled in CSS.	<p>``<cite>The Empire State Building`</cite>` was built in 1930.`</p>`	yes
`<code>`Also:`<samp>`, `<kbd>`	I actually do use this one pretty often, but it’s a fun one for the list.	The `<code>` tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.	Sometimes I like to use code to tell you how to use an <code>``<h1>h1 tag</h1>``</code>	yes
`<col>`	The `<col>` tag specifies column properties for each column within a `<colgroup>` element.	The `<col>` tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.	I’d rather just style tables with css, but this is available.	yes
`<colgroup>`	The `<colgroup>` tag specifies a group of one or more columns in a table for formatting.	The `<colgroup>` tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.	The `<colgroup>` tag must be a child of a `<table>` element, after any `<caption>` elements and before any `<thead>`, `<tbody>`, `<tfoot>`, and `<tr>` elements.	yes
`<datalist>`	The `<datalist>` tag specifies a list of pre-defined options for an `<input>` element.	The `<datalist>` tag is used to provide an "autocomplete" feature for `<input>` elements. Users will see a drop-down list of pre-defined options as they input data.	The `<datalist>`element's id attribute must be equal to the `<input>` element's list attribute (this binds them together).	All browsers, but only certain versions.
`<dd>`, `<dl>`, `<dt>`	The `<dd>` tag is used to describe a term/name in a description list.	The `<dd>` tag is used in conjunction with `<dl>` (defines a description list) and `<dt>` (defines terms/names). It indents underneath, but this can be styled.	Inside a `<dd>` tag you can put paragraphs, line breaks, images, links, lists, etc.	yes
`<del>`, `<ins>`	The `<del>` tag defines text that has been redacted. `<ins>` will then add the replaced text manually.	It puts a strikethrough between tags on text.	`<p>`I really love `<del>`cats`</del>` `<ins>`dogs`</ins>`!`</p>` I really love cats dogs.	yes
`<details>`, `<summary>`	the `<details>` tag will create an accordion and provide information within the `<summary>` tag.	The `<details>` tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.	<details>``<summary>Dogs</summary>``<p>Sometimes dogs like to eat a lot of grass and then throw it up. For fun.</p>``</details>	All browsers, but only certain versions.
`<dfn>`	The `<dfn>` tag stands for the "definition element", and it specifies a term that is going to be defined within the content.	The nearest parent of the `<dfn>` tag must also contain the definition/explanation for the term. Italicizes the text.	<p>``<dfn>Dalmatians`</dfn>` are dogs with white fur and black spots.`</p>`	yes
`<fieldset>`	The `<fieldset>` tag is used to group related elements in a form.	The `<fieldset>` tag draws a box around the related elements.	The `<legend>` tag is used to define a caption for the `<fieldset>` element. Can accept the attributes of: disabled, form, and name.	yes
`<figure>`, `<figcaption>`	The `<figcaption>`tag defines a caption for a `<figure>` element.	The `<figure>` tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.	<figure>``<img src="Italy.jpg" alt="Beautiful Country" style="width:100%">``<figcaption>Figure 01, a map of Italy.</figcaption>``</figure>	All browsers, but only certain versions.
`<small>`	Typically renders text at 13.33px depending on if you use rem or em.	Smaller Text	-	Yes
`<sub>`, `<sup>`	The `<sup>` tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font	The `<sub>` tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O.	-	yes
`<template>`	The `<template>` tag is used as a container to hold some HTML content hidden from the user when the page loads.	The content inside `<template>` can be rendered later with a JavaScript.	You can use the `<template>`tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the `<template>` tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.	All browsers, but only certain versions.
`<track>`, also `<kind>`, `<label>`, `<src>`, `<srclang>`	The `<track>` tag specifies text tracks for `<audio>` or `<video>` elements.	-	`<video width="320" height="240" controls>` `<source src="forrest_gump.mp4" type="video/mp4">` <source src="forrest_gump.ogg" type="video/ogg">``<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">``</video>	All browsers, but only certain versions.
`<wbr>`	The `<wbr>` (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.	When a word is too long, the browser might break it at the wrong place. You can use the `<wbr>` element to add word break opportunities.	-	All browsers, but only certain versions.