HTML Cheat Sheet

HTML (Hypertext Markup Language) is the basic language of the World Wide Web since Tim Berners-Lee invented it in 1991. Since then, it has gone through several modifications to meet the increasing demands of the Internet age. HTML5 is the latest version supported by modern web browsers. We believe understanding HTML is important. Therefore, we have provided an HTML cheat sheet that has a full list of all HTML elements, including descriptions, code examples, and live previews. Scroll down to browse all HTML tags alphabetically or by their category, or download it as a PDF.

List of HTML Elements by Category

An HTML element (or tag) is an individual component of an HTML document. Here below is a full list of HTML elements listed by category.

HTML Tag

<html> tag is the top-level, root tag and communicates to the browser that it is an HTML document. Every element in an HTML document is a descendant of this tag.

Attributes (modifiers)
xmlns + global attributes

Code example

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

Base Tag

This is an HTML element inside the Head tag that specifies the base URL of a site. The <base> tag provides the main URL relative to other paths in the document. It provides a starting point-of-reference, eliminating the need to specify the absolute URL path to a resource within the page.

Attributes (modifiers)
href | target (_self | _blank | _parent | _top) + global attributes

Code example

<base href="https://hostingcanada.org/page.html">

Head Tag

The <head> tag is a container for the head elements and descriptive tags in the document. It is placed at the beginning of the document, usually after the opening HTML tag and doesn’t get displayed. It includes descriptive metadata information such as the document title but also links to external resources the browser needs to render the webpage like CSS documents, scripts, links to scripts and external stylesheets.

Attributes (modifiers)
Global attributes

Code example

<html>
  <head>
    <title>Document title</title>
  </head>
</html>

Link Tag

The <link> tag is useful in establishing a link between the HTML document and an external source. A <link> tag can only be used in the document’s <head> tag and it shouldn’t be confused with hyperlinks created with anchor <a> tags. This is because the <link> tag does not create a clickable link, but it is used to specify resources like external stylesheets that are used to customize the web page’s appearance and layout. 

Attributes (modifiers)
href | rel | media | hreflang | type | sizes | crossorigin | integrity + global attributes

Code example

<link href="style.css" rel="stylesheet">

Meta Tag

Also part of the Head section, this element is used to describe and provide metadata in a structured way to the web document. These aren’t necessarily for the benefit of the user so don’t get displayed on the page. Rather, they are machine-parsable information used by web services such as browsers, and search engines.

Attributes (modifiers)
charset | content | http-equiv | name + global attributes

Code example

<meta charset="utf-8">

Style Tag

Used to change the layout, position, and appearance of elements in an HTML document. Inside the tags, the style information can be administered by applying inline CSS to a single element. Or placed inside the Head section as internal styles tags <styles> and implemented as a class.

Attributes (modifiers)
media | type | title + global attributes

Code example

<style type="text/css">
body {
  color:red;
}
</style>

Title Tag

Compulsory in HTML documents, this tag specifies the <title> of the document which is shown in the browser toolbar. This tag is also useful because it provides a name for the document when a user bookmarks it or places it in the favorites toolbar.

Attributes (modifiers)
Global attributes

Code example

<title>This is the page title</title>

Address Tag

Provides contact information of the document owner or author. The <address> tag may include whatever information is deemed appropriate to be made public such as an address, phone numbers, email, URL in the enclosed tags. 

Attributes (modifiers)
Global attributes

Code example

<address>Hostingcanada.org<br>xx<br> xx<br> xx </address>

Article Tag

The <article> tag is an independent composition in a webpage, web application, or site that ought to make sense in its own right. This is because it could potentially be distributed on its own, reused or syndicated, and therefore sectioned separately though it is related to other content of the site. 

Attributes (modifiers)
Global attributes

Code example

<article class="ureview">
      <p>I love this tool.</p>
      <footer>
        <p>
          Posted on <time datetime="2016-05-16 19:00">May 16</time> by Matt.
        </p>
      </footer>
</article>

Aside Tag

The <aside> tag highlights the main objective of a webpage in a shorter, succinct manner that grabs attention, therefore emphasizing it to the user.

Attributes (modifiers)
Global attributes

Code example

<article>
  <p>
    The Disney movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    The movie earned $87 million during its initial release.
  </aside>
  <p>
    More info about the movie...
  </p>
</article>

Body Tag

The <body> constituents the body of the web document where the main content of the web page, such as text, images, lists, tables, and so on, are displayed. Like the base and head tag, there can only be one body tag in a document.

Attributes (modifiers)
onafterprint | onbeforeprint | onbeforeunload | onblur | onerror | onfocus | onhashchange | onlanguagechange | onload | onmessage | onoffline | ononline | onpopstate | onredo | onresize | onstorage | onundo | onunload + global attributes

Code example

<html>
<head>
  <title>Here goes the title of the document</title>
</head>
<body>
  Here goes the he content of the document......
</body>
</html>

Footer Tag

The <footer> is a purely structural element used to define the footer of a document. It typically contains contact information, copyright information, authorship, sitemap, back-to-top links, and other navigational elements.

