Logo of the site

My cheatsheet

HTML cheatsheet

This is a quick reference cheat sheet for understanding and writing JSON format configuration files.

# HTML Document Structure

DOCTYPE Declaration

This declaration is an instruction and must be the first line of an HTML document. It specifies the document type and version of HTML being used. In modern usage, <!DOCTYPE html> indicates HTML5.

<!DOCTYPE html>
<html>
...
</html>

Semantic document Structure

  • <html></html> The root element, indicating that the content is HTML.
  • <head></head> Contains metadata about the page (e.g., scripts, styles, and other information not directly displayed).
  • <title></title> Defines the title shown in the browser's tab; must reside inside <head>.
  • <body></body> Contains the main content of the page.
  • <header></header> Designates the introductory content or navigational links for a page.
  • <nav></nav> Encapsulates a block of navigation links, such as menus or a table of contents.
  • <main></main> Contains the dominant content of a page, excluding repeated elements like headers, footers, or navigation.
  • <section></section> Defines a thematic grouping of content, typically with an associated heading. Use this element for semantically meaningful sections, and use <div> for generic containers.
  • <article></article> Represents a self-contained piece of content, like a blog post or news article, that makes sense on its own.
  • <footer></footer> Holds footer information, such as contact details, copyright notices, or site maps.

Semantic HTML

<head> Tag Contents

The <head> element contains metadata and resource links that configure your HTML document. It typically includes information that is not directly displayed on the page but is essential for setting up the page’s environment. 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="script.js"></script>
</head>
  • <meta charset> Defines the character encoding, typically set to UTF-8.
  • <meta name="viewport"> Configures the viewport for responsive design on mobile devices.
  • <title> Specifies the title that appears on the browser tab.
  • <link rel="stylesheet"> Links to an external CSS file for styling the document.
  • <link rel="icon"> Specifies the favicon icon shown in the browser tab.
  • <script> Includes or references a JavaScript file to add interactive functionality.
  • <meta name="description"> Provides a short summary of the page's content for SEO and social sharing.
  • <meta name="keywords"> Lists relevant keywords related to the page (less critical for modern SEO).
  • <meta name="author"> Identifies the author of the document.

# Element Tags

Relative Path

A relative path specifies the location of a resource relative to the current file's location.

Relative path starts with a dot followed by a slash (./), 

project-folder/
├── index.html
├── about.html
└── assets/
└── images/
     └── logo.png
<a href="./contact.html">Contact</a>

Absolute Path within a Project

An absolute path specifies the location of a resource starting from the root of the website

Absolute path starts with a slash (/), which indicates that it is an absolute reference from the root directory of the website (or project).

project-folder/
├── index.html
├── about.html
└── assets/
└── images/
     └── logo.png
<img src="/assets/images/logo.png" alt="Project Logo">

<img>

<img src="path_to_file" alt="A field of yellow sunflowers" />
  • src Specifies the path to the image file (e.g., a URL or relative path).
  • alt Provides a textual description of the image. This description is used as fallback content if the image fails to load, by screen readers for accessibility, and for SEO purposes. If the image is decorative, the alt attribute should be empty.

<figure>

Encapsulates media such as images, illustrations, diagrams, or code snippets that are referenced in the main document flow.

<figure>
<img src="overwatch.jpg" alt="An image from Overwatch" />
</figure>

Semantic HTML

<figcaption>

Provides a caption for media contained within a <figure>. It is placed inside the <figure> so that the caption moves with the media if the layout changes.

<figure>
<img src="overwatch.jpg" alt="An image from Overwatch" />
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

Semantic HTML

<audio>

Embeds audio content into a document

<audio controls>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>
  • src Specifies the URL of the audio file.
  • controls Displays built-in audio controls (e.g., play, pause, volume).
  • <source> Used within the <audio> element to define multiple file formats.

Semantic HTML

<video>

Embeds video content. It supports various attributes to control playback

<video src="coding.mp4" controls>
Video not supported
</video>
  • src Specifies the URL of the video file.
  • controls Displays video controls such as play/pause, volume, and fullscreen options.
  • autoplay Automatically starts video playback when the page loads.
  • loop Repeats the video continuously.

Semantic HTML

In-Page Links & Title Attribute

