logo
Ronnie Royston
New Orleans

HTML Element Reference

World Wide Web's Core Markup Language

html

Usage

The html element representsthe root of an HTML document.

Contexts & Omissions

As document's document element. Wherever a subdocument fragment is allowed in a compound document. An html element's start tag can be omitted if the first thing inside the html element is not a comment. An html element's end tag can be omitted if the html element is not immediately followed by a comment. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</p>
</body>
</html>
title

Usage

The title element representsthe document's title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user's history or bookmarks, or in search results. The document's title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.

Contexts & Omissions

In a head element containing no other title elements. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> book is...
base

Usage

The base element allows authors to specify the document base URL for the purposes of parsing URLs, and the name of the default navigable for the purposes of following hyperlinks. The element does not represent any content beyond this information.

Contexts & Omissions

In a head element containing no other base elements. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatehrefDocument base URL target — Default navigable for hyperlink navigation and form submission
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="https://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>
meta

Usage

The meta element representsvarious kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.

Contexts & Omissions

If the charset attribute is present, or if the element's http-equiv attribute is in the Encoding declaration state: in a head element. If the http-equiv attribute is present but not in the Encoding declaration state: in a head element. If the http-equiv attribute is present but not in the Encoding declaration state: in a noscript element that is a child of a head element. If the name attribute is present: where metadata content is expected. If the itemprop attribute is present: where metadata content is expected. If the itemprop attribute is present: where phrasing content is expected. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatename — Metadata name http-equiv — Pragma directive content — Value of the element charsetCharacter encoding declaration media — Applicable media
<meta charset="utf-8">
style

Usage

The style element allows authors to embed CSS style sheets in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user.

Contexts & Omissions

Where metadata content is expected. In a noscript element that is a child of a head element. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatemedia — Applicable media blocking — Whether the element is potentially render-blocking Also, the title attribute has special semantics on this element: CSS style sheet set name
const style = document.createElement('style');
style.disabled = true;
style.textContent = 'body { background-color: red; }';
document.body.append(style);
console.log(style.disabled); // false
body

Usage

The body element representsthe contents of the document.

Contexts & Omissions

As the second element in an html element. A body element's start tag can be omitted if the element is empty, or if the first thing inside the body element is not ASCII whitespace or a comment, except if the first thing inside the body element is a meta, noscript, link, script, style, or template element.  A body element's end tag can be omitted if the body element is not immediately followed by a comment. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateonafterprintonbeforeprintonbeforeunloadonhashchangeonlanguagechangeonmessageonmessageerroronofflineononlineonpagehideonpagerevealonpageshowonpopstateonrejectionhandledonstorageonunhandledrejectiononunload
<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Online or offline?</title>
  <script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  </script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>
article

Usage

The article element representsa complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Contexts & Omissions

Where sectioning content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>
section

Usage

The section element representsa generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Contexts & Omissions

Where sectioning content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<article>
 <hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h3>Red Delicious</h3>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>
aside

Usage

The aside element representsa section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Contexts & Omissions

Where sectioning content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<aside>
 <h2>Switzerland</h2>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>
h1

Usage

These elements represent headings for their sections.

Contexts & Omissions

As a child of an hgroup element. Where heading content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
hgroup

Usage

The hgroup element representsa heading and related content. The element may be used to group an h1h6element with one or more p elements containing content representing a subheading, alternative title, or tagline.

Contexts & Omissions

Where heading content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<hgroup>
 <h1>The reality dysfunction</h1>
 <p>Space is not the only void</p>
</hgroup>
address

Usage

The address element representsthe contact information for its nearest article or bodyelement ancestor. If that is the body element, then the contact information applies to the document as a whole.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>,
 <A href="../People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>
p

Usage

The p element representsa paragraph.

Contexts & Omissions

Where flow content is expected. A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, search, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.</p>
hr

Usage

The hr element representsa paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book; alternatively, it represents a separator between a set of options of a select element.

Contexts & Omissions

Where flow content is expected. As a child of a select element. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>
pre

Usage

The pre element representsa block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
blockquote

Usage

The blockquote element representsa section that is quoted from another source.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatecite — Link to the source of the quotation or more information about the edit
<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>
ol

Usage

The ol element representsa list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatereversed — Number the list backwards startStarting value of the list type — Kind of list marker
<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>
ul