Attributes (modifiers)
Global attributes

Code example

<footer>Some copyright info goes here</footer>

H1 to H6 Tag

These tags are used exclusively to define a range of headings in a document. They are in decreasing order of size, with <h1> denoting the largest heading, while <h6> the smallest. Likewise, they are graduated along with levels of importance, with  <h1> defining the most important heading, down to <h6> as the least.

Attributes (modifiers)
Global attributes

Code example

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Header Tag

Not to be confused with the head tag, the <header> tag is more similar to the footer tag as it is a structural element mainly used for introductory content or navigational elements. As the name suggests, it is used to demarcate the header of a document or section. It usually includes authorship information, relevant logos or icons, search forms, one or more heading elements tags (<h1> … <h6>), and navigation links. The <header> tag cannot be placed within a footer, address, or another header element tag.

Attributes (modifiers)
Global attributes

Code example

<header>Logo</header>

Hgroup Tag

The <hgroup> tag is a heading grouping tag used to consolidate heading elements into a unit. It is used to provide a multi-level grouping to wrap one or more heading elements  (<h1> …  <h6>), into headings and subheadings. 

Attributes (modifiers)
Global attributes

Code example

<hgroup>
  <h1>Main title</h1>
  <h2>Secondary title</h2>
</hgroup>

Nav Tag

The purpose of the nav tag <nav> is to declare a section comprised of navigational links, especially when represent different routing options. The nav tag is a semantic markup element, conveying unique meaning and importance to the block of links so designated. These links can be the route to content within the current document or other documents. It is not required or even advised that all links be placed inside an <nav> element but it should be used when demarcating a major block of navigation elements. The navigational elements inside the tag are usually comprised of anchor tags <a>.

Attributes (modifiers)
Global attributes

Code example

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>

Section Tag

The section element <section> is a structural element used to represents a standalone section. It is used to divide the document content into sections and subsections, which may contain items such as headers, footers or chapters. It is a semantic element, describing its meaning both to the developer, user, and browser by virtue of grouping generic blocks of related content. 

Attributes (modifiers)
Global attributes

Code example

<section><h1>Heading</h1><p>Bunch of awesome content</p></section>

Blockquote Tag

This indicates that the text - usually a large section of text - enclosed by <blockquote> tag is a quotation. The quote encapsulated by this tag is usually from another source, and browsers often render them indented both on the right and left sides to create a visual distinction. It provides a cite attribute to link the URL of the quotation’s source.

Attributes (modifiers)
cite + global attributes

Code example

<blockquote cite="https://hostingcanada.org/"><p>This is a quote taken from Hostingcanada.org.</p></blockquote>

Br Tag

The <br> tag is used to create single line breaks on a web page. It doesn’t have any ending, enclosing tag because it is an empty tag. This void tag should only be used to separate lines that are parts of content, such as lines in addresses or poems. It is ill-advised to use it separate thematic groups in a paragraph, as <p> or multiple <p> tags are better suited for that purpose. 

Attributes (modifiers)
Global attributes

Code example

<p>Hostingcanada.org<br>xx <br>xx</p>

DD Tag

A tag used in a description lists, <dd> (DD - Definition Description) is used in conjunction with other description list tags to clarify the meanings and groupings in the list. While the <dt> tag (DT - Definition Term) defines terms and names, the subsequent <dd> tag describes the aforementioned terms in clearer detail.  You can place paragraphs, lists, images, line breaks, links and so on inside the <dd> tag.

Attributes (modifiers)
Global attributes

Code example

<dl>
  <dt>Hostingcanada.org</dt>
  <dd>Helps you find the best tools for running a small business website</dd>
</dl>

Div Tag

Often used as a container in HTML documents, the <div> tag is used to create a section, a division on a document that renders as a self-contained unit. Web developers often use the <div> tag to encapsulate elements intended to be grouped together for commonality, like applying the same CSS styles to its underlying elements.

Attributes (modifiers)
Global attributes

Code example

<div><p>Any kind of content here. Such as <p>, <table>. You name it!</p></div>

Dl Tag

The description list tag provides a mechanism for declaring a list that has its own terms and descriptions. The description list <dl> allows the creation of a pair of two entries, a term <dt> and a description <dd>. The eventual list resembles a data structure such as an associative array with key-pair values.

Attributes (modifiers)
Global attributes

Code example

<dl>
  <dt>Hostingcanada.org</dt>
  <dd>Helps you find the best tools for running a small business website</dd>
</dl>

Dt Tag

<dt> constitutes the terms of a description list. The term or name the <dt> provides must be done within a <dl> list, and usually comes before its subsequent description by a <dd> element.

Attributes (modifiers)
Global attributes

Code example

<dl>
  <dt>Hostingcanada.org</dt>
  <dd>Helps you find the best tools for running a small business website</dd>
</dl>

Figcaption Tag

Provides a caption for a marked-up photo. It serves as a legend or caption for a <figure> element. 

Attributes (modifiers)
Global attributes

Code example

