Hyperlink <a>

Hyperlinks connect webpages or data items to one another. <a> elements define hyperlinks from a spot on a webpage (like a text string or image) to another spot on some other webpage (or even on the same page). Inline element.

Abbreviation <abbr>

Represents an abbreviation or acronym. Shows a tooltip text explaining the abbreviation. Inline element.

Audio <audio>

Used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream. Inline element.

Blockquote <blockquote>

Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given encapsuled in the cite attribute. Block element.

Bacon ipsum dolor amet capicola t-bone alcatra ball tip, tail drumstick meatloaf. Ribeye cupim landjaeger pork flank chicken meatloaf filet mignon frankfurter shank jowl brisket kevin andouille. Tail doner cupim burgdoggen chicken, flank rump leberkas pork loin. Bacon short ribs meatloaf sausage. Meatloaf ground round tongue, flank t-bone turkey turducken.

Line break <br>

Produces a line break in text (carriage-return). It is useful for wrapping text when the division of lines is significant.Inline element. An alternative is the <wbr>, a suggested line break.

Button <button>

An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog. Inline block element.

Canvas <canvas>

Container element to use with either the canvas scripting API or the WebGL API to draw graphics and animations. Inline element.

Canvas is a better choice than svg if you like to be able to save the image as jpg or png, if it is animation heavy (because it uses the GPU, not CPU), and if you like to use a raster image or apply raster effects. The content of a canvas is not part of the DOM and can not be styled with CSS, nor be accessed by screen readers. Svgs are a better choice for interaction heavy vector images, like infographics aimed for the screen.

Checkbox <input type="checkbox">

Checkboxes allow users to select multiple items from a list of options and to mark them as selected (checked). Inline block element. The user should not be required to select a value. Checkboxes should be used for choosing none or multiple options from a list of 2 – 5 options. A single option checkbox (boolean) should be replaced with a switch, except when space is limited, or if a switch gets too high visual weight in the current context. The single option checkbox can sometimes be replaced by other types of toggle controls.

It should be visible at a glance if a checkbox has been selected, and selected items should be more visually prominent than unselected items. That’s the reason why we choose to have a different background color when checked. Checkboxes make it easy to compare available options, unlike selects where the options are hidden in a dropdown.

Checkboxes should always be followed by a label. If a label is not defined, the checkbox most often gets associated with an enclosing element, like a card, panel, item or something else framing the checkbox.

Indeterminate

A checkbox is either checked or not. But there is another checkbox state handled in browsers – indeterminate – that can be set by JavaScript and styled by the css pseudo-selector :indeterminate. It is used as a grouping element, indicating that some of the included checkboxes are checked, but not all.

Checkbox 1

Disabled

A checkbox in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later.

Checkbox 1

Read-only

Checkboxes have a read-only option for when they are selected and in read mode, but still need their checkbox to be shown. This allows for content to be copied, but not interacted with or changed.

Checkbox 1

Cite <cite>

Used to mark up the title of a cited creative work within a <blockquote>. Part of the citation metadata. Inline element.

Code <code>

Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent default monospace font. Inline element.

Data <data>

Links a given piece of content with a machine-readable translation. If the content is time- or date-related, the time element must be used. Inline element.

Description details <dd>

Provides the description, definition, or value for the preceding term in a description list. Block element.

Deleted text <del>

Represents a range of text that has been deleted from a document. This can be used when rendering ”track changes”, or source code diff information, for example. The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document. Inline element.

Description list <dl>

Represents a description list. The element encloses a list of groups of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). Block element.

Term 1

Description

Term 2

Description

Description term <dt>

Specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element. Block element.

Details <details>

Creates a collapsed section in which information is visible only when the widget is toggled into an "open" state with the open attribute. A summary or label must be provided using the <summary> element. Block element.

Dialog <dialog>

Default non-visible. Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. Block element.

Emphasis <em>

Marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. Inline element.

Field set <fieldset>

Used to group several controls as well as labels & legend within a web form. Block element.

Figure <figure>

A container for some kind of visual content, with an optional figure caption. The figure, its caption, and its contents are referenced as a single unit. Block element.

Figure caption <figcaption>

Represents a caption or legend describing the rest of the contents of its parent <figure> element. Block element.

Form <form>

A document section containing interactive controls for submitting information. Fields within a form is subject to constraint validation. Block element.

Headings

Represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. Block elements.

Level 1 <h1>

Level 2 <h2>

Level 3 <h3>

Level 4 <h4>

Level 5 <h5>

Level 6 <h6>

