HTML

HTML Tag Reference

Oct 12, 2022
15 min read
HTML Tags

This page lists all the HTML Tags, which when used, create HTML elements.

<!--..-->

HTML comments are comments in your source code inserted using a HTML comment Tag. Comments inserted this way are hidden, and do not show to your users.

<a>

An <a> Tag, along with its <href> attribute, creates a hyperlink to another web page, email address, location on the same page, or files.

<abbr>

The <abbr> Tag defines an abbreviation or acronym, such as HTML or CSS.

<address>

The <Address> Tag is used to define a person or organization’s contact information. It can contain a wide range of contact information, such as a physical address, email, and phone.

<area>

The <area> tag defines predefined clickable areas within an image map. This allows areas on an image to be associated with a link.

<article>

The <article> tag specifies self-contained content that should make sense in isolation and which can be distributed separately from the rest of the site.

<aside>

The <aside> tag is used to hold indirectly-related but separate content to the document’s main content. They are commonly used for sidebars, author information, pull-quotes, and call-out boxes.

<audio>

The <audio> Tag is used to embed a sound file in your HTML document. It can contain multiple audio sources, with the browser choosing the most suitable one.

<b>

The <b> tag enables you to make text bold without assigning any extra importance.

<base>

The <base> Tag specifies the base URL for all relative URLs used on your web page.

<bdi>

The <bdi> element, or Bidirectional Isolate Element, is used to tell the browser’s bidirectional algorithm to treat it in isolation from its surrounding text.

<bdo>

The <bdo> tag, or Bidirectional Text Override tag, allows you to override the bidirectional text algorithm by explicitly setting a direction.

<blockquote>

The <blockquote> Tag indicates that the enclosed text is a quote. It may contain a cite attribute with an URL to the quote source and a <cite> element with a text description of the source.

<body>

The body tag is one of the most important html tags. It defines the document’s body and contains all the contents of the HTML document.

<br>

The <br> tag is used to add a line break or carriage-return in HTML.

<button>

The <button> element creates a clickable button and is often used to submit forms and other button functionality.

<canvas>

The <canvas> element provides scripts with a resolution-dependent bitmap canvas. It can be used for graphs, graphics, and other images.

<caption>

The <caption> element is a very underused yet important element that provides a title (or caption) for HTML tables.

<cite>

The <cite> tag defines the title of a piece of creative work and must contain the title of that piece of work.

<code>

The <code> element is used to define a fragment or piece of computer code. It will display any text wrapped by <code> tags in the browser’s default monospace font.

<col>

The <col> tag specifies common column properties for all columns within a <colgroup> element.

<colgroup>

The <colgroup> tag is used to specify a group of columns in a table.

<data>

The <data> Tag links its content with a machine-readable form of that content via the value attribute.

<datalist>

The <datalist> tag specifies a list of options for an <input> element in the form of a drop-down box.

<dd>

The <dd> Tag is used to display the definition description of a term (<dt>) in a definition list (<dl>).

<del>

The <del> tag indicates the content has been removed from the document. Browsers will display the <del> element with a line running through it.

<details>

The <details> tag creates a disclosure widget, that if clicked to an ‘open’ state, will show additional information. A summary or label can be specified with a <summary> element.

<dfn>

The <dfn> tag is used to specify a term that is defined in the content of your web page.

<dialog>

The <dialog> tag represents part of an application that a user interacts with, such as a dialog box or window.

<div>

The <div> tag defines a container within an HTML document that has no semantic meaning on its own.

<dl>

The <dl> tag is used to define a description list. This element encloses a group of description terms (<dt>) along with their definition description (<dd>).

<dt>

The <dt> tag is used to display the definition term alongside a definition description (<dd>) in a definition list (<dl>).

<em>

The <em> tag is used to add semantic emphasis to words or text compared to the surrounding text.

<embed>

The <embed> tag is used to embed external resources into an HTML document, such as an image, web page, audio file, or video file.