<figure>
  <img src="http://www.example.com/picture.png" alt="An awesome picture"> 
  <figcaption>A picture</figcaption>
</figure>

Figure Tag

This tag is for photo markup and other artistic annotations. It identifies an independent unit of content such as a diagram, photo, illustration, code listing, and so on.

Attributes (modifiers)
Global attributes

Code example

<figure>
  <img src="http://www.example.com/picture.png" alt="An awesome picture"> 
  <figcaption>A picture</figcaption>
</figure>

Hr Tag

This tag means a horizontal rule is placed in a document to denote when a subject or topic has changed in the document, helping separate the content in a paragraph-like fashion. Layout attributes were removed for this tag in HTML5, so CSS is required for styling. When used in XHTML, it has to be enclosed properly: <hr/>

Attributes (modifiers)
Global attributes

Code example

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

Li Tag

The list tag proves the mechanism to present lists items in an HTML document. The <li> tag is either nested within an <ol> or <ul> parent tags. The former is for creating numeric ordered lists, the latter, unordered. Each <li> creates an individual item that constitutes the list.

Attributes (modifiers)
value + global attributes

Code example

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

Main Tag

Context distinctly unique to a document is placed in the <main> tag. Therefore, it shouldn’t contained the same content found across pages of the same website. As a result, it shouldn’t contain elements such as headers, footers, and navigational items like menus. This tag is the central content of the <body> tag. It should be related to and expound upon the main theme of the document.

Attributes (modifiers)
Global attributes

Code example

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <article>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  </article>
</main>

Ol Tag

<ol> is for ordered items which are usually displayed as a numbered list, though they can also be rendered alphabetically. The start attribute provides a starting point, an ordinal number for the numbering the first item on the list. Each subsequent item is incremented by 1, unless overridden by the <li> element’s value attribute, whereby that item and subsequent ones reset to the new value. Reverse the order of the list i.e., the ascending or descending order with the reverse attribute.

Attributes (modifiers)
start | reversed | type + global attributes

Code example

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

P Tag

The p tag demarcates a block of text into a paragraph. As opposed to being inline, this is a block-level tag, created placing text between the opening and closing tags. Most web browsers automatically added spacing before and after each paragraph, though you can alter this with the CSS margin property.

Attributes (modifiers)
Global attributes

Code example

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

Pre Tag

Useful for preformatted text, this compels the browser to display the text as exactly as formatted. Browsers usually render it in a peculiar way, to distinguish it from other text. It is used for showing things such as computer code, ASCII art, and email correspondence.

Attributes (modifiers)
Global attributes

Code example

<pre>
body {
  background-color:red;
}
</pre>

Ul Tag

<ul> is for unordered lists whose items have no sequential relationship with each other. The default style of display is the circle-style bulleted list, though the list-style-type property can be used to change it to another bullet type. In addition, the list-style-type property is used to apply images to the list instead of bullets.

Attributes (modifiers)
Global attributes

Code example

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

A Tag

If you want to create clickable hyperlinks in your HTML document, then you’ll find the anchor, <a> tag virtually indispensable. It is used to link one document to another, or even create a link within the same document. This is achieved through its href attribute, which points to the URL of the webpage you want to redirect to. Omitted href will automatically render the following these attribute functions unusable: media, hreflang, download, target, and rel. Hyperlinks are given different colors to signify their current state. All are underlined, but a visited link is often purple, unvisited blue, and an active one red.

Attributes (modifiers)
href | hreflang | media | rel | target (_self | _blank | _parent | _top) | type | download | ping | referrerpolicy + global attributes

Code example

<a href="https://hostingcanada.org">Hostingcanada.org</a>

Abbr Tag

<abbr> Provides abbreviations of elements. You can use to make your life easier by associating a full-text description with a simpler acronym. The full length description is stored in the title attribute of the tag. The benefit is more for machine-readable agents such as browsers and search engines, since users do not see the full-text described in the title attribute.

Attributes (modifiers)
Global attributes

Code example

<p>This is <abbr title="Hypertext Markup Language">HTML</abbr></p>

B Tag

This makes a text bold, highlighting it to draw attention. This was formerly referred to as the Boldface. It is advised that <b> shouldn’t be used to style text, only to draw the user's attention. Styling should be done with CSS’s font-weight property, if you want to create boldface text. The <strong> element can also be used to signal that the enclosed text has some special significance.

Attributes (modifiers)
Global attributes

Code example

<p>This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document. </p>

BDI Tag

This is a bi-directional element, meaning that it works to isolate a range or span of text in such a way that the formatting of surrounding text in a different direction does not impact it. The call on how to do this is made by the browsers bidirectional algorithm, especially when right-to-left (RTL) direction languages (Arabic and Hebrew) are juxtaposed nearby with left-to-right languages, such as English.

Attributes (modifiers)
dir + global attributes

Code example

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>

BDO Tag

This overrides the browser's current bi-directionallity. It resolves the conflict which arises when you have to place a right-to-left (RTL) languages beside a left-to-right (LTR) one.

Attributes (modifiers)
dir + global attributes

Code example

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Cite Tag

