Firefox Tomorrow

guide

HTML cheatsheet for syntax and common tasks

View on MDN ↗

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with extended HTML reference documentation as well as a deep instructional set of HTML guides. However, in many cases we just need some quick hints as we go. That’s the whole purpose of the cheat sheet, to give you some quick accurate ready to use code snippets for common usages.

[!NOTE] HTML tags must be used for their semantic value, not their appearance. It’s always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Inline elements

An “element” is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are “nested” inside larger ones. By default, “inline elements” appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row. All inline elements can be placed within the <body> element.

Inline elements: usage and examples
Usage Element Example
A link [``](/firefox/mdn/html/reference/elements/a/) 
<a href="https://example.org">
A link to example.org</a>.
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>An image</td>
  <td>[`<img>`](/firefox/mdn/html/reference/elements/img/)</td>
  <td id="img-example">
    <pre class="brush: html">&#x3C;img src="/firefox/mdn-assets/html/guides/cheatsheet/beast.png" width="50" /></pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>An inline container</td>
  <td>[`<span>`](/firefox/mdn/html/reference/elements/span/)</td>
  <td id="span-example">
    <pre class="brush: html">

Used to group elements: for example, to <span style=“color:blue”>style them</span>.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Emphasize text</td>
  <td>[`<em>`](/firefox/mdn/html/reference/elements/em/)</td>
  <td id="em-example">
    <pre class="brush: html">&#x3C;em>I'm posh&#x3C;/em>.</pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Italic text</td>
  <td>[`<i>`](/firefox/mdn/html/reference/elements/i/)</td>
  <td id="i-example">
    <pre class="brush: html">

Mark a phrase in <i>italics</i>.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Bold text</td>
  <td>[`<b>`](/firefox/mdn/html/reference/elements/b/)</td>
  <td id="b-example">
    <pre class="brush: html">Bold &#x3C;b>a word or phrase&#x3C;/b>.</pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Important text</td>
  <td>[`<strong>`](/firefox/mdn/html/reference/elements/strong/)</td>
  <td id="strong-example">
    <pre class="brush: html">&#x3C;strong>I'm important!&#x3C;/strong></pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Highlight text</td>
  <td>[`<mark>`](/firefox/mdn/html/reference/elements/mark/)</td>
  <td id="mark-example">
    <pre class="brush: html">&#x3C;mark>Notice me!&#x3C;/mark></pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Strikethrough text</td>
  <td>[`<s>`](/firefox/mdn/html/reference/elements/s/)</td>
  <td id="s-example">
    <pre class="brush: html">&#x3C;s>I'm irrelevant.&#x3C;/s></pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Subscript</td>
  <td>[`<sub>`](/firefox/mdn/html/reference/elements/sub/)</td>
  <td id="sub-example">
    <pre class="brush: html">H&#x3C;sub>2&#x3C;/sub>O</pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Small text</td>
  <td>[`<small>`](/firefox/mdn/html/reference/elements/small/)</td>
  <td id="small-example">
    <pre class="brush: html">

Used to represent the <small>small print </small>of a document.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Address</td>
  <td>[`<address>`](/firefox/mdn/html/reference/elements/address/)</td>
  <td id="address-example">
    <pre class="brush: html">

<address>Main street 67</address>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Textual citation</td>
  <td>[`<cite>`](/firefox/mdn/html/reference/elements/cite/)</td>
  <td id="cite-example">
    <pre class="brush: html">

For more monsters, see <cite>The Monster Book of Monsters</cite>.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Superscript</td>
  <td>[`<sup>`](/firefox/mdn/html/reference/elements/sup/)</td>
  <td id="sup-example">
    <pre class="brush: html">x&#x3C;sup>2&#x3C;/sup></pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Inline quotation</td>
  <td>[`<q>`](/firefox/mdn/html/reference/elements/q/)</td>
  <td id="q-example">
    <pre class="brush: html">&#x3C;q>Me?&#x3C;/q>, she said.</pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>A line break</td>
  <td>[`<br>`](/firefox/mdn/html/reference/elements/br/)</td>
  <td id="br-example">
    <pre class="brush: html">Line 1&#x3C;br />Line 2</pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>A possible line break</td>
  <td>[`<wbr>`](/firefox/mdn/html/reference/elements/wbr/)</td>
  <td id="wbr-example">
    <pre class="brush: html">