<fieldset>

The <fieldset> tag is used to group a set of form controls and labels within an HTML form, optionally grouped under a common name (legend).

<figcaption>

The <figcaption> tag is a child of the <figure> element. It is used to attach a caption to the content within the <figure> element.

<figure>

The <figure> tag is a self-contained piece of content, with an optional caption (<figcaption>), and typically referenced as a single unit from the main flow of the document.

<footer>

A <footer> element represents the footer for its nearest sectioning content (such as <article> or <section>), or sectioning root element (<body>).

<form>

The <form> tag is used to create an HTML form that contains controls for submitting user information.

<h1> to <h6>

The tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are used to define HTML headings. The headings are ranked in order of importance.

<head>

The <head> element contains a collection of metadata relating to the web page.

<header>

The <header> tag contains introductory content or navigational links. It may also include a logo, search form, author name, and other introductory elements.

<hr>

The <hr> element represents a paragraph-level thematic break. This could be a scene change in a story or a transition to another topic within a section of a reference book.

<html>

The <html> tag represents the root, or top-level, element of an HTML document. It is often referred to as the root element as other elements must be descendants.

<i>

The <i> tag is used to define some text in an alternative voice or mood without emphasizing it. The text usually displays in italic.

<iframe>

The <iframe> tag represents a nested browsing context and is used to embed an HTML document in your current HTML document.

<img>

The <img> tag is used to embed an image on a web page.

<input>

The <input> element is a field used in HTML Forms enabling the user input data.

<ins>

The <ins> tag indicates the content has been inserted into the document. Browsers will display the insert element as underlined.

<kbd>

The <kbd> tag is used to define a string of text as keyboard input or keyboard press. It can be used in combination with <samp> to represent other more specific scenarios.

<label>

The <label> tag creates a caption for an item in a form or user interface.

<legend>

The <legend> tag displays a caption for the parent <fieldset> element.

<li>

The <li> tag is used to represent an item in a list. It should be a child of an <ol> element (numbered list) or <ul> element (bullet list).

<link>

The <link> tag specifies the relationship between the current document and an external resource, such as Javascript files, stylesheets, font files, preferred version of the page, and more.

<main>

The <main> tag is used to represent the main content of the <body> of a document. It contains the primary information on the page or main functionality of an app.

<map>

The <map> element along with the <img> element and any <area>) descendants define an image map.

<mark>

The <mark> tag is used to highlight or mark text of particular interest or relevance, often for notational purposes or scrutiny.

<meta>

The <meta> tag specifies metadata, or information, about a HTML document that cannot otherwise be expressed using the <title>, <base>, <link>, <style>, or <script> tags.

<meter>

The <meter> tag represents a scalar measurement within a specific range or a fractional value. When using it, a gauge or progress bar will be displayed by the browser.

<nav>

The <nav> tag specifies a section of a page whose purpose is to link to other pages or parts of the same page, such as navigation links.

<noscript>

The <noscript> tag is used to display content when a browser does not support scripts or has scripts disabled.

<object>

The <object> tag is a container used to embed an external resource. The resource can be an image, nested HTML, or a resource handled by a plugin.

<ol>

The <ol> tag is used to create an ordered list, which is typically a numbered list.

<optgroup>

The <optgroup> tag is used to group a number of related options within a select element.

<option>

The <option> tag is used to define an item in a <select>, <optgroup>, or <datalist> element.

<output>

The <output> tag represents the result of a calculation performed by an application or result of a user action.

<p>

The <p> tag represents a paragraph.

<param>

The <param> tag is used to specify parameters for an <object> element.

<picture>

The <picture> tag contains an <img> element along with zero or more <source> elements to offer different images depending on the user’s screen pixel density, viewport size, image format, and more.

<pre>

The <pre> tag is used to define preformatted text and displays content with a fixed-width font with spaces and line breaks preserved.

<progress>

The <progress> tag represents the status of completion of a task.

<q>

