\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{Manon Gerrd (manongerard)}
\pdfinfo{
  /Title (html.pdf)
  /Creator (Cheatography)
  /Author (Manon Gerrd (manongerard))
  /Subject (HTML 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}{89D0FE}
\definecolor{LightBackground}{HTML}{F0F9FE}
\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 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Manon Gerrd (manongerard)} via \textcolor{DarkBackground}{\uline{cheatography.com/195339/cs/40912/}}}
\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}Manon Gerrd (manongerard) \\
  \uline{cheatography.com/manongerard} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 30th October, 2023.\\
   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{1.9 cm} x{4.104 cm} x{1.596 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Document Outline}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}!DOCTYPE html\textgreater{} & Indicates that this page is an HTML5 page &  \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}html\textgreater{} ... \textless{}/html\textgreater{} & Root element of an HTML page & \seqsplit{manifest} | lang \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}head\textgreater{} ... \textless{}/head\textgreater{} & Page information &  \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}body\textgreater{} ... \textless{}/body\textgreater{} & Page content &  \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{The attributes (3rd column) should be between single or double quotes.\{\{nl\}\}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\{\{nl\}\}id must be unique within the HTML document}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.824 cm} x{2.508 cm} x{3.268 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Page Information (inside \textless{}head\textgreater{})}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}base\textgreater{} .. \textless{}/base\textgreater{} & Base URL for all the page links & href | target \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}meta\textgreater{} ... \textless{}/meta\textgreater{} & Meta data & charset | content | http-equiv | name \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}title\textgreater{} ... \textless{}/title\textgreater{} & Title &  \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