Horizontal rule <hr>

Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. Block element.

Image <img>

Embeds an image into the document. Inline element.

Variants

.photo .polaroid .circle

Inserted text <ins>

A range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document. Inline element.

Keyboard input <kbd>

Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard. Inline element.

Label <label>

A caption for an item in a user interface. Should wrap the item (e.g. <input>), or use the for attribute. Inline element.

Legend <legend>

A caption for the content of its parent <fieldset>. Block element.

List item <li>

Represents an item in a list. It must be contained in a parent element: an ordered list <ol>, an unordered list <ul>, or a menu <menu>. Block element. In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Marked text <mark>

Text content which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context. Inline element.

Menu <menu>

A semantic alternative to an unordered list, but treated by browsers (and exposed through the accessibility tree) no different. It represents an unordered list of actions (which are represented by <li> elements). Block element.

Meter <meter>

Represents either a scalar value within a known range or a fractional value. Inline block element.

Option <option>

Used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document. Block element.

Option group <optgroup>

Creates a grouping of options within a <select> element. Block element.

Ordered list <ol>

An ordered list of items — typically rendered as a numbered list. Block element.

1. list item A
2. list item B

Output <output>

Container element into which a site or app can inject the results of a calculation or the outcome of a user action. Inline element.

Paragraph <p>

Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by white space and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. Block element.

This is a paragraph — Bacon ipsum dolor amet capicola t-bone alcatra ball tip, tail drumstick meatloaf. Ribeye cupim landjaeger pork flank chicken meatloaf filet mignon frankfurter shank jowl brisket kevin andouille. Tail doner cupim burgdoggen chicken, flank rump leberkas pork loin. Bacon short ribs meatloaf sausage. Meatloaf ground round tongue, flank t-bone turkey turducken.

A second paragraph.

Picture <picture>

Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. Inline element.

Preformatted text <pre>

Preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written. Block element.

  ____________________________
 | I'm an expert in my field. |
  ----------------------------
      \   ^__^
       \  (oo)\_______
          (__)\       )\/\
              ||----w |
              ||     ||
                

Progress <progress>

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. Inline block element.

Inline quotation <q>

Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element. Inline element.

Radio button <input type="radio">

Radio buttons allow users to select one item from a list of options. Inline block element. One value should always be pre-selected. Radio buttons should be used for choosing one option from a list of 2 – 5 options.

It should be visible at a glance if a radio button has been selected, and the selected item should be more visually prominent than unselected items. Radio buttons make it easy to compare available options, unlike selects where the options are hidden in a dropdown.

Range <input type="range">

Interactive control used to input numeric data from the user. It should hava a max and min attribute, as well as a step defining the granularity of the values. Inline block element.

Sample output <samp>

Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font. Inline element.

Select <select>

An input control that provides a menu of options. Inline block element.

Variants

Small print <small>

Used for side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small. Inline element.

Content span <span>

A generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a div element, but div is a block-level element whereas a <span> is an inline element.

Strong Importance <strong>

Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. Inline element.

Subscript <sub>

Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text. Inline element.

Summary <summary>

Specifies a summary, caption, or legend for a details element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed. Block element.

Superscript <sup>

Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. Inline element.

SVG <svg>

Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. Inline element.

Switch <input type="checkbox" class="bool">

A boolean choice, true or false, on or off, etc. Not an HTML element, but a styled single <input type="checkbox">, checked or not. Inline block element.

Table <table>

A container for tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. Table element.

Table body <tbody>

Tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. Table element.

Table caption <caption>

Specifies the caption (or title) of a table. Table element.

Table column <col>

Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element. Table element.

Table column group <colgroup>

Defines a group of columns within a table. Table element.

Table data cell <td>

Defines a cell of a table that contains data. It participates in the table model. Table element.

Table foot <tfoot>

Defines a set of rows summarizing the columns of the table. Table element.

Table head <thead>

Defines a set of rows defining the head of the columns of the table. Table element.

Table header cell <th>

Defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes. Table element.

Table row <tr>

Defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements. Table element.

Textarea <textarea>

Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. Inline block element.

Text input <input type="...">

Used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. Inline block element.

Types

Time <time>

Contains a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. Inline element.

Unordered list <ul>

An unordered list of items, typically rendered as a bulleted list. Block element.

• list item A
• list item B

Variable <var>

Represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent. Inline element.

Video <video>

Embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the audio element may provide a more appropriate user experience. Inline element.

Pie chart

Donut chart

Funnel chart

Sliced chart

Pyramid chart

World map