Usage

The ul element representsa list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>
li

Usage

The li element representsa list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Contexts & Omissions

Inside ol elements. Inside ul elements. Inside menu elements. An li element's end tag can be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateIf the element is not a child of an ul or menu element: valueOrdinal value of the list item
<ol>
 <li>Item 1
 <li value="3">Item 3
 <li>Item 4
</ol>
dl

Usage

The dl element representsan association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements, possibly as children of a div element child) followed by one or more values (dd elements, possibly as children of a div element child), ignoring any nodes other than dt and ddelement children, and dt and ddelements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>
dt

Usage

The dt element representsthe term, or name, part of a term-description group in a description list (dl element).

Contexts & Omissions

Before dd or dt elements inside dl elements. Before dd or dt elements inside div elements that are children of a dl element. A dt element's end tag can be omitted if the dt element is immediately followed by another dt element or a dd element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>
dd

Usage

The dd element representsthe description, definition, or value, part of a term-description group in a description list (dl element).

Contexts & Omissions

After dt or dd elements inside dl elements. After dt or dd elements inside div elements that are children of a dl element. A dd element's end tag can be omitted if the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/ˈhæpinəs/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>
figure

Usage

The figure element representssome flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence&lt;byte> data);
 undefined initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>
figcaption

Usage

The figcaption element representsa caption or legend for the rest of the contents of the figcaptionelement's parent figure element, if any.

Contexts & Omissions

As the first or last child of a figure element. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<figcaption>
 <p>A duck.</p>
 <p><small>Photograph courtesy of 🌟 News.</small></p>
</figcaption>
main

Usage

The main element representsthe dominant contents of the document.

Contexts & Omissions

Where flow content is expected, but only if it is a hierarchically correct main element. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
 }
 h1, h2, p { margin: 0; }
 nav, main { float: left; }
 aside { float: right; }
 footer { clear: both; }
</style>
<header>
 <h1>System Eighteen</h1>
</header>
<nav>
 <a href="../16/">← System 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
 <h2>Character creation</h2>
 <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
 <h2>Rolls</h2>
 <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
 <p>Copyright © 2013
</footer>
</html>
div

Usage

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. It can also be used in a dl element, wrapping groups of dt and ddelements.

Contexts & Omissions

Where flow content is expected. As a child of a dl element. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>
a

Usage

Contexts & Omissions

Attributes

em

Usage

The em element representsstress emphasis of its contents.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>Cats are cute animals.</p>
strong

Usage

The strong element representsstrong importance, seriousness, or urgency for its contents.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<h1>Chapter 1: <strong>The Praxis</strong></h1>
small

Usage

The small element representsside comments such as small print.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>
s

Usage

The s element representscontents that are no longer accurate or no longer relevant.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>
cite

Usage

The cite element representsthe title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc.). This can be a work that is being quoted or referenced in detail (i.e., a citation), or it can just be a work that is mentioned in passing.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>
q

Usage

The q element representssome phrasing content quoted from another source.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatecite — Link to the source of the quotation or more information about the edit
<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>
dfn

Usage

The dfn element representsthe defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateAlso, the title attribute has special semantics on this element: Full term or expansion of abbreviation
<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>
abbr

Usage

The abbr element representsan abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateAlso, the title attribute has special semantics on this element: Full term or expansion of abbreviation
<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>
ruby

Usage

The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
...
<ruby><rt>かん</rt><rt></rt></ruby>
...
rt

Usage

The rt element marks the ruby text component of a ruby annotation. When it is the child of a ruby element, it doesn't represent anything itself, but the rubyelement uses it as part of determining what it represents.

Contexts & Omissions

As a child of a ruby element. An rt element's end tag can be omitted if the rt element is immediately followed by an rt or rp element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
...
<ruby><rp></rp><rt>かん</rt><rp></rp><rp></rp><rt></rt><rp></rp></ruby>
...
rp

Usage

The rp element can be used to provide parentheses or other content around a ruby text component of a ruby annotation, to be shown by user agents that don't support ruby annotations.

Contexts & Omissions

As a child of a ruby element, either immediately before or immediately after an rt element. An rp element's end tag can be omitted if the rp element is immediately followed by an rt or rp element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
...
<ruby><rp></rp><rt>かん</rt><rp></rp><rp></rp><rt></rt><rp></rp></ruby>
...
data

Usage

The data element representsits contents, along with a machine-readable form of those contents in the value attribute.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatevalue — Machine-readable value
<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>
time

Usage

The time element representsits contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatedatetime — Machine-readable value
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
code

Usage

The code element representsa fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>
var

Usage

The var element representsa variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>
samp

Usage

The samp element representssample or quoted output from another program or computing system.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>
kbd

Usage

The kbd element representsuser input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>
sub

Usage

The sup element representsa superscript and the sub element representsa subscript.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>Their names are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>
i

Usage

The i element representsa span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
b

Usage

The b element representsa span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
u

Usage

The u element representsa span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>The <u>see</u> is full of fish.</p>
mark

Usage

The mark element representsa run of text in one document marked or highlighted for referencepurposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>
bdi

Usage

The bdi element representsa span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateAlso, the dir global attribute has special semantics on this element.
<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>
bdo

Usage

The bdo element representsexplicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override. [BIDI]

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateAlso, the dir global attribute has special semantics on this element.
<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>
span

Usage

The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>
br

Usage

The br element representsa line break.

Contexts & Omissions

Where phrasing content is expected. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>
wbr

Usage

The wbr element representsa line break opportunity.

Contexts & Omissions

Where phrasing content is expected. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>
ins

Usage

The ins element representsan addition to the document.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatecite — Link to the source of the quotation or more information about the edit datetime — Date and (optionally) time of the change
<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>
del

Usage

The del element representsa removal from the document.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatecite — Link to the source of the quotation or more information about the edit datetime — Date and (optionally) time of the change
<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>
picture

Usage

The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewportsize, image format, and other factors. It represents its children.

Contexts & Omissions

Where embedded content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>
img

Usage

An img element represents an image.

Contexts & Omissions

Where embedded content is expected. As a child of a picture element, after all source elements. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatealt — Replacement text for use when images are not available src — Address of the resource srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc. sizes — Image sizes for different page layouts crossorigin — How the element handles crossorigin requests usemap — Name of image map to use ismap — Whether the image is a server-side image map width — Horizontal dimension height — Vertical dimension referrerpolicyReferrer policy for fetches initiated by the element decoding — Decoding hint to use when processing this image for presentation loading — Used when determining loading deferral fetchpriority — Sets the priority for fetches initiated by the element
<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">
iframe

Usage

The iframe element representsits content navigable.

Contexts & Omissions

Where embedded content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatesrc — Address of the resource srcdoc — A document to render in the iframe name — Name of content navigable sandbox — Security rules for nested content allowPermissions policy to be applied to the iframe's contents allowfullscreen — Whether to allow the iframe's contents to use requestFullscreen() width — Horizontal dimension height — Vertical dimension referrerpolicyReferrer policy for fetches initiated by the element loading — Used when determining loading deferral
<article>
 <h1>I got my own magazine!</h1>
 <p>After much effort, I've finally found a publisher, and so now I
 have my own magazine! Isn't that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
 </article>
embed

Usage

The embed element provides an integration point for an external application or interactive content.

Contexts & Omissions

Where embedded content is expected. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatesrc — Address of the resource type — Type of embedded resource width — Horizontal dimension height — Vertical dimension Any other attribute that has no namespace (see prose).
<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>
object

Usage

The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image or as a child navigable.

Contexts & Omissions

Where embedded content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatedata — Address of the resource type — Type of embedded resource name — Name of content navigable form — Associates the element with a form element width — Horizontal dimension height — Vertical dimension
<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>
video

Usage

A video element is used for playing videos or movies, and audio files with captions.

Contexts & Omissions

Where embedded content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatesrc — Address of the resource crossorigin — How the element handles crossorigin requests poster — Poster frame to show prior to video playback preload — Hints how much buffering the media resource will likely need autoplay — Hint that the media resource can be started automatically when the page is loaded playsinline — Encourage the user agent to display video content within the element's playback area loop — Whether to loop the media resource muted — Whether to mute the media resource by default controls — Show user agent controls width — Horizontal dimension height — Vertical dimension
<script>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>
audio

Usage

An audio element representsa sound or audio stream.

Contexts & Omissions