\textless{}link\textgreater{} ... \textless{}/link\textgreater{} & Resource link & href | rel | media | hreflang | type | sizes \tn 
% Row Count 12 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\textless{}style\textgreater{} ... \textless{}/style\textgreater{} & Style definition & media | type (default: CSS) | scoped \tn 
% Row Count 15 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}script\textgreater{} ... \textless{}/script\textgreater{} & Script definition (JavaScript) & async | type | defer | src | charset \tn 
% Row Count 18 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.32 cm} x{3.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Document Structure}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}h{[}1-6{]}\textgreater{} ... \textless{}/h{[}1-6{]}\textgreater{} & Header 1 to 6 \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}div\textgreater{} ... \textless{}/div\textgreater{} & Page section \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\textless{}span\textgreater{} ... \textless{}/span\textgreater{} & Inline section \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\textless{}p\textgreater{} ... \textless{}/p\textgreater{} & Paragraph \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\textless{}br\textgreater{} & Line break \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
\textless{}hr\textgreater{} & Thematic break \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\textless{}hgroup\textgreater{} ... \textless{}/hgroup\textgreater{} & Heading group \tn 
% Row Count 9 (+ 2)
% Row 7
\SetRowColor{white}
\textless{}wbr\textgreater{} & Possible line-break \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.824 cm} x{2.356 cm} x{3.42 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Text format}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}i\textgreater{} ... \textless{}/i\textgreater{} & {\emph{Italic text}} &  \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}b\textgreater{} ... \textless{}/b\textgreater{} & {\bf{Bold text}} &  \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}strong\textgreater{} ... \textless{}/strong\textgreater{} & {\bf{Strong text}} &  \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
\textless{}em\textgreater{}\textless{}/em\textgreater{} & {\emph{Emphasized text}} &  \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}mark\textgreater{} .... \textless{}/mark\textgreater{} & \seqsplit{Marked/Highlighted} text &  \tn 
% Row Count 12 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}u\textgreater{} ... \textless{}/u\textgreater{} & \seqsplit{Unarticulated} annotation &  \tn 
% Row Count 14 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\textless{}del\textgreater{} ... \textless{}/del\textgreater{} & \textasciitilde{}\textasciitilde{}Deleted/Crossed-out text\textasciitilde{}\textasciitilde{} & cite | datetime \tn 
% Row Count 17 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}sub\textgreater{} ... \textless{}/sub\textgreater{} & Subscripted text &  \tn 
% Row Count 19 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textless{}sup\textgreater{} ... \textless{}/sup\textgreater{} & \textasciicircum{}Superscripted  text\textasciicircum{} &  \tn 
% Row Count 21 (+ 2)
% Row 9
\SetRowColor{white}
\textless{}small\textgreater{} ... \textless{}/small\textgreater{} & Small text &  \tn 
% Row Count 24 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\textless{}ins\textgreater{} ... \textless{}/ins\textgreater{} & Inserted text & cite | datetime \{\{nl\}\}Usually displayed as underlines \tn 
% Row Count 27 (+ 3)
% Row 11
\SetRowColor{white}
\textless{}pre\textgreater{} ... \textless{}/pre\textgreater{} & \seqsplit{Preformatted} text &  \tn 
% Row Count 29 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.432 cm} x{2.66 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Tables}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}table\textgreater{} ... \textless{}/table\textgreater{} & Table &  \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}thead\textgreater{} ... \textless{}/thead\textgreater{} & Table header &  \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}tbody\textgreater{} ... \textless{}/tbody\textgreater{} & Table body &  \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}tfoot\textgreater{} ... \textless{}/tfoot\textgreater{} & Table footer &  \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}tr\textgreater{} ... \textless{}/tr\textgreater{} & Table row &  \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}th\textgreater{} ... \textless{}/th\textgreater{} & Header cell & colspan | rowspan | scope \tn 
% Row Count 12 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\textless{}td\textgreater{} ... \textless{}/td\textgreater{} & Table cell & colspan | rowspan | headers \tn 
% Row Count 15 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}colgroup\textgreater{} ... \textless{}/cogroupl\textgreater{} & Groups of table  columns & span \tn 
% Row Count 18 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\textless{}col\textgreater{} & Attributes for  table columns & span \tn 
% Row Count 21 (+ 3)
% Row 9
\SetRowColor{white}
\textless{}caption\textgreater{} ... \textless{}/caption\textgreater{} & Table caption &  \tn 
% Row Count 23 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.824 cm} x{2.888 cm} x{2.888 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Embeded: images, video, audio, frame and object}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}img \seqsplit{alt="..."} src="..."\textgreater{} & Image & height | ismap | usemap | width \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}map\textgreater{} ... \textless{}/map\textgreater{} & Image map & name \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}area\textgreater{} ... \textless{}/area\textgreater{} & clickable area inside an image map & alt | coords | href | hreflang | media | ping | rel | shape | target | type \tn 
% Row Count 10 (+ 5)
% Row 3
\SetRowColor{white}
\textless{}svg\textgreater{} & SVG graphics & ... \tn 
% Row Count 11 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\textless{}picture\textgreater{} ... \textless{}/picture\textgreater{} & Container for multiple images resources &  \tn 
% Row Count 14 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}video\textgreater{} ... \textless{}/video\textgreater{} & Video & src | poster | autobuffer | autoplay | loop | controls | width | height \tn 
% Row Count 19 (+ 5)
% Row 6
\SetRowColor{LightBackground}
\textless{}audio\textgreater{} ... \textless{}/audio\textgreater{} & Audio & autobuffer | autoplay | controls | loop | src \tn 
% Row Count 22 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}source\textgreater{} ... \textless{}/source\textgreater{} & Source element for \textless{}picture\textgreater{}, \textless{}video\textgreater{} and \textless{}audio\textgreater{} & media | src | type \tn 
% Row Count 26 (+ 4)
% Row 8
\SetRowColor{LightBackground}
\textless{}track\textgreater{} & External timed text tracks for \textless{}video\textgreater{} and \textless{}audio\textgreater{} & kind {[}captions | chapters | descriptions | metadata | subtitles{]} | src | srclang | label | default \tn 
% Row Count 33 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.824 cm} x{2.888 cm} x{2.888 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Embeded: images, video, audio, frame and object (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
\textless{}iframe\textgreater{} ... \textless{}/iframe\textgreater{} & inline sub window (frame) & src | name | sandbox | seamless | width | height \tn 
% Row Count 4 (+ 4)
% Row 10
\SetRowColor{white}
\textless{}embed\textgreater{} & Container for an external application & height | src | type | width \tn 
% Row Count 7 (+ 3)
% Row 11
\SetRowColor{LightBackground}
\textless{}object\textgreater{} ... \textless{}/object\textgreater{} & Container for an external application & data | height | type | usemap | width | object \tn 
% Row Count 11 (+ 4)
% Row 12
\SetRowColor{white}
\textless{}param\textgreater{} & Parameters of \textless{}object\textgreater{} & name | value \tn 
% Row Count 13 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{Better to use directly use \textless{}img\textgreater{}, \textless{}iframe\textgreater{}, \textless{}video\textgreater{} and \textless{}audio\textgreater{} instead of \textless{}embed\textgreater{} or \textless{}object\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.888 cm} x{3.952 cm} p{0.76 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Semantic elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}header\textgreater{} ... \textless{}/header\textgreater{} & Header of a section or page &  \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}nav\textgreater{} ... \textless{}/nav\textgreater{} & Navigation links &  \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}section\textgreater{} ... \textless{}/section\textgreater{} & Section element & cite \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}article\textgreater{} ... \textless{}/article\textgreater{} & Article &  \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}aside\textgreater{} ... \textless{}/aside\textgreater{} & Aside element &  \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}footer\textgreater{} ... \textless{}/footer\textgreater{} & Footer of a section or page &  \tn 
% Row Count 12 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\textless{}figure\textgreater{} ... \textless{}/figure\textgreater{} & Figure element &  \tn 
% Row Count 14 (+ 2)
% Row 7
\SetRowColor{white}
\textless{}figcaption\textgreater{} ... \textless{}/figcaption\textgreater{} & Caption for \textless{}figure\textgreater{} element &  \tn 
% Row Count 16 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textless{}details\textgreater{} ... \textless{}/details\textgreater{} & Details of an element\{\{nl\}\}can be viewed or hidden & open \tn 
% Row Count 19 (+ 3)
% Row 9
\SetRowColor{white}
\textless{}main\textgreater{} ... \textless{}/main\textgreater{} & Main content of the document &  \tn 
% Row Count 21 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\textless{}summary\textgreater{} ... \textless{}/summary\textgreater{} & Visible heading for the \textless{}details\textgreater{} element &  \tn 
% Row Count 24 (+ 3)
% Row 11
\SetRowColor{white}
\textless{}time\textgreater{} ... \textless{}/time\textgreater{} & Date/time & \seqsplit{datetime} \tn 
% Row Count 26 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Organization of semantic elements}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Image could not be loaded.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.368 cm} x{2.28 cm} x{3.952 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Lists}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{{\bf{List type}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\textless{}ol\textgreater{} ... \textless{}/ol\textgreater{} & Ordered list & start | reversed | type {\emph{{[}1 | A | a | I | i{]}}} \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}ul\textgreater{} ... \textless{}/ul\textgreater{} & Unordered list &  \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}dl\textgreater{} ... \textless{}/dl\textgreater{} & Definition list &  \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{{\bf{List element}}} \tn 
% Row Count 9 (+ 1)
% Row 5
\SetRowColor{white}
\textless{}li\textgreater{} ... \textless{}/li\textgreater{} & List item & value \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\textless{}dt\textgreater{} ... \textless{}/dt\textgreater{} & Definition term &  \tn 
% Row Count 13 (+ 2)
% Row 7
\SetRowColor{white}
\textless{}dd\textgreater{} ... \textless{}/dd\textgreater{} & Definition  description &  \tn 
% Row Count 15 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.976 cm} x{2.508 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Forms}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}form\textgreater{} ... \textless{}/form\textgreater{} & Form element & method {\emph{{[}get | post | put | delete{]}}} |\{\{nl\}\}action | data | replace | accept | accept-charset | enctype | target \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\textless{}input\textgreater{} ... \textless{}/input\textgreater{} & Input field & type {\emph{ {[}hidden | text | search | tel | url  | email | password | datetime | date | month | week | time | datetime-local | number | range | color |  checkbox | radio | file | submit | image | reset |  button{]}}} | \{\{nl\}\}{\bf{Attributes are dependant upon input type}}\{\{nl\}\} 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 \tn 
% Row Count 42 (+ 35)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.976 cm} x{2.508 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 2
\SetRowColor{LightBackground}
\textless{}label\textgreater{} ... \textless{}/label\textgreater{} & Label for a form control & for \tn 
% Row Count 2 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}textarea\textgreater{} ... \textless{}/textarea\textgreater{} & Text area & autofocus | cols |  disabled | form | name  | readonly | required |  rows | maxlength |  placeholder | wrap \tn 
% Row Count 9 (+ 7)
% Row 4
\SetRowColor{LightBackground}
\textless{}select\textgreater{} ... \textless{}/select\textgreater{} & Drop-down list & autofocus | data |  disabled | form | multiple | name \tn 
% Row Count 13 (+ 4)
% Row 5
\SetRowColor{white}
\textless{}optgroup\textgreater{} ... \textless{}/optgroup\textgreater{} & Option group & disabled | label \tn 
% Row Count 16 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\textless{}option\textgreater{} ... \textless{}/option\textgreater{} & Option in a drop-down list & disabled | label |  selected | value \tn 
% Row Count 19 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}legend\textgreater{} ... \textless{}/legend\textgreater{} & Fieldset title &  \tn 
% Row Count 22 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\textless{}output\textgreater{} ... \textless{}/output\textgreater{} & Result of a calculation & for | form | name \tn 
% Row Count 25 (+ 3)
% Row 9
\SetRowColor{white}
\textless{}fieldset\textgreater{} ... \textless{}/fieldset\textgreater{} & Fieldset & disabled | form | name \tn 
% Row Count 28 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\textless{}button\textgreater{} ... \textless{}/button\textgreater{} & Button & autofocus | disabled |  form | formaction |  formenctype | formmethod | formnovalidate |  formtarget | name |  type | value \tn 
% Row Count 36 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.976 cm} x{2.508 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
\textless{}datalist\textgreater{} ... \textless{}/datalist\textgreater{} & Dropdown list &  \tn 
% Row Count 3 (+ 3)
% Row 12
\SetRowColor{white}
\textless{}template\textgreater{} ... \textless{}/templat\textgreater{} & Hidden content, whown upon action &  \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.736 cm} x{2.888 cm} x{1.976 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Quotations}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}abbr\textgreater{} ... \textless{}/abbr\textgreater{} & Abbreviation or acronym &  \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}address\textgreater{} ... \textless{}/address\textgreater{} & Adress element &  \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}bdo\textgreater{} ... \textless{}/bdo\textgreater{} & Text direction & dir {\emph{{[}ltr | rtl{]}}} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}blockquote\textgreater{} & Long quotation & cite \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\textless{}cite\textgreater{} ... \textless{}/cite\textgreater{} & Citation: title of a work &  \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}q\textgreater{} ... \textless{}/q\textgreater{} & Short quotation & cite \tn 
% Row Count 10 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\textless{}dfn\textgreater{} ... \textless{}/dfn\textgreater{} & Definition term & title \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.48 cm} x{5.52 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Code}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}code\textgreater{} ... \textless{}/code\textgreater{} & Defines programming code\{\{nl\}\}Does not preserve extra whitespace and line-breaks, except if inside \textless{}pre\textgreater{} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\textless{}kbd\textgreater{} ... \textless{}/kbd\textgreater{} & Defines keyboard input \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}samp\textgreater{} ... \textless{}/samp\textgreater{} & Defines computer output \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}var\textgreater{} ... \textless{}/var\textgreater{} & Defines a variable \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.28 cm} x{1.9 cm} x{3.42 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Other}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}-{}-! ... -{}-\textgreater{} & Comment &  \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\textless{}a\textgreater{} ... \textless{}/a\textgreater{} & Hyperlink & href | hreflang | media | ping | rel | target | type \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}progress\textgreater{} ... \textless{}/progress\textgreater{} & Progress of a task & max | value \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
\textless{}meter\textgreater{} ... \textless{}/meter\textgreater{} & Meter element: a gauge & high | low | max | min |  optimum | value \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\textless{}dialog\textgreater{} ... \textless{}/dialog\textgreater{} & Dialog &  \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{\{\{fa-warning\}\} Comments visible in source code}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}