The <q> tag indicates that the enclosed text is an inline quote. It may contain a cite attribute with a link to the source.

<rp>

The <rp> tag is used to provide parenthesis or other content around a ruby text component where <ruby> elements are not supported by the web browser.

<rt>

The <rt> element holds the text component of the <ruby> element, which consists of the meaning or pronunciation of the <ruby> element’s content.

<ruby>

The <ruby> element allows a word or phrase to be marked with ruby annotations. Ruby annotations are primarily used in East Asian typography to guide pronunciation or include other annotations.

<s>

The <s> tag is used to mark content that is no longer accurate or relevant with a strikethrough. It is not suitable to indicate document edits; use the <del> element instead.

<samp>

The <samp> tag is used to mark up a piece of inline text representing a piece of or quoted output from a computer system or program.

<script>

The <script> tag is used to embed a client-side script, such as JavaScript. It can either be embedded directly or through an external file using the src attribute.

<section>

The <section> tag represents a generic section of a document or application and should include a thematic grouping of related content.

<select>

The <select> tag creates a control that enables you to select from a set of options in the form of a drop-down list.

<slot>

The <slot> tag is identified by its name attribute. It allows you to define a placeholder in your template that can be filled with your markup.

<small>

The <small> tag specifies the content you wish to display as small print, like side comments or copyright information.

<source>

The <source> tag is used to specify multiple alternative media sources for the <video>, <audio>, and <picture> elements.

<span>

A <span> tag is an inline container that can be used to mark up text or other phrasing content elements, such as <abbr>, <b>, <em>, <picture>, and more.

<strong>

The <strong> tag adds semantic meaning and indicates strong importance, seriousness, or urgency for its contents.

<style>

The <style> tag contains CSS, a language used to style the web page or parts of it.

<sub>

The <sub> tag is an inline element that displays text as a subscript. The subscript text shows as smaller and with a lower baseline.

<summary>

The <summary> tag represents a summary, caption, or legend for its parent <details> element.

<sup>

The <sup> tag is an inline element that displays text as a superscript. The superscript text shows as smaller and with a higher baseline.

<table>

A <table> element represents data in a two-dimensional table comprising rows and columns of cells.

<tbody>

The <tbody> tag encloses a block of table rows (<tr> elements), which consists of the body of the table.

<td>

A <td> element represents a standard data cell in a table.

<template>

A <template> tag is used to declare a fragment of HTML that can be cloned and inserted into the web page using JavaScript.

<textarea>

The <textarea> element is a multi-line field used in HTML Forms enabling the user input data.

<tfoot>

A <tfoot> tag is used to define a group of footer-related table rows.

<th>

A <th> element represents a table cell used for a heading. The exact nature of the heading is determined by the scope and header attributes.

<thead>

A <thead> tag is used to define a group of header-related table rows.

<time>

A <time> element represents a specific date, time, or duration. It must adhere to a valid syntax. You can specify a more readable (non-valid syntax) date or time by placing a valid version in an optional datetime attribute.

<title>

Defines the title for the web page. It is used in the browser title bar, browser bookmark titles, and the display title in search engine results pages.

<tr>

A <tr> element represents a row of table cells.

<track>

A <track> element is used as a child of the <audio> or <video> elements to define a text track, such as captions, subtitles, or descriptions.

<u>

A <u> tag represents a span of text that is unarticulated and rendered with a non-textual annotation, such as underlining misspelled words with a red underline. It carries semantic meaning.

<ul>

The <ul> tag is used to create an unordered list, which is typically a set of bullet points.

<var>

The <var> element represents a variable, such as those used in mathematical expressions or programming. The element is usually displayed in italic.

<video>

The <video> tag is used to embed a video player in your HTML document. It can contain multiple video sources, with the browser choosing the most suitable one.

<wbr>

A <wbr> specifies a word break opportunity. You can insert it into long words to select where it is ok for the browser to insert a word-break, which would usually have not done so.