HTML Cheatsheet
In rough order of how much we use them:
Text
Paragraph
<p>Hello</p>→
Hello
Headers
<h1>Hello</h1>→
Hello
<h2>Hello</h2>→
Hello
<h3>Hello</h3>→
Hello
<h4>Hello</h4>→
Hello
<h5>Hello</h5>→
Hello
<h6>Hello</h6>→
Hello
Span
Spans can go inside other text tags.
<p>Hello <span>World</span></p>→
Hello World
Divs
Divs are rectangles which can contain other elements:
<div>
<p>Hello</p>
<div>
<p>World</p>
</div>
</div>→
Hello
World
Images
<img> tags can be used to load .jpg, .png, .svg files
<img src="/static/dog.jpg" /> →
Links
Absolute
<a href="/">Link Text Goes Here</a>Relative
<a href="anotherPageDeeper">Link Text Goes Here</a>Another webpage
<a href="https://google.com">Google</a>→ Google
Starting a HTML page
<html>
<head>
<title>website title</title>
</head>
<body>
<p>Website goes here!</p>
</body>
</html>Inputs
<input />→
<input type="password"/>→
<input type="checkbox" />→
<input type="submit" />→
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
/>
<label for="contactChoice1">Email</label>
<input
type="radio"
id="contactChoice2"
name="contact"
value="phone"
/>
<label for="contactChoice2">Phone</label>
<input
type="radio"
id="contactChoice3"
name="contact"
value="mail"
/>
<label for="contactChoice3">Mail</label>→
Select
<select>
<option value="">Please choose an option</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
</select>→
Script
<script src="javascript.js"></script>
<script>
console.log('Hello World')
</script><link>
<head>
<link href="main.css" rel="stylesheet">
</head>