Where embedded content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatesrc — Address of the resource crossorigin — How the element handles crossorigin requests preload — Hints how much buffering the media resource will likely need autoplay — Hint that the media resource can be started automatically when the page is loaded loop — Whether to loop the media resource muted — Whether to mute the media resource by default controls — Show user agent controls
<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>
track

Usage

The track element allows authors to specify explicit external timed text tracks for media elements. It does not representanything on its own.

Contexts & Omissions

As a child of a media element, before any flow content. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatekind — The type of text track src — Address of the resource srclang — Language of the text track label — User-visible label default — Enable the track if no other text track is more suitable
<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>
map

Usage

The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatename — Name of image map to reference from the usemap attribute
<!DOCTYPE HTML>
<HTML LANG="EN">
<TITLE>Babies™: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
  </P>
 </MAP>
</FOOTER>
area

Usage

The area element representseither a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

Contexts & Omissions

Where phrasing content is expected, but only if there is a map element ancestor. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatealt — Replacement text for use when images are not available coords — Coordinates for the shape to be created in an image map shape — The kind of shape to be created in an image map href — Address of the hyperlink targetNavigable for hyperlink navigation download — Whether to download the resource instead of navigating to it, and its filename if so pingURLs to ping rel — Relationship between the location in the document containing the hyperlink and the destination resource referrerpolicyReferrer policy for fetches initiated by the element
<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>
table

Usage

The table element representsdata with more than one dimension, in the form of a table.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<style>
 #sudoku { border-collapse: collapse; border: solid thick; }
 #sudoku colgroup, table#sudoku tbody { border: solid medium; }
 #sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<h1>Today's Sudoku</h1>
<table id="sudoku">
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <tbody>
  <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
  <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
  <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
 <tbody>
  <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
  <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
  <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
 <tbody>
  <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
  <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
  <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
</table>
caption

Usage

The caption element representsthe title of the table that is its parent, if it has a parent and that is a table element.

Contexts & Omissions

As the first element child of a table element. A caption element's end tag can be omitted if the caption element is not immediately followed by ASCII whitespace or a comment. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>
colgroup

Usage

The colgroup element representsa group of one or more columnsin the table that is its parent, if it has a parent and that is a table element.

Contexts & Omissions

As a child of a table element, after any caption elements and before any thead, tbody, tfoot, and tr elements. A colgroup element's start tag can be omitted if the first thing inside the colgroup element is a col element, and if the element is not immediately preceded by another colgroup element whose end tag has been omitted. (It can't be omitted if the element is empty.) A colgroup element's end tag can be omitted if the colgroup element is not immediately followed by ASCII whitespace or a comment. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatespan — Number of columns spanned by the element
<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>
col

Usage

If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then the col element representsone or more columns in the column group represented by that colgroup.

Contexts & Omissions

As a child of a colgroup element that doesn't have a span attribute. No end tag. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatespan — Number of columns spanned by the element
<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>
tbody

Usage

The tbody element representsa block of rows that consist of a body of data for the parent table element, if the tbody element has a parent and it is a table.

Contexts & Omissions