An element can be assigned an id to allow in-page navigation. Clicking a link with a hash (#) will scroll the page to the element with the corresponding id.

<p id="top">This is the top of the page!</p>
<a href="#top">Top</a>

The title attribute provides additional context or advisory text for elements—often displayed as a tooltip when the user hovers over the element.

<a href="https://www.codecademy.com" title="Codecademy is an online learning platform">Codecademy</a> is the best place to learn to code!

<aside>

Marks additional information that enhances the main content. It is useful for content such as bibliographies, endnotes, comments, pull quotes, editorial sidebars, or any supplementary information.

<article>
<p>The first World Series was played between Pittsburgh and Boston in 1903.</p>
</article>
<aside>
<p>Babe Ruth once stated, “Heroes get remembered, but legends never die.”</p>
</aside>

Semantic HTML

<table>

  • <table> Initializes the table structure.
  • <tr> Defines a table row.
  • <th> Specifies a header cell. The scope attribute indicates whether the header applies to a row (row) or a column (col).
  • <td> Represents a standard data cell in the table. 
<table>
<tr>
<th></th>         <!-- Empty for column alignment -->
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>

colspan

Span across multiple columns

<td colspan="2">Out of Town</td>

rowspan

Span across multiple rows

<tr rowspan="2">Out of Town</td>

Semantic table

  • <thead> Contains the header rows of the table.
  • <tbody> Encapsulates the main data rows.
  • <tfoot> Contains footer content, such as sums or summaries. 
<table>
<thead>
<tr>
  <th></th>
  <th scope="col">Saturday</th>
  <th scope="col">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">Morning</th>
  <td rowspan="2">Work</td>
  <td rowspan="3">Relax</td>
</tr>
<tr>
  <th scope="row">Afternoon</th>
</tr>
<tr>
  <th scope="row">Evening</th>
  <td>Dinner</td>
</tr>
</tbody>
<tfoot>
<tr>
  <td colspan="3">Totals and other data can be placed here.</td>
</tr>
</tfoot>
</table>

# Form Input Elements

<form>

The <form> element collects user input and sends it to a server. Its key attributes are defined below:

<form action="/example.html" method="POST">
...
</form>
  • action Specifies the URL where the form data will be sent.
  • method Specifies the HTTP method (e.g., POST, GET) to use when submitting the form.

<input>

The <input> element is a self-closing tag used to create interactive controls for forms

<input type="text" name="first-text-field" value="already pre-filled" />
  • Type Determines the kind of input field rendered (e.g., text, password, number, range, checkbox, radio). The default is "text."
  • name Specifies the key for the data to be sent when the form is submitted.
  • value Sets a default value for the input field.
  • step For numeric input types, defines the legal number intervals.

Default value

Assign a default value to an input field using the value attribute. This pre-fills the field when the form is first rendered.

<form action="/example.html" method="POST">
  <input type="text" name="first-text-field" value="already pre-filled">
</form>

If a user submits the form with a custom string like important details, the following data will be sent:

first-text-field=important details

The value sent is based on the name attribute ("first-text-field") and the user’s input ("important details").

<label>

The <label> element defines a caption for an <input> element. To associate a label with an input, the input must have an id and the label’s for attribute must match that id.

<label for="meal">What do you want to eat?</label>
<input type="text" name="food" id="meal" />

Input type: Text

The <input type="text"> element creates a single-line text field where users can enter plain text.

<input type="text" name="first-text-field">

<input> type

Input type: Password

The <input type="password"> element creates a text field where the input characters are masked (e.g., shown as asterisks * or dots •).

<form>
  <label for="user-password">Password: </label>
  <input type="password" id="user-password" name="user-password">
</form>

This type is typically used for sensitive information like login passwords.

<input> type

Input type: Number

The <input type="number"> element restricts input to numbers (and a few special characters like -, +, and .).

<form>
  <label for="years">Years of experience: </label>
  <input id="years" name="years" type="number" step="1">
</form>

The step attribute adds arrows to the field that increment or decrement the value by the specified amount.

<input> type

Input type: Range

The <input type="range"> element creates a slider control that lets users select a numeric value within a specified range.

<form>
  <label for="volume">Volume Control</label>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>

The min and max attributes define the range of selectable values, while the step attribute controls how much each movement of the slider adjusts the value.

<input> type

Input type: Checkbox

The <input type="checkbox"> element allows users to select one or multiple options from a set of choices.

<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
</form>

Each checkbox works independently, and multiple boxes can be selected at the same time.

<input> type

Input type: Radio Buttons

Radio buttons allow users to select one option from a set of choices. Each radio input should share the same name attribute for grouping.

<form>
<p>What is the sum of 1 + 1?</p>
<input type="radio" id="two" name="answer" value="2" />
<label for="two">2</label>
<br />
<input type="radio" id="eleven" name="answer" value="11" />
<label for="eleven">11</label>
</form>

<input> type

Input type: Submit Button

The <input type="submit"> element creates a button that submits the form data to the server.

<form action="/example.html" method="POST">
<input type="submit" value="Send" />
</form>

<input> type

<select>

The <select> element creates a dropdown list, and is populated with <option> elements. It is used to choose one value among many.

<form>
<label for="lunch">What's for lunch?</label>
<select id="lunch" name="lunch">
<option value="pizza">Pizza</option>
<option value="curry">Curry</option>
<option value="salad">Salad</option>
<option value="ramen">Ramen</option>
<option value="tacos">Tacos</option>
</select>
</form>

If a user selects Pizza, the data sent will be "lunch=pizza."

<datalist>

The <datalist> element provides a list of predefined options to suggest to the user as they input data. It is used with an input element's list attribute.

<form>
<label for="city">Ideal city to visit?</label>
<input type="text" list="cities" id="city" name="city" />
<datalist id="cities">
<option value="New York City"></option>
<option value="Tokyo"></option>
<option value="Barcelona"></option>
<option value="Mexico City"></option>
<option value="Melbourne"></option>
<option value="Other"></option>
</datalist>
</form>

<textarea>

The <textarea> element creates a multi-line text input field. It supports attributes such as rows and cols to define its visible size, and can contain default text.

<form>
<label for="blog">New Blog Post:</label>
<br />
<textarea id="blog" name="blog" rows="5" cols="30">
Default text
</textarea>
</form>

Input attributes: validation

MDN documentation

  • required Specifies that the field must be filled before the form can be submitted.
  • minlength Sets the minimum number of characters required for the input.
  • maxlength Sets the maximum number of characters allowed in the input.
  • pattern Specifies a regular expression that the input's value must match for validation.

Required, text length restrictions and pattern matching.

<form action="/example.html" method="POST">
<label for="username">Username:</label>
<br>
<input id="username" name="username" type="text" minlength="3" maxlength="15"
     pattern="^[A-Za-z0-9_]+$" required>
<br>
<input type="submit" value="Register">
</form>

<input> attributes

Client-side Validation

Client-side validation is performed directly in the user's browser. It provides instant feedback but cannot be fully trusted because it can be bypassed.

Purpose

Improve the user experience by catching errors before the form is submitted.

How

Use vanilla JavaScript, simple libraries like just-validate, or framework-specific libraries like formik for React.

Limitations

Users can disable JavaScript or manipulate the front-end, so client-side validation alone is not secure.

Server-side Validation

Server-side validation happens on the server after data is submitted. It is critical for security and database integrity.

Purpose

Protect the server and database from invalid, malicious, or manipulated input data.

Advantages

  • Runs on more powerful machines.
  • Keeps validation logic hidden from users.
  • Validates data against server-side information (e.g., database records).

Methods

Asynchronous validation: Checks parts of data before submission, offering live feedback (but slower).

Post-submission validation: Validates after form submission and includes sanitization for consistent database entries.

Important: The server-side validation should be implemented even if client-side checks exist.

# Font Awesome

Overview

Font Awesome is a popular icon library used to visually convey actions and information. Icons are implemented as CSS classes, making them easy to style and resize.

Adding an Icon

Font Awesome icons are added using an <i> tag with two required classes: the base fa class and an icon-specific class (e.g. fa-save). 

<i class="fa fa-save"></i>

In this example, the fa-save class displays the floppy disk icon commonly associated with saving.

Icon Sizing

Icon sizes can be adjusted with additional classes: 

<i class="fa fa-camera fa-lg"></i>
<i class="fa fa-cab fa-4x"></i>
  • fa-lg Increases the icon size by 33%.
  • fa-2x Doubles the icon size.
  • fa-3x Triples the icon size.
  • fa-4x Quadruples the icon size.
  • fa-5x Quintuples the icon size.