This tag is used to cite a referenced work. The defined title can be linked to the referenced work with an href attribute pointing to the URL. 

Attributes (modifiers)
Global attributes

Code example

<blockquote cite="https://hostingcanada.org/"><p>This is a quote taken from Hostingcanada.org</p></blockquote>

Code Tag

The <code> tag is used to define and display computer code in an HTML document. The tag creates the text in a differently styled fashion to relay the fact that it is a short piece of code. It can be combined with the <pre> tag to preserve formatting within the code such as line breaks and indentation.

Attributes (modifiers)
Global attributes

Code example

<p>Regular text. <code>This is code.</code> Regular text.</p>

Del Tag

<del> identifies a text that has been deleted, though not removed in order to preserve the revision history. The deleted text is usually shown with strikethrough to indicate its status.

Attributes (modifiers)
cite | datetime + global attributes

Code example

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p><del><p >This paragraph has been deleted.</p></del>

DFN Tag

Signifies a term being defined with a context. The nearest parent or ancestor element to the term defined by the <dfn> tag, whether it is a <section>, <p>, <dt>/<dd> is regarded as the definition of the term. 

Attributes (modifiers)
Global attributes

Code example

<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>

Em Tag

This tag emphasizes a text relative to its surrounding text to highlight that it has greater emphasis. 

Attributes (modifiers)
Global attributes

Code example

<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>

I Tag

This tag is for italics, to signify text is meant to convey a different mood, temperament or voice. It is based on semantics, so judgement is required when to use it, as opposed to choosing <em>, <strong>, and so on. Often used to distinguish technical terms, thought bubbles, word phrases from a foreign language and the like. 

Attributes (modifiers)
Global attributes

Code example

<p>The Latin phrase <i>Veni, vidi, vici</i> is often mentioned in music, art, and literature</p>

Ins Tag

<ins> is used in conjunction with <del> to insert a text into a document. While a deleted element is denoted with a strikethrough, inserted text is highlighted with an underline.

Attributes (modifiers)
cite | datetime + global attributes

Code example

<ins>This text has been inserted</ins>

Kbd Tag

This defines the kind of user input required of a user. This text is often highlighted by the browser in a default monospace font, those this may differ depending on the browser. <kbd> signifies the text expected from the user, not to be confused with <input> which is a control for the user to make an entry.

Attributes (modifiers)
Global attributes

Code example

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

Mark Tag

As the name suggests, <mark> is used to mark a text within another text content, in order to highlight it for relevance or importance. The marked text could be for notational and reference purposes.

Attributes (modifiers)
Global attributes

Code example

<p>The <mark> element is used to <mark>highlight</mark> text</p>

Q Tag

<q> is for quotation and it provides a mechanism for declaring short quotations in text. The browser places the quotation marks for you, so you don’t need to bother with that. For long quotations that have paragraph breaks, use <blockquote>.

Attributes (modifiers)
cite + global attributes

Code example

<p>Everytime Kenny is killed, Stan will announce 
   <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
     Oh my God, you/they killed Kenny!
   </q>.
</p>

RP Tag

Provided parenthesis around a ruby text is its thing, so that browsers who don’t support ruby can display the text. <rp> works with the <ruby> element to provide this fall-back mechanism.

Attributes (modifiers)
Global attributes

Code example

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

RT Tag

<rt> is designed for ruby language annotations to specify the text component of the annotation, which is used to provide explanation, pronunciation, translation or transliteration for East Asian typography. This tag must always be placed with a <ruby> element.

Attributes (modifiers)
Global attributes

Code example

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Ruby Tag

<ruby> elements represent ruby language annotations which indicate the pronunciation of East Asian characters.

Attributes (modifiers)
Global attributes

Code example

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

S Tag

<s> tag is used to markup text that is no longer accurate or correct with a strikethrough. However, document edits are better highlighted with the <del> tag.

Attributes (modifiers)
Global attributes

Code example

<p>Planet earth is <s>flat</s> round</p>

Samp Tag

<samp> signifies a sample text being displayed in the document, which is usually output from a computer program. The content is often differentiated by rendering in the browser's default monospaced font.

Attributes (modifiers)
Global attributes

Code example

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

Small Tag

The small tag <small> makes text one size smaller and is ideal for emphasizing things that are not part of the main text content but are still necessary to convey to an audience like side-comments, copyright, and legal text. It is styled different from the main presentation to create a meaningful contrast.

Attributes (modifiers)
Global attributes

Code example

<p>This is the first sentence.  <small>This whole sentence is in small letters.</small></p>

Span Tag

It is an inline container for group elements, perhaps for styling purposes or because they share common attributes. <span> is often used to provide a small chunk of configured HTML inside a line, as a hook to a part of text or document.

Attributes (modifiers)
Global attributes

Code example

<p><span>Some text</span></p>

Strong Tag

<strong> highlights the importance of a text visually, creating a differentiation between the text within its tag and the rest of the surrounding content. It is a phrase tag, depicting the text in bold to show that it has structural meaning.

Attributes (modifiers)
Global attributes

Code example

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

Sub Tag

