\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{KenlandTan}
\pdfinfo{
  /Title (html-5.pdf)
  /Creator (Cheatography)
  /Author (KenlandTan)
  /Subject (HTML 5 Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{2919FF}
\definecolor{LightBackground}{HTML}{F1F0FF}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{HTML 5 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{KenlandTan} via \textcolor{DarkBackground}{\uline{cheatography.com/65144/cs/18572/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}KenlandTan \\
  \uline{cheatography.com/kenlandtan} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 9th February, 2019.\\
   Updated 17th January, 2019.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{{\bf{Document Outline}}}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}!DOCTYPE\textgreater{}}} & Version of (X)HTML \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{\textless{}html\textgreater{}}} & HTML document \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}head\textgreater{}}} & Page information \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{\textless{}body\textgreater{}}} & Page contents \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{\textless{}!-{}-   -{}-\textgreater{}}} & Comments \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.28 cm} x{4.72 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{{\bf{Page Information}}}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}base /\textgreater{}}} & Base URL \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{\textless{}meta /\textgreater{}}} & Meta data \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}title\textgreater{}}} & Title \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{\textless{}link /\textgreater{}}} & link to CSS \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{\textless{}style\textgreater{}}} & Insert CSS \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
{\bf{\textless{}script\textgreater{}}} & Insert JavaScript \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.72 cm} x{3.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{{\bf{Document Structure}}}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}h{[}1-6{]}\textgreater{}}} & Heading \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{-\textgreater{} h1 most important, h6 least important} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}div\textgreater{}}} & Page section \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{\textless{}span\textgreater{}}} & Inline section \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{\textless{}p\textgreater{}}} & Paragraph \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
{\bf{\textless{}br /\textgreater{}}} or {\bf{\textless{}br\textgreater{}}} & Line break \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
{\bf{\textless{}hr /\textgreater{}}} or {\bf{\textless{}hr\textgreater{}}} & Horizontal rule \tn 
% Row Count 7 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{{\bf{Anchors (link) }}}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}a href="URL"\textgreater{}}} & anchor (link) \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Absolute links - \seqsplit{"https://www.example.com"}  \{\{nl\}\}  Relative links - "example.html" \{\{nl\}\} Root-relative links - "/page"} \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}a href="mailto:"\textgreater{}}} & Email link \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
{\bf{\textless{}a href="tel:"\textgreater{}}} & Phone dial link \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{\textless{}a id="name"\textgreater{}}} & Anchor \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
{\bf{\textless{}a href="\#name"\textgreater{}}} & Link to anchor \tn 
% Row Count 9 (+ 1)
% Row 6
\SetRowColor{LightBackground}
{\bf{\textless{}a target="\_value"\textgreater{}}} & specifies link location \tn 
% Row Count 11 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\_blank - in a new window or tab     \{\{nl\}\}\_self - in the same window/tab (default)     \{\{nl\}\}\_parent - in the parent frame     \{\{nl\}\}\_top - in the full body of the window     \{\{nl\}\}framename - in a named frame} \tn 
% Row Count 16 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{\textless{}a title="title"\textgreater{}}}} \tn 
% Row Count 17 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{specifies extra information about an element that shown as a tooltip text when the mouse moves over the element.} \tn 
% Row Count 20 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{\textless{}a download\textgreater{}}} or  {\bf{\textless{}a download="name"\textgreater{}}}} \tn 
% Row Count 21 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Specifies that the target will be downloaded. The value of the attribute will be the name of the downloaded file. If the value is omitted, the original filename is used.} \tn 
% Row Count 25 (+ 4)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{\textless{}a hreflang="language\_code"\textgreater{}}}} \tn 
% Row Count 26 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Specifies the language of anchor linked} \tn 
% Row Count 27 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{\textless{}a rel="value"\textgreater{}}}} \tn 
% Row Count 28 (+ 1)
% Row 15
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{specifies relationship with current document} \tn 
% Row Count 29 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Favicon (shortcut icon)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /\textgreater{}}}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Include an icon in the title.} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{0.988 cm} x{3.496 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Uniform Resource Locators (URL)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Scheme}} & {\bf{Short for}} & {\bf{Used for}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
http & HyperText Transfer Protocol & Common web pages. Not encrypted \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
https & Secure HyperText Transfer Protocol & Secure web pages. Encrypted \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
ftp & File Transfer Protocol & Downloading or uploading files \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
file &  & A file on your computer \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.96 cm} x{3.04 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Form}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}{\bf{form}} {\emph{action}}="URL" \{\{nl\}\}{\emph{method}}="get | post"\textgreater{} & Form \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}{\bf{label}} {\emph{for}}="id"\textgreater{} & Label \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}input  /\textgreater{}}} & form input \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
attribute: {\bf{maxlength}} & maximum length of input \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
attribute: {\bf{name}} & name for input \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
attribute: {\bf{placeholder}} & placeholder for input \tn 
% Row Count 10 (+ 2)
% Row 6
\SetRowColor{LightBackground}
attribute: {\bf{type}}="text" & Text Input \tn 
% Row Count 12 (+ 2)
% Row 7
\SetRowColor{white}
attribute: {\bf{type}}="password" & Password Input \tn 
% Row Count 14 (+ 2)
% Row 8
\SetRowColor{LightBackground}
attribute: {\bf{type}}="hidden" & Hidden input \tn 
% Row Count 16 (+ 2)
% Row 9
\SetRowColor{white}
attribute: {\bf{type}}="date" & Date Input \tn 
% Row Count 18 (+ 2)
% Row 10
\SetRowColor{LightBackground}
attribute: {\bf{type}}="file" & File input \tn 
% Row Count 20 (+ 2)
% Row 11
\SetRowColor{white}
attribute: {\bf{type}}="submit" & Submit button \tn 
% Row Count 22 (+ 2)
% Row 12
\SetRowColor{LightBackground}
attribute: {\bf{type}}="image" src="URL" width=" " height=" " & Image submit button \tn 
% Row Count 25 (+ 3)
% Row 13
\SetRowColor{white}
attribute: {\bf{type}}="email" & Email input \tn 
% Row Count 27 (+ 2)
% Row 14
\SetRowColor{LightBackground}
attribute: {\bf{type}}="url" & URL input \tn 
% Row Count 29 (+ 2)
% Row 15
\SetRowColor{white}
attribute: {\bf{type}}="search" & Search input \tn 
% Row Count 31 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4.96 cm} x{3.04 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Form (cont)}}  \tn
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Radio button and Checkbox\{\{ac\}\}}}} \tn 
% Row Count 1 (+ 1)
% Row 17
\SetRowColor{white}
attribute: {\bf{type}}="radio" value=" " & Radio button \tn 
% Row Count 3 (+ 2)
% Row 18
\SetRowColor{LightBackground}
attribute: {\bf{type}}="checkbox" value=" " & Checkbox \tn 
% Row Count 5 (+ 2)
% Row 19
\SetRowColor{white}
attribute: {\bf{checked}}="checked" & pre-checked input \tn 
% Row Count 7 (+ 2)
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Drop Down List Box}}\{\{ac\}\}} \tn 
% Row Count 8 (+ 1)
% Row 21
\SetRowColor{white}
\textless{}{\bf{select}}\textgreater{} & Drop Down List Box \tn 
% Row Count 10 (+ 2)
% Row 22
\SetRowColor{LightBackground}
\textless{}{\bf{select}} {\emph{size}}="\#" {\emph{multiple}}="multiple"\textgreater{} & Multiple Select Box \tn 
% Row Count 12 (+ 2)
% Row 23
\SetRowColor{white}
\textless{}{\bf{option}} value=" "\textgreater{} & option for drop-down list \tn 
% Row Count 14 (+ 2)
% Row 24
\SetRowColor{LightBackground}
attribute: {\bf{required}}="required" & Form Validation \tn 
% Row Count 16 (+ 2)
% Row 25
\SetRowColor{white}
\textless{}{\bf{button}} {\emph{type}}="button"\textgreater{} & button \tn 
% Row Count 18 (+ 2)
% Row 26
\SetRowColor{LightBackground}
\textless{}{\bf{fieldset}}\textgreater{} & Grouping Form Elements \tn 
% Row Count 20 (+ 2)
% Row 27
\SetRowColor{white}
\textless{}{\bf{legend}}\textgreater{} & caption \tn 
% Row Count 21 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\textless{}meta\textgreater{} name Attribute}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{{\emph{\textless{}meta name="value"\textgreater{}}}}} \newline % Row Count 1 (+ 1)
\textless{}{\bf{meta}} {\emph{name}}="author" {\emph{content}}=" "\textgreater{} \newline % Row Count 2 (+ 1)
\textless{}{\bf{meta}} {\emph{name}}="description" {\emph{content}}=" "\textgreater{} \newline % Row Count 3 (+ 1)
\textless{}{\bf{meta}} {\emph{name}}="generator" {\emph{content}}=" "\textgreater{} \newline % Row Count 4 (+ 1)
\textless{}{\bf{meta}} {\emph{name}}="keywords" {\emph{content}}=" , , "\textgreater{} \newline % Row Count 5 (+ 1)
\textless{}{\bf{meta}} {\emph{name}}="viewport" {\emph{content}}=" "\textgreater{}% Row Count 6 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.96 cm} x{3.04 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Other Tags}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}{\bf{embed}} {\emph{type}}=" " {\emph{src}}=" "\textgreater{} & External application \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}{\bf{nav}}\textgreater{} & navigation section \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}{\bf{header}}\textgreater{} & Header section \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\textless{}{\bf{footer}}\textgreater{} & Footer section \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
attribute: {\bf{contenteditable}}="true" & Allow editable areas \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
attribute: {\bf{spellcheck}}="true" & Allow spell check areas \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.64 cm} x{5.36 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{{\bf{Lists}}}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}ol\textgreater{}}} & Ordered list \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{\textless{}ol}} {\emph{type}}="1|a|A|i|I"\textgreater{}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{1 ~Default value  Decimal numbers 1,2,3,4 \{\{nl\}\}a ~Alphabetically ordered (lowercase) a,b,c,d \{\{nl\}\}A ~Alphabetically ordered (uppercase) A,B,C,D \{\{nl\}\}i ~Roman Numerals (lowercase) i,ii,iii,iv \{\{nl\}\}I ~Roman Numerals (uppercase) I,II,III,IV} \tn 
% Row Count 8 (+ 6)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}{\bf{ol}} {\emph{start}}="number"\textgreater{}} \tn 
% Row Count 9 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Define the number the list will start with} \tn 
% Row Count 10 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}{\bf{li}} {\emph{value}}="number"\textgreater{}\textless{}/li\textgreater{}} \tn 
% Row Count 11 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Overwrite the number the list will display} \tn 
% Row Count 12 (+ 1)
% Row 7
\SetRowColor{white}
{\bf{\textless{}ul\textgreater{}}} & Unordered list \tn 
% Row Count 13 (+ 1)
% Row 8
\SetRowColor{LightBackground}
{\bf{\textless{}li\textgreater{}}} & List item \tn 
% Row Count 14 (+ 1)
% Row 9
\SetRowColor{white}
{\bf{\textless{}dl\textgreater{}}} & Definition list \tn 
% Row Count 15 (+ 1)
% Row 10
\SetRowColor{LightBackground}
{\bf{\textless{}dt\textgreater{}}} & Definition term \tn 
% Row Count 16 (+ 1)
% Row 11
\SetRowColor{white}
{\bf{\textless{}dd\textgreater{}}} & Term description \tn 
% Row Count 17 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Text Formatting}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/kenlandtan_1547710420_Capture.JPG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{5.04 cm} x{2.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Quotation and Citation Elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}q\textgreater{}}} & Short quotation \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{\textless{}blockquote \{\{nl\}\}cite="URL"\textgreater{}}} & Long quotation \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}abbr title=" "\textgreater{}}} & Abbreviation \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{\textless{}address\textgreater{}}} & Address \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{\textless{}cite\textgreater{}}} & Citation \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
{\bf{\textless{}bdo dir="value"\textgreater{}}}\{\{nl\}\}value = {\bf{rtl }}or {\bf{ltr}} & \seqsplit{Bi-directional} override \tn 
% Row Count 10 (+ 3)
% Row 6
\SetRowColor{LightBackground}
{\bf{\textless{}pre\textgreater{}}} & Preformatted text \tn 
% Row Count 12 (+ 2)
% Row 7
\SetRowColor{white}
{\bf{\textless{}dfn\textgreater{}}} & Defining a term \tn 
% Row Count 14 (+ 2)
% Row 8
\SetRowColor{LightBackground}
{\bf{\textless{}code\textgreater{}}} & Code \tn 
% Row Count 15 (+ 1)
% Row 9
\SetRowColor{white}
{\bf{\textless{}var\textgreater{}}} & Variable \tn 
% Row Count 16 (+ 1)
% Row 10
\SetRowColor{LightBackground}
{\bf{\textless{}kbd\textgreater{}}} & Keyboard input \tn 
% Row Count 17 (+ 1)
% Row 11
\SetRowColor{white}
{\bf{\textless{}samp\textgreater{}}} & Sample output \tn 
% Row Count 18 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.56 cm} x{3.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Tables}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}table\textgreater{}}} & Table \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{\textless{}caption\textgreater{}}} & Caption \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}thead\textgreater{}}} & Table header \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{\textless{}tbody\textgreater{}}} & Table body \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{\textless{}tfoot\textgreater{}}} & Table footer \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
{\bf{\textless{}colgroup\textgreater{}}} & Column group \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
{\bf{\textless{}col\textgreater{}}} & Column \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
{\bf{\textless{}tr\textgreater{}}} & Table row \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
{\bf{\textless{}th\textgreater{}}} & Header cell \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
{\bf{\textless{}td\textgreater{}}} & Table cell \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
{\bf{\textless{}td colspan="\#"\textgreater{}}} & Spanning column \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
{\bf{\textless{}td rowspan="\#"\textgreater{}}} & Spanning row \tn 
% Row Count 12 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Image Map}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}{\bf{img}} {\emph{src}}="URL" {\emph{usemap}}="\#shapes"\textgreater{} \newline % Row Count 1 (+ 1)
\textless{}{\bf{map}} {\emph{name}}="shapes"\textgreater{} \newline % Row Count 2 (+ 1)
   ~~~\textless{}{\bf{area}} {\emph{shape}}="polygon" {\emph{coords}}=" , , "\textgreater{} \newline % Row Count 4 (+ 2)
   ~~~\textless{}{\bf{area}} {\emph{shape}}="rectangle" {\emph{coords}}=", ,"\textgreater{} \newline % Row Count 6 (+ 2)
   ~~~\textless{}{\bf{area}} {\emph{shape}}="circle" {\emph{coords}}=" , , "\textgreater{} \newline % Row Count 8 (+ 2)
