Cheat Sheet Philosophy

The basic idea of a cheat sheet is a small collection of examples of the common things. It is not intended to be comprehensive, but rather sufficient to remind you of stuff you've already learned. It is best to compile your own as you learn stuff, and then use it so as to verify that it is fit for purpose. Using other people's cheat sheets as yours is not the best thing. By all means read and learn from them, but transcribe what you learn into your own cheat sheets.

Comments that are not HTML begin with # and extend to the end of the line # like this.

Common Elements

<!DOCTYPE html>      # tell the browser this is HTML5 and the root element is <html>
<html>               # root element
<head>               # header, for metadata and non-content stuff
<meta charset='utf8'/> # tell the browser that what follows is UTF-8 encoded text (what is before is ASCII)
<title>Mr Bobbins' Webpage</title>
<link rel="stylesheet" href="styles1.css"/> # external stylesheet
<style>              # inline stylesheet -- put a proper CSS cheat sheet elsewhere
/* Comments are like this */
body {
  margin: 1rem;
  padding: 5vw;
  padding-top: 5vh;
  background-color: black;
}
p {
  color: #070;
}
</style>
<script src="hello.js"></script> # external script
<script>
console.log("hello world. Write a separate HTML DOM Javascript cheat sheet")
</script>
</head>
<body>
<header>Header goes here</header>
<div class='container' id='mrbobbins'>
<article>
<h1>Header</h1>
<h2>Subheader</h2>
<p>Paragraph</p>
</article>
<section class="yoyo">
<h3>Smaller header</h3>
<p><strong>bold should be strong not b</strong> and <em>emphasis not i for italic</em></p>
<p><code>code goes in here</code></p>
<div>Div's are general block-level containers for stuff.</div>
<div><span>Span's are general inline containers</span></div>
</section>
</div>
<footer>My page is copyright Mr Flibble 300002023</footer>
</body>
</html>

Inputs

Got this off Facebook:

Transcribed:

<input type="text"/>
<input type="password"/>
<input type="radio"/>
<input type="number"/>
<input type="image"/>
<input type="checkbox"/>
<input type="button"/>
<input type="color"/>
<input type="email"/>
<input type="file"/>
<input type="hidden"/>

Live Example

text:
password:
radio:
number:
image:
checkbox:
button:
color:
email:
file:
hidden: