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" />

    →    

Absolute

<a href="/">Link Text Goes Here</a>

    →     Link Text Goes Here

Relative

<a href="anotherPageDeeper">Link Text Goes Here</a>

    →     Link Text Goes Here

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>
<head>
  <link href="main.css" rel="stylesheet">
</head>