<sub> is often used in depicting chemical formulas in a text by creating subscript text which is rendered in smaller font and placed half a character below the normal line level. 

Attributes (modifiers)
Global attributes

Code example

<p>The chemical formula of water is H<sub>2</sub>O</p>

Sup Tag

<sup> is the superscript tag, essentially the opposite of <sub>, appearing half a character above the normal line but in similar small text fashion. It is used to denote footnotes and exponent powers in numeric values.

Attributes (modifiers)
Global attributes

Code example

<p>This text is <sup>superscripted</sup></p>

Time Tag

Implicit in its title, the <time> tag is all about time: encoding date and time in a human-readable form with its Datetime attribute, providing scheduled events such as birthday reminders, time intervals durations, precise date in the Gregorian calendar, and even time on a 24-hour clock.

Attributes (modifiers)
datetime + global attributes

Code example

<p>The concert starts at <time>20:00</time>.</p>

Var Tag

Variables in mathematical equations or computer programs are denoted by the <var> tag, which is italicized.

Attributes (modifiers)
Global attributes

Code example

<p> A simple equation: <var>x</var> = <var>y</var> + 2 </p>

Wbr Tag

This tag known by its acronym (Word Break Opportunity) provides an opportunity for the browser to potentially insert a line break at a text placed within <wbr> tag when its window is resized.

Attributes (modifiers)
Global attributes

Code example

<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>

Caption Tag

<caption> is not an all-purpose tag, but one restricted for use in tables. It should be placed immediately after the <table> tag to create a caption for the table.

Attributes (modifiers)
Global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Col Tag

Embedded within the <colgroup>, this tag defines column properties within a table. <col> is used to set style properties for all columns, so they don’t have to be repeated for each cell.

Attributes (modifiers)
span + global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Colgroup Tag

Groups together a set of columns for collective formatting. <colgroup> is the parent container for one or more <col> elements, must be placed after the <caption> tag but before any table elements such as <thead>, <tbody>, and <tr>.

Attributes (modifiers)
span + global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Table Tag

The <table> tag provides the ability to render two-dimensional tabular data. It is comprised of one or more table elements such as <td> and <tr>, with <th>, <thead>, and <tfoot> as other options.

Attributes (modifiers)
summary + global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Tbody Tag

<tbody> helps to define parts of an HTML table by encapsulating a set of table rows (<tr> elements), to show they are part of the table’s content. This table body tag is used together with the table header and footer tags (<thead> and <tfoot>) to demarcate different parts of the table. This enables browsers to scroll the entire body of the table, in a manner which is independent of other elements (such as its header and footer.)

Attributes (modifiers)
Global attributes

Code example

<table>
<thead>
     <tr> ...header information... </tr>
</thead>
<tfoot>
     <tr> ...footer information... </tr>
</tfoot>
<tbody>
     <tr> ...first row of block one data... </tr>
     <tr> ...second row of block one data... </tr>
</tbody>
<tbody>
     <tr> ...first row of block two data... </tr>
     <tr> ...second row of block two data... </tr>
     <tr> ...third row of block two data... </tr>
</tbody>
</table>

Td Tag

This tag is used to specify a standard cell within an HTML table and participates in the table model object. The <td> cell is different from the header cell, created with <th> which contains header information. While the latter is bold and centered by default, <td> cells are regular and normally left-aligned. <td> must also be nested within a <tr> tag.

Attributes (modifiers)
colspan | rowspan | headers + global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Tfoot Tag

Footer content is grouped together with the <tfooter> tag. It is used along with the <tbody> and the <thead> tag. The set of rows the <tfoot> element defines summarizes the rows of a table. Along with <thead>, when a table content spans several pages, <tfooter> can make it possible to print and display the header and footer on each page. It has to be a child of <tbody>, behind elements such as <thead>, <tbody>, <caption>, and <colgroup>.

Attributes (modifiers)
Global attributes

Code example

<table>
<thead>
     <tr> ...header information... </tr>
</thead>
<tfoot>
     <tr> ...footer information... </tr>
</tfoot>
<tbody>
     <tr> ...first row of block one data... </tr>
     <tr> ...second row of block one data... </tr>
</tbody>
<tbody>
     <tr> ...first row of block two data... </tr>
     <tr> ...second row of block two data... </tr>
     <tr> ...third row of block two data... </tr>
</tbody>
</table>

Th Tag

<th> tag is the header to the standard cell. Just like <td>, this header cell must be nested inside <tr>. <th> holds the header information, while the <td> element is used to hold the body of the data. Its main purpose is for styling a specific cell as a header cell instead of an ordinary cell.

Attributes (modifiers)
colspan | rowspan | scope | headers + global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Thead Tag

This tag provides a header to group a body of content on the HTML table. <thead> is the head to the content body, <tbody>. It creates a set of rows marking the head of the columns in a table. Just as <tfoot>, it enables the header information to be displayed at the head of each page if the table content spans multiple pages.

Attributes (modifiers)
Global attributes

Code example

<table>
<thead>
     <tr> ...header information... </tr>