<div style=“width: 200px”> Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch. </div>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Date</td>
  <td>[`<time>`](/firefox/mdn/html/reference/elements/time/)</td>
  <td id="time-example">
    <pre class="brush: html">

Used to format the date. For example: <time datetime=“2020-05-24”> published on 23-05-2020</time>.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Code format</td>
  <td>[`<code>`](/firefox/mdn/html/reference/elements/code/)</td>
  <td id="code-example">
    <pre class="brush: html">

This text is in normal format, but <code>this text is in code format</code>.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Audio</td>
  <td>[`<audio>`](/firefox/mdn/html/reference/elements/audio/)</td>
  <td id="audio-example">
    <pre class="brush: html">

<audio controls> <source src=“/shared-assets/audio/t-rex-roar.mp3” type=“audio/mpeg” /> </audio>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Video</td>
  <td>[`<video>`](/firefox/mdn/html/reference/elements/video/)</td>
  <td id="video-example">
    <pre class="brush: html">

<video controls width=“250” src=“/shared-assets/videos/flower.webm” > <a href=“/shared-assets/videos/flower.webm”>Download WebM video</a> </video>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>

Block elements

“Block elements,” on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

[!NOTE] Because this cheat sheet is limited to a few elements representing specific structures or having special semantics, the div element is intentionally not included — because the div element doesn’t represent anything and doesn’t have any special semantics.

Usage Element Example
A simple paragraph [`

`](/firefox/mdn/html/reference/elements/p/)

 
<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>An extended quotation</td>
  <td>[`<blockquote>`](/firefox/mdn/html/reference/elements/blockquote/)</td>
  <td id="blockquote-example">
    <pre class="brush: html">

They said: <blockquote>The blockquote element indicates an extended quotation.</blockquote>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Additional information</td>
  <td>[`<details>`](/firefox/mdn/html/reference/elements/details/)</td>
  <td id="details-example">
    <pre class="brush: html">

<details> <summary>HTML Cheat Sheet</summary> <p>Inline elements</p> <p>Block elements</p> </details>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>An unordered list</td>
  <td>[`<ul>`](/firefox/mdn/html/reference/elements/ul/)</td>
  <td id="ul-example">
    <pre class="brush: html">&#x3C;ul>

<li>I’m an item</li> <li>I’m another item</li> </ul>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>An ordered list</td>
  <td>[`<ol>`](/firefox/mdn/html/reference/elements/ol/)</td>
  <td id="ol-example">
    <pre class="brush: html">&#x3C;ol>

<li>I’m the first item</li> <li>I’m the second item</li> </ol>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>A definition list</td>
  <td>[`<dl>`](/firefox/mdn/html/reference/elements/dl/)</td>
  <td id="dl-example">
    <pre class="brush: html">&#x3C;dl>

<dt>A Term</dt> <dd>Definition of a term</dd> <dt>Another Term</dt> <dd>Definition of another term</dd> </dl>

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>A horizontal rule</td>
  <td>[`<hr>`](/firefox/mdn/html/reference/elements/hr/)</td>
  <td id="hr-example">
    <pre class="brush: html">before&#x3C;hr />after</pre>
Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>
<tr>
  <td>Text Heading</td>
  <td>
    [`<&lt;h1&gt;-&lt;h6&gt;>`](/firefox/mdn/html/reference/elements/heading_elements/)
  </td>
  <td id="h1-h6-example">
    <pre class="brush: html">

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.
  </td>
</tr>