As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tr elements that are children of the table element. A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody, thead, or tfoot element whose end tag has been omitted. (It can't be omitted if the element is empty.) A tbody element's end tag can be omitted if the tbody element is immediately followed by a tbody or tfoot element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>
thead

Usage

The thead element representsthe block of rows that consist of the column labels (headers) and any ancillary non-header cells for the parent table element, if the thead element has a parent and it is a table.

Contexts & Omissions

As a child of a table element, after any caption, and colgroup elements and before any tbody, tfoot, and tr elements, but only if there are no other thead elements that are children of the table element. A thead element's end tag can be omitted if the thead element is immediately followed by a tbody or tfoot element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>
tfoot

Usage

The tfoot element representsthe block of rows that consist of the column summaries (footers) for the parent table element, if the tfoot element has a parent and it is a table.

Contexts & Omissions

As a child of a table element, after any caption, colgroup, thead, tbody, and tr elements, but only if there are no other tfoot elements that are children of the table element. A tfoot element's end tag can be omitted if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>
tr

Usage

The tr element representsa row of cells in a table.

Contexts & Omissions

As a child of a thead element. As a child of a tbody element. As a child of a tfoot element. As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element. A tr element's end tag can be omitted if the tr element is immediately followed by another tr element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>
td

Usage

The td element representsa data cell in a table.

Contexts & Omissions

As a child of a tr element. A td element's end tag can be omitted if the td element is immediately followed by a td or th element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatecolspan — Number of columns that the cell is to span rowspan — Number of rows that the cell is to span headers — The header cells for this cell
<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>
th

Usage

The th element representsa header cell in a table.

Contexts & Omissions

As a child of a tr element. A th element's end tag can be omitted if the th element is immediately followed by a td or th element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatecolspan — Number of columns that the cell is to span rowspan — Number of rows that the cell is to span headers — The header cells for this cell scope — Specifies which cells the header cell applies to abbr — Alternative label to use for the header cell when referencing the cell in other contexts
<table>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th> Tails <td> 0.33 <td> 1
</table>
form

Usage

The form element representsa hyperlink that can be manipulated through a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateaccept-charset — Character encodings to use for form submission actionURL to use for form submission autocomplete — Default setting for autofill feature for controls in the form enctypeEntry list encoding type to use for form submission method — Variant to use for form submission name — Name of form to use in the document.forms API novalidate — Bypass form control validation for form submission targetNavigable for form submission rel
<form action="https://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="https://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
label

Usage

The label element representsa caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatefor — Associate the label with form control
<label><input type=checkbox name=lost> Lost</label>
input

Usage

Contexts & Omissions

Attributes

button

Usage

Contexts & Omissions

Attributes

select

Usage

The select element represents a control for selecting amongst a set of options.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateautocomplete — Hint for form autofill feature disabled — Whether the form control is disabled form — Associates the element with a form element multiple — Whether to allow multiple values name — Name of the element to use for form submission and in the form.elements API required — Whether the control is required for form submission size — Size of the control
<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>
datalist

Usage

The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element representsnothing and it, along with its children, should be hidden.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<label>
 Animal:
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="Cat">
  <option value="Dog">
 </datalist>
</label>
optgroup

Usage

The optgroup element representsa group of option elements with a common label.

Contexts & Omissions

As a child of a select element. An optgroup element's end tag can be omitted if the optgroup element is immediately followed by another optgroup element, if it is immediately followed by an hr element, or if there is no more content in the parent element. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatedisabled — Whether the form control is disabled label — User-visible label
<form action="courseselector.dll" method="get">
 <p>Which course would you like to watch today?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnetism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
 </label>
 <p><input type=submit value="▶ Play">
</form>
option

Usage

Contexts & Omissions

Attributes

textarea

Usage

The textarea element representsa multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateautocomplete — Hint for form autofill feature cols — Maximum number of characters per line dirname — Name of form control to use for sending the element's directionality in form submission disabled — Whether the form control is disabled form — Associates the element with a form element maxlength — Maximum length of value minlength — Minimum length of value name — Name of the element to use for form submission and in the form.elements API placeholder — User-visible label to be placed within the form control readonly — Whether to allow the value to be edited by the user required — Whether the control is required for form submission rows — Number of lines to show wrap — How the value of the form control is to be wrapped for form submission
Filename: <code>/etc/bash.bashrc</code>
<textarea name="buffer" readonly>
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;&amp; return

...</textarea>
output

Usage

The output element representsthe result of a calculation performed by the application, or the result of a user action.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatefor — Specifies controls from which the output was calculated form — Associates the element with a form element name — Name of the element to use in the form.elements API.
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input id=a type=number step=any> +
 <input id=b type=number step=any> =
 <output id=o for="a b"></output>
</form>
progress

Usage

The progress element representsthe completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatevalue — Current value of the element max — Upper bound of range
<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id=p max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>
meter

Usage

The meter element representsa scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatevalue — Current value of the element min — Lower bound of range max — Upper bound of range low — High limit of low range high — Low limit of high range optimum — Optimum value in gauge
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
fieldset

Usage

The fieldset element representsa set of form controls (or other content) grouped together, optionally with a caption. The caption is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatedisabled — Whether the descendant form controls, except any inside legend, are disabled form — Associates the element with a form element name — Name of the element to use in the form.elements API.
<fieldset>
 <legend>Display</legend>
 <p><label><input type=radio name=c value=0 checked> Black on White</label>
 <p><label><input type=radio name=c value=1> White on Black</label>
 <p><label><input type=checkbox name=g> Use grayscale</label>
 <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>
legend

Usage

The legend element representsa caption for the rest of the contents of the legend element's parent fieldset element, if any.

Contexts & Omissions

As the first child of a fieldset element. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
details

Usage

The details element representsa disclosure widget from which the user can obtain additional information or controls.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatename — Name of group of mutually-exclusive details elements open — Whether the details are visible
<section class="progress window">
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>Transfer rate:</dt> <dd>452KB/s</dd>
   <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>Duration:</dt> <dd>01:16:27</dd>
   <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
   <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
 </details>
</section>
summary

Usage

The summary element representsa summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

Contexts & Omissions

As the first child of a details element. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<fieldset>
 <legend accesskey=p>
  <label>I want <input name=pizza type=number step=1 value=1 min=0>
   pizza(s) with these toppings</label>
 </legend>
 <label><input name=pizza-cheese type=checkbox checked> Cheese</label>
 <label><input name=pizza-ham type=checkbox checked> Ham</label>
 <label><input name=pizza-pineapple type=checkbox> Pineapple</label>
</fieldset>
dialog

Usage

The dialog element represents a transitory part of an application, in the form of a small window ("dialog box"), which the user interacts with to perform a task or gather information. Once the user is done, the dialog can be automatically closed by the application, or manually closed by the user.

Contexts & Omissions

Where flow content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateopen — Whether the dialog box is showing
<dialog>
  <label>Product Number <input type="text" readonly></label>
  <label>Product Name <input type="text" autofocus></label>
</dialog>
script

Usage

The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.

Contexts & Omissions

Where metadata content is expected. Where phrasing content is expected. Where script-supporting elements are expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatesrc — Address of the resource type — Type of script nomodule — Prevents execution in user agents that support module scripts async — Execute script when available, without blocking while fetching defer — Defer script execution crossorigin — How the element handles crossorigin requests integrity — Integrity metadata used in Subresource Integrity checks [SRI] referrerpolicyReferrer policy for fetches initiated by the element blocking — Whether the element is potentially render-blocking fetchpriority — Sets the priority for fetches initiated by the element
<script referrerpolicy="origin">
  fetch('/api/data');    // not fetched with <script>'s referrer policy
  import('./utils.mjs'); // is fetched with <script>'s referrer policy ("origin" in this case)
</script>
noscript

Usage

The noscript element representsnothing if scripting is enabled, and representsits children if scripting is disabled. It is used to present different markup to user agents that support scripting and those that don't support scripting, by affecting how the document is parsed.

Contexts & Omissions

In a head element of an HTML document, if there are no ancestor noscript elements. Where phrasing content is expected in HTML documents, if there are no ancestor noscript elements. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslate
<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
 </script>
 <noscript>
  <input type=submit value="Calculate Square">
 </noscript>
</form>
template

Usage

The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

Contexts & Omissions

Where metadata content is expected. Where phrasing content is expected. Where script-supporting elements are expected. As a child of a colgroup element that doesn't have a span attribute. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslateshadowrootmode — Enables streaming declarative shadow roots shadowrootdelegatesfocus — Sets delegates focus on a declarative shadow root shadowrootclonable — Sets clonable on a declarative shadow root
<!doctype html>
<html lang="en">
 <head>
  <title>Homework</title>
 <body>
  <template id="template"><p>Smile!</p></template>
  <script>
   let num = 3;
   const fragment = document.getElementById('template').content.cloneNode(true);
   while (num-- > 1) {
     fragment.firstChild.before(fragment.firstChild.cloneNode(true));
     fragment.firstChild.textContent += fragment.lastChild.textContent;
   }
   document.body.appendChild(fragment);
  </script>
</html>
slot

Usage

The slot element defines a slot. It is typically used in a shadow tree. A slot element representsits assigned nodes, if any, and its contents otherwise.

Contexts & Omissions

Where phrasing content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatename — Name of shadow tree slot
canvas

Usage

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.

Contexts & Omissions

Where embedded content is expected. Neither tag is omissible. 

Attributes

accesskeyautocapitalizeautofocuscontenteditabledirdraggableenterkeyhinthiddeninertinputmodeisitemiditempropitemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatewidth — Horizontal dimension height — Vertical dimension
<canvas width=200 height=200 style=width:100px;height:100px>