HTML Cheatsheet

Last Updated: 2024-01-22

HTML Skeleton

<!doctype html>
<html>
  <head>
    <title>The Title</title>
  </head>

  <body>
    The content
  </body>
</html>

Tags

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

<p>paragraph</p>
<pre>preformated</pre>
<code>code</code>
<b>bold</b>
<i>italic</i>
<strong>strong</strong>
<em>emphasized</em>
<mark>marked</mark>
<small>smaller</small>
<del>sdleted</del>
<ins>inserted</ins>
<sub>subscript</sub>
<sup>superscript</sup>

<q>quotes</q>
<blockquote cite="https://...">quote</blockquote>

<abbr title="Read The Fucking Manual">RTFM</abbr>

<!-- Horizontal Rules -->
<hr />

<!-- Line Breaks -->
<br />

<!--comments -->

Ruby Characters

https://en.wikipedia.org/wiki/Ruby_character

<ruby> 饭 <rp>(</rp><rt>fàn</rt><rp>)</rp> </ruby>

<rt> is used to specify the ruby text.
<rp> is for fallback parentheses for browsers that do not support display of ruby annotations.

The result is:

Link

Each <a> element must contain text or an IMG with an ALT attribute.

Open Link in New Tab

<a href="..." target="_blank">...</a>

Table

<table>
  <caption>
    CAPTION
  </caption>
  <thead>
    <tr>
      <th>Header1</th>
      <th colspan="2">Header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>&nbsp;</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tfoot>
</table>

Entities

Entity: &entity_name; or &#entity_number;

< (less than) = < or <
> (greather than) = >
non-breaking space:  . If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the character entity.
The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.
€ for €
& ampersand: & or &

Unicode

Hex: ᛒ for ᛒ
Decimal: € for €

DOM

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The DOM can be accessed by window.document, e.g. window.document.getElementById("header");

Lang

Use the lang attribute to identify the language of the page.

<html lang="en"></html>