HTML5 Cheatsheet

This site is a reference for HTML.

Last updated on 14 June, 2021 at 09:50:16 Optimized for

HTML is a markup language used for webpages; it is the original language for designing webpages and can be (and most often is) assisted by technologies such as CSS (Cascading Style Sheets) and Javascript. It was initially released in 1993.

Website logo
For the full experience we recommend viewing this website on a desktop or tablet.
OpSec OSINT Git Python Bash Linux CLI Package Management Regular Expressions Nano Vim HTML5 Markdown Bootstrap 4 JQuery Flask ASCII IP HTTP Port Numbers
Use the compass to jump to a specific section of the selected cheatsheet
# 

Basic

The most basic tags

These are the most essential tags.

Tag Description
<!DOCTYPE>

Defines the document type

<html>

Defines an HTML document

<head>

Contains metadata/information for the document

<title>

Defines a title for the document

<body>

Defines the document's body

<p>

Defines a paragraph

<h1> ... <h6>

Defines hiearchial headings; first heading should always be h1!

<br>

Inserts a single line break

<hr>

Horizontal ruler. Basically a horizontal border

<!--your text-->

This is how you make a comment

# 

Formatting

Formatting of text.

Semantic tags for defining the text-elements. Good to know.

Tag Description
<abbr>

Defines an abbreviation or an acronym

<address>

Defines contact information for the author/owner of a document/article

<b>

Defines bold text

<bdi>

Isolates a part of text that might be formatted in a different direction from other text outside it

<bdp>

Overrides the current text direction

<blockquote>

Defines a section that is quoted from another source

<cite>

Defines the title of a work

<code>

Defines a piece of computer code

<del>

Defines text that has been deleted from a document

<dfn>

Specifies a term that is going to be defined within the content

<em>

Defines emphasized text

<i>

Defines a part of text in italics

<ins>

Defines a text that has been inserted into a document

<kbd>

Defines keyboard input

<mark>

Defines marked/highlighted text

<meter>

Defines a scalar measurement within a known range (a gauge)

<pre>

Defines preformatted text

<progress>

Represents the progress of a task

<q>

Defines a short quotation

<rp>

Defines what to show in browsers that do not support ruby annotations (see ruby tag, for what ruby is)

<rt>

Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby>

Defines a ruby annotation. Ruby annotations are used for East Asian typography

<s>

Defines a strikethrough text; used for marking something that is no longer correct

<samp>

Defines sample output from a computer program

<small>

Defines smaller-sized text for e.g. form-names laid above an input field

<strong>

Defines important text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<template>

Defines a container for content that should be hidden when the page loads

<time>

Defines a specific time (or datetime)

<u>

Defines some text that is unarticulated and styled differently from normal text

<var>

Defines a variable

<wbr>

Defines a possible line-break

# 

Forms and Input

Form and Input tags

These elements are crucial in HTML

Tag Description
<form>

Defines an HTML form for user input

<input>

Defines an input control

<textarea>

Defines a multiline input control (text area)

<button>

Defines a clickable button

<select>

Defines a drop-down list

<optgroup>

Defines a group of related options in a drop-down list

<option>

Defines an option in a drop-down list

<label>

Defines a label for an <input> element

<fieldset>

Groups related elements in a form

<legend>

Defines a caption for a <fieldset> element

<datalist>

Specifies a list of pre-defined options for input controls

<output>

Defines the result of a calculation

# 

Frames

How to Embed iFrame in HTML

Artefact from previous HTML standards. Lets you embed a webpage inside another webpage.

Tag Description
<iframe>

Defines an inline frame

# 

Images

Handling Graphics with HTML

This is more than mere images - some of these tags are very powerful and useful

Tag Description
<img>

Defines an image

<map>

Defines a client-side image map

<area>

Defines an area inside an image map

<canvas>

Used to draw graphics, on the fly, via scripting (usually JavaScript)

<figcaption>

Defines a caption for a >figure< element

<figure>

Specifies self-contained content

<picture>

Defines a container for multiple image resources

<svg>

Defines a container for SVG graphics

# 

Audio/Video

Media in HTML

Properly very niche

Tag Description
<audio>

Defines sound content

<source>

Defines multiple media resources for media elements (<video>, <audio> and <picture>)

<video>

Defines a video or movie

<track>

Defines text tracks for media elements (<video> and <audio>)

# 

How to make hyperlinks in HTML

Crucial part of HTML is linking pages

Tag Description
<a>

Defines a hyperlink

<link>

Defines the relationship between a document and an external resource (most used to link to style sheets)

<nav>

Defines navigation links

# 

List

How to use lists in HTML

Very essential aspect of HTML is the use of ordered and unordered lists. In many CSS frameworks lists are used for menus.

Tag Description
<ul>

Defines an unordered list. You use <li> elements inside

<ol>

Defines an ordered list. You use <li> elements inside

<li>

Defines a list item. Must be encapsulated by <ul> or <ol> tags

<dl>

Defines a description list

<dt>

Defines a term/name in a description list

<dd>

Defines a description of a term/name in a description list

# 

Tables

How to make tables in HTML

Tag Description
<table>

Defines a table

<caption>

Defines a table caption

<th>

Defines a header cell in a table

<tr>

Defines a row in a table

<td>

Defines a cell in a table

<thead>

Groups the header content in a table

<tbody>

Groups the body content in a table

<tfoot>

Groups the footer content in a table

<col>

Specifies column properties for each column within a <colgroup> element

<colgroup>

Specifies a group of one or more columns in a table for formatting

# 

Styles and Semantics

Semantics of HTML

Not so important as it used to be; grasping the essential structure however is beneficient.

Tag Description
<style>

Defines style information for a document

<div>

Defines a section in a document. Used as a de-facto container for any type of content by adding CSS class names to the tag and encapsulating other elements

<span>

Defines an inline-section in a document

<header>

Defines a header for a document or section

<footer>

Defines a footer for a document or section

<main>

Specifies the main content of a document

<section>

Defines a section in a document

<article>

Defines an article

<aside>

Defines content aside from the page content

<details>

Defines additional details that the user can view or hide

<dialog>

Defines a dialog box or window

<summary>

Defines a visible heading for a <details> element

<data>

Adds a machine-readable translation of a given content

# 

Meta Info

Meta Tags and Information in HTML

Tag Description
<head>

Defines information about the document

<meta>

Defines metadata about an HTML document

<base>

Specifies the base URL/target for all relative URLs in a document

# 

Programming

The us of Objects and Scripts for Programming in HTML

Tag Description
<script>

Defines a client-side script

<noscript>

Defines an alternate content for users that do not support client-side scripts

<embed>

Defines a container for an external (non-HTML) application

<object>

Defines an embedded object

<param>

Defines a parameter for an object

Online Resources & Books

World Wide Web

The first website ever. Published in Aug. 1991 by Tim Berners-Lee; this is what the Internet looked like at the beginning

Incredible 😎