HTML cheatsheet

23 Feb, 2025

Emphasis

Inline formatting rules: bold is strong, italics is em, ~~strikethrough is del~~, and mark is mark.

Bear Blog®© is a Good Blog™ that took ±3 years to perfect. Thank you Herman!

I drink H₂O at the 6^th and 12^th hours of the day.

Headers

Big header is h1

Medium header is h2

Small header is h3

Tiny header is h4

I use only h1 as title, and h3 as subtitle.

Linebreaks

Adding a single line break will not be rendered as a line break.

To add a single
line break use
the <br> tag.

Use another paragraph,

starts a new paragraph with bigger vertical gap and identation.

Displaying code

In-line code snippet var example = "hello!"; ffx0 made using code tags.

Multi-line code made using codeblock class and pre tag (remember to delete space before the div tags and use it outside paragraphs):

      var example = "hello!";
        alert(example);

Longer codeblock without identation at beginning:

var example = "Supercalifragilistichespiralidoso! Anche se a sentirlo può sembrare un po' curioso. Se lo dici forte avrai un successo strepitoso.";
  alert(example);
  ffx0

Random symbols: àèéìòù Æ æ ()[]{}!?"€$%&/=~'`°@*^|\<>.:,;+-_↗

Random symbols: àèéìòù Æ æ ()[]{}!?"€$%&/=~'`°@*^|\<>.:,;+-_↗
# Here an example if the space before <div> isn't removed. Look the space at the bottom!

Inside codeblocks don't use tabs, prefer spaces because in vscode tabs are set to be 2 spaces but in browser they are 4.

Quotes

blockquotes are placed outside p tags.

"This is a quote. It can became really long and go newline by itself. Like this line. Look at it.
To make it just use the blockquote tag.
You can go to new line with br tag. It can span multiple lines! Usually a second line is used for
~Author"

Images

Images are placed with img tag outside paragraph.

Lists

Lists are always outside paragraphs.

Generic list item;
Generic list item;
Generic list item;

Numbered list item;
Numbered list item;
Numbered list item;

Links

Links that go outside my domain are automatically styled with and arrow. Always set them up with target=_blank.

Open in same tab.

Open in new tab.

Internal link to index page.

Subtitles link needs and #id.

download me using download attribute.

Footnotes

Here's a simple footnote, ¹ and here's a longer one. ²

Tables

Column 1	Column 2	Column 3
John	Doe	Male
Mary	Smith	Female

This is a log paragraph that I will show How to break with horizontal rules hr. Actually, I have to make it a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the first footnote.↩
Here's another one↩