</thead>
<tfoot>
     <tr> ...footer information... </tr>
</tfoot>
<tbody>
     <tr> ...first row of block one data... </tr>
     <tr> ...second row of block one data... </tr>
</tbody>
<tbody>
     <tr> ...first row of block two data... </tr>
     <tr> ...second row of block two data... </tr>
     <tr> ...third row of block two data... </tr>
</tbody>
</table>

Tr Tag

A row element within a HTML table. The <tr> row of cells can be produced using a combination of <td> data cells and <th> header cell elements.

Attributes (modifiers)
Global attributes

Code example

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Button Tag

The <button> tag is used to create and define a clickable button on a document, usually placed within a <form>. You can place content such as text in it with the value attribute. The type attribute determines whether it is an ordinary clickable button, a submit button for a form, or a reset button to revert the form to initial values. By default, the style of the HTML button is often consistent with the host platform the user agent is currently running on. However, it allows CSS attributes to change its appearance.

Attributes (modifiers)
autofocus | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget (_self | _blank | _parent | _top) | name | type | value + global attributes

Code example

<button name="button">I am a button. Click me!</button>

Data Tag

The <data> tag provides data in user-friendly, human-readable form so users can comprehend its meaning, while also presenting the same data in a format to be processed by a machine. However, in circumstances where the data is time or date related, then the <time> tag should be used instead.

Attributes (modifiers)
value + global attributes

Code example

<ul>
 <li><data value="3967381398">Mini Ketchup</data></li>
 <li><data value="3967381399">Jumbo Ketchup</data></li>
 <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
</ul>

Datalist Tag

<datalist> is usually used in conjunction with the <input> tag to provide an autocomplete list for users. It does this through <option> elements that represent the available options. The drop-down list of options appears once users start typing into the <input> box.

Attributes (modifiers)
Global attributes

Code example

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Fieldset Tag

Grouping related items are what the HTML <fieldset> tag is used for. It draws a box around elements and provides the <legend> tag which can be used to provide a caption for the container.

Attributes (modifiers)
disabled | form | name + global attributes

Code example

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

Form Tag

<form> tag provides a convenient mechanism for creating form elements to supply interactive controls for user input. All these elements’ data (for example, <input>, <textarea>, <button>, <select> and so on) can subsequently be submitted to a web server in one swoop. 

Attributes (modifiers)
action | autocomplete | name | novalidate | accept-charset | enctype | method | target (_self | _blank | _parent | _top) + global attributes

Code example

<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

Input Tag

As is name implies, the <input> tag is used for capturing user input. These input fields are usually used within <form> elements. Attributes provided with the <input> tag allow the behavior and appearance of the element to be altered. The type attribute defaults to text, but it offers a range of other possibilities from button, checkbox, file, hidden, password, and so on. 

Attributes (modifiers)
accept | alt | auto-complete | autofocus | checked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width | webkitdirectory | global | spellcheck | selectionDirection + global attributes

Code example

<input type="text" value="Type here">

Label Tag

<label> supplies a label to a user-interface control element. The caption it provides improves user-friendliness and readability. <label> can be implemented in two ways. The element it serves as a caption can be placed within its opening and closing tag. In this case, the label serves the encapsulated object. On the other hand, its for attribute value is given a value similar to the input id of the element it is labeling. This second method no longer requires nesting of the labeled element within the <label> tags.

Attributes (modifiers)
for + global attributes

Code example

<label>Click me <input type="text"></label>

Legend Tag

<legend> provides a caption for parent tags such as <fieldset>, <details>, and <figure> elements. CSS properties can be used on the legend tag to affect its appearance.

Attributes (modifiers)
Global attributes

Code example

<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

Meter Tag

The <meter> tag is a new HTML5 element that is used to define scalar measurements in a well-defined range with fractional values. It is known as a gauge and finds use in things such as measuring the relevance of query results, disk usage, and amount raised during fundraisers.

Attributes (modifiers)
high | low | max | min | optimum | value | form + global attributes

Code example

<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>

Optgroup Tag

The <optgroup> tag is used within a <select> tag to group related <option> tags. The separate <optgroup> tags will be demarcated in the <select> dropdown list.

Attributes (modifiers)
disabled | label + global attributes

Code example

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

Option Tag

Creates options that can be selected in a <select> list. The defined <option> items don’t need to have attributes, but the value attribute is needed to indicate what is sent to the server. Apart from <select>, it can also be used as a child element of the <datalist> or <optgroup> tags.

Attributes (modifiers)
disabled | label | selected | value + global attributes

Code example

<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

Output Tag

<output> is a new HTML5 tag that shows the output of a calculation or the result of a user action, usually a user’s interaction with form elements. 

Attributes (modifiers)
form | for | name + global attributes

Code example

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result">60</output>
</form>

Progress Tag

<progress> provides a visual indicator showing the progress of a task. For effectiveness, it is often paired with client-side scripting, such as Javascript to relay the progress of a task while it is underway. However, it is not suitable for representing a gauge; this should be done with the <meter> tag.

Attributes (modifiers)
max | value + global attributes