\textless{}{\bf{/map}}\textgreater{}% Row Count 9 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Images}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\textless{}img  /\textgreater{}}} & Image \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{\textless{}figure\textgreater{}}} & Contain images and caption \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{\textless{}figcaption\textgreater{}}} & caption of image \tn 
% Row Count 5 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Attribute of image: }} \newline {\bf{src}}="URL" {\bf{alt}}="..."  {\bf{title}}="..."   \newline {\bf{width}}="px"  {\bf{height}}="px"}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{1.672 cm} p{0.836 cm} x{5.092 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Common Character Entities}}  \tn
% Row 0
\SetRowColor{LightBackground}
\&\#34; & " & Quotation mark \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\&\#38; & \& & Ampersand \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\&\#60; & \textless{} & Less than \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\&\#62; & \textgreater{} & Greater than \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\&\#64; & @ & "At" symbol \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\&\#128; & € & Euro \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\&\#149; & • & Small bullet \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\&\#153; & ™ & Trademark \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\&\#163; & £ & Pound \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\&\#160; &  & Non-breaking space \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\&\#169; & © & Copyright symbol \tn 
% Row Count 11 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.92 cm} x{6.08 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Core Attributes}}  \tn
% Row 0
\SetRowColor{LightBackground}
class=" " & Indicates Class (non-unique) \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
id=" " & Indicates ID (unique) \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The only restrictions on the value of an id and class are: \newline - it must not contain any space characters \newline - it must contain at least one character \newline - It must begin with a letter, which may followed only by: \{\{nl\}\}~~~letters (A-Z/a-z), \{\{nl\}\}~~~hyphens ("-"), \{\{nl\}\}~~~colons (":"), \{\{nl\}\}~~~digits (0-9), \{\{nl\}\}~~~underscores ("\_"), \{\{nl\}\}~~~periods (".")}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{JavaScript}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}script src="URL"\textgreater{}\textless{}/script\textgreater{}}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Include JS} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}script src="URL" async\textgreater{} \textless{}/script\textgreater{}}}} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Once JS is fully downloaded, it will interrupt the HTML parsing in order to parse the Javascript file} \tn 
% Row Count 6 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}script src="URL" defer\textgreater{} \textless{}/script\textgreater{}}}} \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{HTML parsing will only be performed once the HTML is fully parsed.} \tn 
% Row Count 9 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}noscript\textgreater{} }}JavaScript disabled {\bf{\textless{}/noscript\textgreater{}}}} \tn 
% Row Count 10 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{The content of \textless{}noscript\textgreater{} is displayed whenever Javascript is disabled for the current page.} \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{7.12 cm} p{0.88 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Media Elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}{\bf{audio}} {\emph{controls}}\textgreater{} & Audio \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}{\bf{source}} {\emph{src}}=" " {\emph{type}}="audio/mpeg"\textgreater{}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\textless{}{\bf{video}} {\emph{width}}=" " {\emph{height}}=" " {\emph{controls}}\textgreater{} & Video \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}{\bf{source}} {\emph{src}}=" " {\emph{type}}="video/mp4"\textgreater{}} \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Browser will display the word between media tags when media is not supported.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\textless{}meta\textgreater{} http-equiv Attribute}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{{\emph{\textless{}meta http-equiv="content-type|default-style|refresh"\textgreater{}}}}} \newline % Row Count 2 (+ 2)
\textless{}meta \seqsplit{http-equiv="content-type"} content="text/html; charset=UTF-8"\textgreater{} \newline % Row Count 4 (+ 2)
\textless{}meta \seqsplit{http-equiv="default-style"} content="title of preferred stylesheet"\textgreater{} \newline % Row Count 6 (+ 2)
\textless{}meta http-equiv="refresh" content="300"\textgreater{}% Row Count 7 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}