HTML Cheatsheet

I’m going to augment the old CSS book with a few chapters on HTML. That could legitimately allow that book to be called a “beginner” book, rather than an intermediate-level book, and reach more people 🙂

HTML is a simple computer language that’s used for two purposes: to make the text look a certain way, and to add a little extra meaning and structure to the text.

Over the years, its formatting features have been reduced and limited, and, it’s structural markup has been improved.

Formatting is largely performed by CSS, a different computer language that, in tandem with HTML, performs most of the formatting we see on contemporary web pages.

At one time, people thought that CSS would take over all the formatting roles, but it hasn’t, and I don’t think it ever will. There’s often a need for minimal amounts of markup, to indicate boldface and italics and underlining.

To that end, here’s an HTML cheat sheet. I learned HTML with something like this.

<!-- this is a comment -->

<b>bold</b>
<strong>strong</strong>

<i>italic</i>
<em>emphasis</em>

<u>underline</u>
<ins datetime="2018-06-04T22:21:06+00:00">Inserted text is underlined or highlighted</ins>

<del datetime="2018-06-04T22:21:06+00:00">Deleted text appears struck-through</del>

<a href="http://example.com">A link</a>

<h1>Heading 1</h1>
<h6>Heading 6</h6> <!-- and all the levels before it -->

<p>Paragraph</p>
<p>
  A line break<br />
  A second line
</p>
<div>A block of HTML</div>
<span>A block of inline HTML</span>

<ul><!-- unordered list -->
  <li>List item</li>
  <li>List item</li>
</ul>

<ol><!-- ordered list -->
  <li>List item</li>
  <li>List item</li>
</ol>

And here’s the output:

bold
strong

italic
emphasis

underline
Inserted text is underlined or highlighted

Deleted text appears struck-through

A link

Heading 1

Heading 6

Paragraph

A line break
A second line

A block of HTML

A block of inline HTML

  • List item
  • List item

  1. List item
  2. List item