Code example

<progress value="70" max="100">70 %</progress>

Select Tag

<select> is used to create a select list populated by <option> elements. The menu of options can be grouped accordingly with the <optgroup> tag.

Attributes (modifiers)
autofocus | size | disabled | form | multiple | name | required + global attributes

Code example

<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

Textarea Tag

It provides a multi-line input control as opposed to <input> which only provides a linear entry. Since it can hold an unlimited number of characters, it supplies developers with its col and row attributes to resize the text area. CSS can also be used to size the control element. You can specify the maxlength attribute to limit the maximum length of your textarea.

Attributes (modifiers)
autocomplete | autofocus | cols | disabled | dirname | form | name | readonly | required | rows | maxlength | minlength | placeholder | wrap | selectionDirection | selectionEnd | selectionStart | spellcheck + global attributes

Code example

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

Embed Tag

When you want to display external content on a web page, <embed> provides the container for the plug-in, multimedia content or  external application. New to HTML5 and requires only the starting tag, with src attribute giving the link to the content.

Attributes (modifiers)
height | src | type | width + global attributes

Code example

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

Iframe Tag

An inline frame, the <iframe> provides a nested browsing context. This essentially embeds another document inside the current HTML document. Each browsing context comes with its own session history and document separate from the parent document.

Attributes (modifiers)
allowfullscreen | src | name | sandbox | seamlesss | width | height | srcdoc | referrerpolicy + global attributes

Code example

<iframe src="http:www.example.com/iframe-example" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Img Tag

The <img> tag is used to embed images on web documents. Images are linked, but not actually inserted, using the src attribute which specifies the location of the image to be fetched. <image> also uses its alt attribute, which isn’t mandatory but necessary for accessibility and to provide an alternative text description in case the image cannot be loaded.

Attributes (modifiers)
alt | src | height | ismap | usemap | width | crossorigin | longdesc | referrerpolicy | sizes | srcset + global attributes

Code example

<img src="mdn-logo-sm.png" alt="MDN">

Object Tag

Multimedia content embedding in an HTML document is done with <object>. It allows you to embed content such as Flash files, audio, video, ActiveX, Java applets, PDF and even another web page inside the document. These external resources can be treated as objects to be handled by plugins, or a nested browsing context. The <param> tag is used to pass parameters to plugins.

Attributes (modifiers)
data | height | type | usemap | width | form | name | typemustmatch | usemap + global attributes

Code example

<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

Param Tag

<param> tag is used for plugin configurations of embedded objects, and is nested with the <object> tag. It can be used to define parameters of objects elements by providing the name and value of desired attributes such as autoplay (which could be set to on or off values), or controller (which determines whether the controls applicable to the object should be displayed).

Attributes (modifiers)
name | value + global attributes

Code example

<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

Source Tag

The <source> tag is nested inside the <audio> element. It enables the browser to select video and audio files, based on its media type or codec support from the available list of media resources provided by the <source> tags.

Attributes (modifiers)
media | src | type | sizes | srcset + global attributes

Code example

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
</video>

Area Tag

To add clickable areas to an image, use the <area> tag. <area> always has to be placed with a <map> tag. It maps a portion of the image to make it clickable for a user by providing the coordinates of the area. The coords attribute makes this possible, but it also has the href attribute which redirects the user to the specified link when they click on the image map.

Attributes (modifiers)
alt | coords | download | href | hreflang | media | rel | referrerpolicy | shape | target | type + global attributes

Code example

<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" /> 
  <area shape="default" nohref />
</map>

Audio Tag

The <audio> tag is used to embed audio files or music in an HTML document. It defines sound, music and audio streams by currently supporting three file formats: WAV, MPS, and OGG. Combined with the <source> tag, it provides a browser with the option to select the most compatible media resource.

Attributes (modifiers)
autoplay | buffered | preload | loop | controls | src | muted | played | volume + global attributes

Code example

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

Map Tag

To declare an image that can be clicked, use the <map> tag. In conjunction with the <area> tag, it provides a mechanism to produce mapped portions on a clickable image. In addition, <map> also requires the <img> tag to create an association with the image and the map.

Attributes (modifiers)
name + global attributes

Code example

<map name="example-map-1">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" />
</map>

Track Tag

As a child of audio and video media elements, <track> is used to specify text elements that should be visible while the media is playing such as captions, subtitles, chapters, descriptions and other metadata.

Attributes (modifiers)
default | kind | label | src | srclang + global attributes

Code example

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
</video>

Video Tag

<video> tag is used to enable videos in an HTML document by embedding a media player that supports video playback. <video> has attributes that specify how the media should be played, such as autoplay, loop, and preload. The src attribute provides a link to the path of the video, while type specifies the type of the video format.

Attributes (modifiers)
autoplay | controls | height | loop | poster | preload | src | width | buffered | crossorigin | muted | played + global attributes

Code example

<video src="videofile.webm" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.webm">download it</a>
  and watch it with your favorite video player!
</video>

Details Tag

