Cheatography
https://cheatography.com
HTML commands cheat sheet
This is a draft cheat sheet. It is a work in progress and is not finished yet.
Document Outline
<!DOCTYPE html> |
Indicates that this page is an HTML5 page |
<html> ... </html> |
Root element of an HTML page |
manifest | lang |
<head> ... </head> |
Page information |
<body> ... </body> |
Page content |
The attributes (3rd column) should be between single or double quotes.
There are also global attributes present for almost every tag: accesskey | class | contenteditable | contextmenu | data-* | dir | draggable | hidden | id | lang | spellcheck | style | tabindex | title | translate
id must be unique within the HTML document
Page Information (inside <head>)
<base> .. </base> |
Base URL for all the page links |
href | target |
<meta> ... </meta> |
Meta data |
charset | content | http-equiv | name |
<title> ... </title> |
Title |
<link> ... </link> |
Resource link |
href | rel | media | hreflang | type | sizes |
<style> ... </style> |
Style definition |
media | type (default: CSS) | scoped |
<script> ... </script> |
Script definition (JavaScript) |
async | type | defer | src | charset |
Document Structure
<h[1-6]> ... </h[1-6]> |
Header 1 to 6 |
<div> ... </div> |
Page section |
<span> ... </span> |
Inline section |
<p> ... </p> |
Paragraph |
<br> |
Line break |
<hr> |
Thematic break |
<hgroup> ... </hgroup> |
Heading group |
<wbr> |
Possible line-break |
Text format
<i> ... </i> |
Italic text |
<b> ... </b> |
Bold text |
<strong> ... </strong> |
Strong text |
<em></em> |
Emphasized text |
<mark> .... </mark> |
Marked/Highlighted text |
<u> ... </u> |
Unarticulated annotation |
<del> ... </del> |
Deleted/Crossed-out text
|
cite | datetime |
<sub> ... </sub> |
Subscripted text |
<sup> ... </sup> |
Superscripted text |
<small> ... </small> |
Small text |
<ins> ... </ins> |
Inserted text |
cite | datetime
Usually displayed as underlines |
<pre> ... </pre> |
Preformatted text |
Tables
<table> ... </table> |
Table |
<thead> ... </thead> |
Table header |
<tbody> ... </tbody> |
Table body |
<tfoot> ... </tfoot> |
Table footer |
<tr> ... </tr> |
Table row |
<th> ... </th> |
Header cell |
colspan | rowspan | scope |
<td> ... </td> |
Table cell |
colspan | rowspan | headers |
<colgroup> ... </cogroupl> |
Groups of table columns |
span |
<col> |
Attributes for table columns |
span |
<caption> ... </caption> |
Table caption |
Embeded: images, video, audio, frame and object
<img alt="..." src="..."> |
Image |
height | ismap | usemap | width |
<map> ... </map> |
Image map |
name |
<area> ... </area> |
clickable area inside an image map |
alt | coords | href | hreflang | media | ping | rel | shape | target | type |
<svg> |
SVG graphics |
... |
<picture> ... </picture> |
Container for multiple images resources |
<video> ... </video> |
Video |
src | poster | autobuffer | autoplay | loop | controls | width | height |
<audio> ... </audio> |
Audio |
autobuffer | autoplay | controls | loop | src |
<source> ... </source> |
Source element for <picture>, <video> and <audio> |
media | src | type |
<track> |
External timed text tracks for <video> and <audio> |
kind [captions | chapters | descriptions | metadata | subtitles] | src | srclang | label | default |
<iframe> ... </iframe> |
inline sub window (frame) |
src | name | sandbox | seamless | width | height |
<embed> |
Container for an external application |
height | src | type | width |
<object> ... </object> |
Container for an external application |
data | height | type | usemap | width | object |
<param> |
Parameters of <object> |
name | value |
Better to use directly use <img>, <iframe>, <video> and <audio> instead of <embed> or <object>
|
|
Semantic elements
<header> ... </header> |
Header of a section or page |
<nav> ... </nav> |
Navigation links |
<section> ... </section> |
Section element |
cite |
<article> ... </article> |
Article |
<aside> ... </aside> |
Aside element |
<footer> ... </footer> |
Footer of a section or page |
<figure> ... </figure> |
Figure element |
<figcaption> ... </figcaption> |
Caption for <figure> element |
<details> ... </details> |
Details of an element
can be viewed or hidden |
open |
<main> ... </main> |
Main content of the document |
<summary> ... </summary> |
Visible heading for the <details> element |
<time> ... </time> |
Date/time |
datetime |
Organization of semantic elements
Lists
List type |
<ol> ... </ol> |
Ordered list |
start | reversed | type [1 | A | a | I | i] |
<ul> ... </ul> |
Unordered list |
<dl> ... </dl> |
Definition list |
List element |
<li> ... </li> |
List item |
value |
<dt> ... </dt> |
Definition term |
<dd> ... </dd> |
Definition description |
Forms
<form> ... </form> |
Form element |
method [get | post | put | delete] |
action | data | replace | accept | accept-charset | enctype | target |
<input> ... </input> |
Input field |
type [hidden | text | search | tel | url | email | password | datetime | date | month | week | time | datetime-local | number | range | color | checkbox | radio | file | submit | image | reset | button] |
Attributes are dependant upon input type
accept | autocomplete | autofocus | checked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | list | maxLength | max | min | multiple | name | pattern | placeholder | readOnly | required | size | step | value | alt | src | height | width |
<label> ... </label> |
Label for a form control |
for |
<textarea> ... </textarea> |
Text area |
autofocus | cols | disabled | form | name | readonly | required | rows | maxlength | placeholder | wrap |
<select> ... </select> |
Drop-down list |
autofocus | data | disabled | form | multiple | name |
<optgroup> ... </optgroup> |
Option group |
disabled | label |
<option> ... </option> |
Option in a drop-down list |
disabled | label | selected | value |
<legend> ... </legend> |
Fieldset title |
<output> ... </output> |
Result of a calculation |
for | form | name |
<fieldset> ... </fieldset> |
Fieldset |
disabled | form | name |
<button> ... </button> |
Button |
autofocus | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | name | type | value |
<datalist> ... </datalist> |
Dropdown list |
<template> ... </templat> |
Hidden content, whown upon action |
Quotations
<abbr> ... </abbr> |
Abbreviation or acronym |
<address> ... </address> |
Adress element |
<bdo> ... </bdo> |
Text direction |
dir [ltr | rtl] |
<blockquote> |
Long quotation |
cite |
<cite> ... </cite> |
Citation: title of a work |
<q> ... </q> |
Short quotation |
cite |
<dfn> ... </dfn> |
Definition term |
title |
Code
<code> ... </code> |
Defines programming code Does not preserve extra whitespace and line-breaks, except if inside <pre> |
<kbd> ... </kbd> |
Defines keyboard input |
<samp> ... </samp> |
Defines computer output |
<var> ... </var> |
Defines a variable |
Other
<--! ... --> |
Comment |
<a> ... </a> |
Hyperlink |
href | hreflang | media | ping | rel | target | type |
<progress> ... </progress> |
Progress of a task |
max | value |
<meter> ... </meter> |
Meter element: a gauge |
high | low | max | min | optimum | value |
<dialog> ... </dialog> |
Dialog |
Comments visible in source code
|
