html
body
section
aside
article
h1
hgroup
address
nav
header
footer
head
title
base
link
meta
style
audio
picture
img
embed
video
track
map
area
object
iframe
a
button
select
option
details
summary
label
input
textarea
output
fieldset
legend
form
datalist
optgroup
progress
meter
dialog
p
hr
pre
blockquote
ol
ul
menu
li
dl
dt
dd
div
main
figure
figcaption
search
table
caption
colgroup
col
tbody
thead
tfoot
tr
td
th
em
strong
small
s
cite
q
dfn
abbr
ruby
rt
rp
data
time
code
var
samp
kbd
sub
i
b
u
mark
bdi
bdo
span
br
wbr
ins
del
script
noscript
slot
canvas
template
World Wide Web's Core Markup Language
The html element representsthe root of an HTML document.
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.
accesskey
autocapitalize
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden
inert
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
popover
spellcheck
tabindex
translate
<!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>
The head element representsa collection of metadata for the Document.
Document
As the first element in an html element. A head element's start tag can be omitted if the element is empty, or if the first thing inside the head element is an element. A head element's end tag can be omitted if the head element is not immediately followed by ASCII whitespace or a comment.
<!doctype html> <html lang=en> <head> <title>A document with a short head</title> </head> <body> ...
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.
In a head element containing no other title elements. Neither tag is omissible.
<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...
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.
In a head element containing no other base elements. No end tag.
href
target
<!DOCTYPE html> <html lang="en"> <head> <title>This is an example for the <base> 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>
The link element allows authors to link their document to other resources.
Where metadata content is expected. In a noscript element that is a child of a head element. If the element is allowed in the body: where phrasing content is expected. No end tag.
crossorigin
rel
media
integrity
hreflang
type
referrerpolicy
sizes
icon
imagesrcset
preload
imagesizes
as
modulepreload
blocking
color
mask-icon
disabled
fetchpriority
<link rel="author license" href="/about">
The meta element representsvarious kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
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.
charset
http-equiv
name
content
<meta charset="utf-8">
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.
Where metadata content is expected. In a noscript element that is a child of a head element. Neither tag is omissible.
const style = document.createElement('style'); style.disabled = true; style.textContent = 'body { background-color: red; }'; document.body.append(style); console.log(style.disabled); // false
The body element representsthe contents of the document.
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.
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpagereveal
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
<!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>
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.
Where sectioning content is expected. Neither tag is omissible.
<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>
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.
<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>
The nav element representsa section of a page that links to other pages or to parts within the page: a section with navigation links.
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h2>Demos in Exampland</h2> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h2>Public demonstrations</h2> <p>...more...</p> </section> <section id="destroy"> <h2>Demolitions</h2> <p>...more...</p> </section> ...more... </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>
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.
<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>
These elements represent headings for their sections.
As a child of an hgroup element. Where heading content is expected. Neither tag is omissible.
<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>
The hgroup element representsa heading and related content. The element may be used to group an h1– h6element with one or more p elements containing content representing a subheading, alternative title, or tagline.
h6
Where heading content is expected. Neither tag is omissible.
<hgroup> <h1>The reality dysfunction</h1> <p>Space is not the only void</p> </hgroup>
The header element representsa group of introductory or navigational aids.
Where flow content is expected. Neither tag is omissible.
<header> <p>Welcome to...</p> <h1>Voidwars!</h1> </header>
The footer element representsa footer for its nearest ancestor sectioning content element, or for the body element if there is no such ancestor. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<body> <footer><a href="../">Back to index...</a></footer> <hgroup> <h1>Lorem ipsum</h1> <p>The ipsum of all lorems</p> </hgroup> <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <footer><a href="../">Back to index...</a></footer> </body>
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.
<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>
The p element representsa paragraph.
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.
h2
h3
h4
h5
<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>
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.
Where flow content is expected. As a child of a select element. No end tag.
<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>
The pre element representsa block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
<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>
The blockquote element representsa section that is quoted from another source.
<blockquote> <p>[Jane] then said she liked [...] fish.</p> </blockquote>
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.
reversed
start
<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>
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.
<p>I have lived in the following countries:</p> <ul> <li>Norway <li>Switzerland <li>United Kingdom <li>United States </ul>
The menu element representsa toolbar consisting of its contents, in the form of an unordered list of items (represented by li elements), each of which represents a command that the user can perform or activate.
<menu> <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li> <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li> <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li> </menu>
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.
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.
value
<ol> <li>Item 1 <li value="3">Item 3 <li>Item 4 </ol>
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.
<dl> <dt> Authors <dd> John <dd> Luke <dt> Editor <dd> Frank </dl>
The dt element representsthe term, or name, part of a term-description group in a description list (dl element).
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.
<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>
The dd element representsthe description, definition, or value, part of a term-description group in a description list (dl element).
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.
<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>
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.
<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<byte> data); undefined initSelfDestruct(); }</code></pre> </figure> <p>The API is designed to use UTF-8.</p>
The figcaption element representsa caption or legend for the rest of the contents of the figcaptionelement's parent figure element, if any.
As the first or last child of a figure element. Neither tag is omissible.
<figcaption> <p>A duck.</p> <p><small>Photograph courtesy of 🌟 News.</small></p> </figcaption>
The main element representsthe dominant contents of the document.
Where flow content is expected, but only if it is a hierarchically correct main element. Neither tag is omissible.
<!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>
The search element representsa part of a document or application that contains a set of form controls or other content related to performing a search or filtering operation. This could be a search of the web site or application; a way of searching or filtering search results on the current web page; or a global or Internet-wide search function.
<header> <h1><a href="/">My fancy blog</a></h1> ... <search> <form action="search.php"> <label for="query">Find an article</label> <input id="query" name="q" type="search"> <button type="submit">Go!</button> </form> </search> </header>
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.
class
Where flow content is expected. As a child of a dl element. Neither tag is omissible.
<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>
The em element representsstress emphasis of its contents.
Where phrasing content is expected. Neither tag is omissible.
<p>Cats are cute animals.</p>
The strong element representsstrong importance, seriousness, or urgency for its contents.
<h1>Chapter 1: <strong>The Praxis</strong></h1>
The small element representsside comments such as small print.
<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>
The s element representscontents that are no longer accurate or no longer relevant.
<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>
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.
<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>
The q element representssome phrasing content quoted from another source.
<p>The man said <q>Things that are impossible just take longer</q>. I disagreed with him.</p>
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.
<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>
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.
<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>
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.
... <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> ...
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.
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.
... <ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby> ...
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.
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.
The data element representsits contents, along with a machine-readable form of those contents in the value attribute.
<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>
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.
datetime
<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>
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.
<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>
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.
<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>
The samp element representssample or quoted output from another program or computing system.
<p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p>
The kbd element representsuser input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>
The sup element representsa superscript and the sub element representsa subscript.
sup
<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>
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.
<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>
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.
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
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.
<p>The <u>see</u> is full of fish.</p>
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.
<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>
The bdi element representsa span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]
<ul> <li>User <bdi>jcranmer</bdi>: 12 posts. <li>User <bdi>hober</bdi>: 5 posts. <li>User <bdi>إيان</bdi>: 3 posts. </ul>
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]
<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> < 256; <span class="ident">j</span>++) { <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> << 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>
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.
The br element representsa line break.
Where phrasing content is expected. No end tag.
<p>P. Sherman<br> 42 Wallaby Way<br> Sydney</p>
The wbr element representsa line break opportunity.
<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>
The ins element representsan addition to the document.
<aside> <ins> <p> I like fruit. </p> </ins> </aside>
The del element representsa removal from the document.
<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>
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.
Where embedded content is expected. Neither tag is omissible.
<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>
An img element represents an image.
Where embedded content is expected. As a child of a picture element, after all source elements. No end tag.
source
alt
src
srcset
usemap
ismap
width
height
decoding
loading
<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">
The iframe element representsits content navigable.
srcdoc
sandbox
allow
allowfullscreen
requestFullscreen()
<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="/gallery?mode=cover&amp;page=1">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;me on the next cover."></iframe> </article>
The embed element provides an integration point for an external application or interactive content.
Where embedded content is expected. No end tag.
<figure> <object data="clock.html"></object> <figcaption>My HTML Clock</figcaption> </figure>
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.
A video element is used for playing videos or movies, and audio files with captions.
poster
autoplay
playsinline
loop
muted
controls
<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>
An audio element representsa sound or audio stream.
<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>
The track element allows authors to specify explicit external timed text tracks for media elements. It does not representanything on its own.
As a child of a media element, before any flow content. No end tag.
kind
srclang
default
The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children.
<!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>
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.
Where phrasing content is expected, but only if there is a map element ancestor. No end tag.
coords
shape
download
ping
<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>
The table element representsdata with more than one dimension, in the form of a table.
<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>
The caption element representsthe title of the table that is its parent, if it has a parent and that is a table element.
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.
<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>
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.
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.
<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>
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.
As a child of a colgroup element that doesn't have a span attribute. No end tag.
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.
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.
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.
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.
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.
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.
<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>
The tr element representsa row of cells in a table.
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.
The td element representsa data cell in a table.
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.
colspan
rowspan
headers
The th element representsa header cell in a table.
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.
scope
<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>
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.
accept-charset
action
autocomplete
enctype
method
document.forms
novalidate
<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>
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.
for
<label><input type=checkbox name=lost> Lost</label>
The select element represents a control for selecting amongst a set of options.
multiple
form.elements
required
size
<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>
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.
<label> Animal: <input name=animal list=animals> <datalist id=animals> <option value="Cat"> <option value="Dog"> </datalist> </label>
The optgroup element representsa group of option elements with a common label.
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.
<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>
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.
cols
dirname
maxlength
minlength
placeholder
readonly
rows
wrap
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" ] && return ...</textarea>
The output element representsthe result of a calculation performed by the application, or the result of a user action.
<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>
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.
max
<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>
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.
min
low
high
optimum
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
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.
<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>
The legend element representsa caption for the rest of the contents of the legend element's parent fieldset element, if any.
As the first child of a fieldset element. Neither tag is omissible.
The details element representsa disclosure widget from which the user can obtain additional information or controls.
open
<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>
The summary element representsa summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.
As the first child of a details element. Neither tag is omissible.
<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>
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.
<dialog> <label>Product Number <input type="text" readonly></label> <label>Product Name <input type="text" autofocus></label> </dialog>
The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.
Where metadata content is expected. Where phrasing content is expected. Where script-supporting elements are expected. Neither tag is omissible.
nomodule
async
defer
<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>
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.
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.
<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>
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
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.
shadowrootmode
shadowrootdelegatesfocus
shadowrootclonable
<!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>
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.
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.
<canvas width=200 height=200 style=width:100px;height:100px>