<detail> element tag creates a kind of disclosure widget that enables information to be initially hidden but subsequently viewed or hidden on demand by the user. This interactive widget can be provided with a <summary> tag that supplies a heading the user can click to expand or collapse the details as needed. Information such as copyright or system requirements is used with the <details> tag.

Attributes (modifiers)
open + global attributes

Code example

<details><summary>Some details</summary><p>More info about the details.</p></details>

Dialog Tag

<dialog> provides an interactive component such as a dialog box or window. The popups and modal boxes it creates is used to provide feedback on an action taken by the user. <dialog> accepts a boolean attribute called open which signifies it is active, permitting users to interact with it. A note of caution though on implementing it on a web page: it has limited browser support, with Edge and Internet Explorer eschewing it. 

Attributes (modifiers)
open + global attributes

Code example

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Menu Tag

This tag is used for creating menus, toolbars, context menus, and generally specifying a list of commands a user can perform. However, <menu> has been removed from HTML5. It is currently only supported in Firefox, working only for context menus.

Attributes (modifiers)
label | type + global attributes

Code example

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr>
  <menuitem>Separated action</menuitem>
</menu>

Summary Tag

Used in conjunction with the <details> tag as its first child, the <summary> tag was introduced in HTML5 to provide a caption that summarizes the contents of the <detail> tag. The <summary> tag provides a heading that can be clicked upon to toggle between showing or hiding the <details> tag contents.

Attributes (modifiers)
Global attributes

Code example

<details><summary>Some details</summary><p>More info about the details.</p></details>

Canvas Tag

Introduced in HTML5, <canvas> tag supplies a container for graphics, enabling the rendering of visual images such as graphs, games graphics, data visualization, photo manipulation, concurrent video processing, and other animations in real-time. These on-the-fly graphics can be produced by scripting, usually with Javascript via the Canvas API, or conversely, the WebGL (Web Graphics Library). To make a drawing, the getContext(contextId) method has to be invoked. 

Attributes (modifiers)
height | width + global attributes

Code example

<canvas id="canvas" width="300" height="300">An alternative text describing what your canvas displays.</canvas>

Noscript Tag

In case a user has disabled Javascript, or the browser does not support scripting, the <noscript> tag provides an avenue to relay the inability to execute the scripts that come with the web page. The content nested within the opening and closing <noscript> tag is displayed instead. When placed with the <head> element of a page, it mustn’t contain <meta>, <style>, or <link> tags. 

Attributes (modifiers)
Global attributes

Code example

<noscript>
  <a href="/">External Link</a>
</noscript>

Script Tag

This tag enables executable code in the form of client-side scripting. <script> usually uses Javascript commands and program statements. The script tag contains programming that introduces interactivity into the application, handles form validation, and other dynamic changes on the web page.

Attributes (modifiers)
async | type | defer | src | charset | integrity | text | language | defer | crossorigin + global attributes

Code example

<script src="javascript.js"></script>

Global Attributes

Here below is a list of attributes supported by all HTML5 tags

AttributeDescriptionValues
accesskeySpecifies a keyboard shortcut to access an elementcharacter
classSpecifies a classname for an element (used to specify a class in a style sheet)classname
contenteditableSpecifies if the user is allowed to edit the content or nottrue | false
contextmenuSpecifies the context menu for an elementmenu_id
dirSpecifies the text direction for the content in an elementltr | rtl
draggableSpecifies whether or not a user is allowed to drag an elementtrue | false | auto
dropzoneSpecifies what happens when dragged items/data is dropped in the elementcopy | move | link
hiddenSpecifies that the element is not relevant. Hidden elements are not displayedhidden
idSpecifies a unique id for an elementid
langSpecifies a language code for the content in an element.language_code
spellcheckSpecifies if the element must have its spelling and grammar checkedtrue | false
styleSpecifies an inline style for an element style_definition
tabindexSpecifies the tab order of an elementnumber
titleSpecifies extra information about an elementtext

New Tags in HTML5

Here below is a list of the new elements introduced in HTML5.

TagDescription
< article >Specifies an article
< aside >Specifies content aside from the page content
< bdi >For bi-directional text formatting
< details > Specifies details of an element
< dialog > Specifies that part of an application is interactive.
< figcaption >Specifies caption for the figure element.
< figure >Specifies a group of media content, and their caption
< footer >Specifies a footer for a section or page
< header >Specifies a group of introductory or navigational aids, including hgroup elements
< main >Specifies the main content area of an HTML document.
< mark >Specifies marked text
< menuitem >Specifies a command that a user can invoke from a popup menu.
< meter >Specifies measurement within a predefined range
< nav >Specifies navigation links
< progress >Specifies progress of a task of any kind
< rp >Used for the benefit of browsers that don't support ruby annotations
< rt >Specifies the ruby text component of a ruby annotation.
< ruby >Specifies a ruby annotation (used in East Asian typography)
< section >Specifies a section
< summary >Specifies a summary / caption for the < details > element
< time >Specifies a date/time
< wbr >Specifies a line break opportunity for very long words and strings of text with no spaces.

Want to save this HTML cheat sheet to your computer? Click here to download it as a PDF file