HTML Semantics: The Short Descriptions of All 113 Elements

#html #semantics #cheatsheet

When you look at HTML overviews (e.g., take the HTML elements index or my free ebook listing all HTML elements and attributes), you get a quick sense of what HTML elements mean (i.e., their semantics).

But when you have a closer look, you may actually need more than “heading” or “hyperlink” to understand what an element represents.

To provide a comprehensive semantics overview, here are the HTML spec’s first paragraphs for all the 113 HTML elements (that is, not including MathML and SVG):

a: If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents. If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.
abbr: The abbr element represents an 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.
address: The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
area: The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.
article: The article element represents a 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.
aside: The aside element represents a 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.
audio: An audio element represents a sound or audio stream.
b: The b element represents a 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.
base: 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.
bdi: The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
bdo: The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override.
blockquote: The blockquote element represents a section that is quoted from another source.
body: The body element represents the contents of the document.
br: The br element represents a line break.
button: The button element represents a button labeled by its contents.
canvas: The button element represents a button labeled by its contents.
caption: The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.
cite: The cite element represents the 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. A person’s name is not the title of a work—even if people call that person a piece of work—and the element must therefore not be used to mark up people’s names.
code: The code element represents a 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.
col: 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 represents one or more columns in the column group represented by that colgroup.
colgroup: The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.
data: The data element represents its contents, along with a machine-readable form of those contents in the value attribute.
datalist: The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
dd: The dd element represents the description, definition, or value, part of a term-description group in a description list (dl element).
del: The del element represents a removal from the document.
details: The details element represents a disclosure widget from which the user can obtain additional information or controls.
dfn: The dfn element represents the 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.
dialog: 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.
div: 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 dd elements.
dl: The dl element represents an 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 dd element children, and dt and dd elements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name.
dt: The dt element represents the term, or name, part of a term-description group in a description list (dl element).
em: The em element represents stress emphasis of its contents.
embed: The embed element provides an integration point for an external application or interactive content.
fieldset: The fieldset element represents a 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.
figcaption: The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.
figure: The figure element represents some 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.
footer: The footer element represents a 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. When the footer element contains entire sections, they represent appendices, indices, long colophons, verbose license agreements, and other such content.
form: The form element represents a 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.
h1: [This element represents a heading for its section.]
h2: [This element represents a heading for its section.]
h3: [This element represents a heading for its section.]
h4: [This element represents a heading for its section.]
h5: [This element represents a heading for its section.]
h6: [This element represents a heading for its section.]
head: The head element represents a collection of metadata for the Document.
header: The header element represents a group of introductory or navigational aids.
hgroup: The hgroup element represents a heading and related content. The element may be used to group an h1–h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.
hr: The hr element represents a 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.
html: The html element represents the root of an HTML document.
i: The i element represents a 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.
iframe: The iframe element represents its content navigable.
img: An img element represents an image.
input: The input element represents a typed data field, usually with a form control to allow the user to edit the data.
ins: The ins element represents an addition to the document.
kbd: The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
label: The label element represents a 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.
legend: The legend element represents a caption for the rest of the contents of the legend element’s parent fieldset element, if any. Otherwise, if the legend has a parent optgroup element, then the legend represents the optgroup’s label.
li: The li element represents a 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.
link: The link element allows authors to link their document to other resources.
main: The main element represents the dominant contents of the document.
map: The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children.
mark: The mark element represents a run of text in one document marked or highlighted for reference purposes, 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.
menu: The menu element represents a 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.
meta: The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
meter: The meter element represents a 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.
nav: The nav element represents a section of a page that links to other pages or to parts within the page; a section with navigation links.
noscript: The noscript element represents nothing if scripting is enabled, and represents its 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.
object: 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.
ol: The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.
optgroup: The optgroup element represents a group of option elements with a common label.
option: The option element represents an option in a select element or as part of a list of suggestions in a datalist element.
output: The output element represents the result of a calculation performed by the application, or the result of a user action.
p: The p element represents a paragraph.
picture: 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, viewport size, image format, and other factors. It represents its children.
pre: The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
progress: The progress element represents the 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.
q: The q element represents some phrasing content quoted from another source.
rp: 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.
rt: 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 ruby element uses it as part of determining what it represents.
ruby: 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.
s: The s element represents contents that are no longer accurate or no longer relevant.
samp: The samp element represents sample or quoted output from another program or computing system.
script: The script element allows authors to include dynamic script, instructions to the user agent, and data blocks in their documents. The element does not represent content for the user.
search: The search element represents a 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.
section: The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
select: The select element represents a control for selecting amongst a set of options.
selectedcontent: The selectedcontent element reflects the contents of a select element’s currently selected option element. selectedcontent elements can be used to declaratively show the selected option element’s contents within the select element’s first child button element.
slot: The slot element defines a slot. It is typically used in a shadow tree. A slot element represents its assigned nodes, if any, and its contents otherwise.
small: The small element represents side comments such as small print.
source: The source element allows authors to specify multiple alternative source sets for img elements or multiple alternative media resources for media elements. It does not represent anything on its own.
span: 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.
strong: The strong element represents strong importance, seriousness, or urgency for its contents.
style: 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.
sub: ~~[…]~~ the sub element represents a subscript.
summary: The summary element represents a summary, caption, or legend for the rest of the contents of the summary element’s parent details element, if any.
sup: The sup element represents a superscript ~~[…]~~.
table: The table element represents data with more than one dimension, in the form of a table.
tbody: The tbody element represents a 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.
td: The td element represents a data cell in a table.
template: The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script. In a rendering, the template element represents nothing.
textarea: The textarea element represents a multiline plain text edit control for the element’s raw value. The contents of the control represent the control’s default value.
tfoot: The tfoot element represents the 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.
th: The th element represents a header cell in a table.
thead: The thead element represents the 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.
time: The time element represents its 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.
title: The title element represents the 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.
tr: The tr element represents a row of cells in a table.
track: The track element allows authors to specify explicit external timed text tracks for media elements. It does not represent anything on its own.
u: The u element represents a 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.
ul: The ul element represents a 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.
var: The var element represents a 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.
video: A video element is used for playing videos or movies, and audio files with captions.
wbr: The wbr element represents a line break opportunity.