\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{williamOverbeck}
\pdfinfo{
  /Title (cs35564.pdf)
  /Creator (Cheatography)
  /Author (williamOverbeck)
  /Subject (... 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}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\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{... Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{williamOverbeck} via \textcolor{DarkBackground}{\uline{cheatography.com/170134/cs/35564/}}}
\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}williamOverbeck \\
  \uline{cheatography.com/williamoverbeck} \\
  \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 19th November, 2022.\\
   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*}{3}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{basic elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}!doctype html\textgreater{} & explain the file format (HTML) \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}head\textgreater{}\{\{nl\}\}\textless{}/head\textgreater{} & header of the website (read by webbrowser) \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}body\textgreater{}\{\{nl\}\}\textless{}/body\textgreater{} & body of the website (readable elements) \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}!-{}- this is a comment on 1 or multiple line -{}-\textgreater{} & comment \tn 
% Row Count 10 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#main\_root}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.18988 cm} x{2.78712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Content sectioning}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}header\textgreater{}\{\{nl\}\}\textless{}/header\textgreater{} & header of the website \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}main\textgreater{}\{\{nl\}\}\textless{}/main\textgreater{} & main content (directly or indirectly related to the main topic) \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}footer\textgreater{}\{\{nl\}\}\textless{}/footer\textgreater{} & footer of the website \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}article\textgreater{}\{\{nl\}\}\textless{}/article\textgreater{} & self-contained composition in a document \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}aside\textgreater{}\{\{nl\}\}\textless{}/aside\textgreater{} & content indirectly related to the main document's content \tn 
% Row Count 12 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}address\textgreater{}\{\{nl\}\}\textless{}/address\textgreater{} & provides contact information for a person or an organisation \tn 
% Row Count 15 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\textless{}h1\textgreater{}\textless{}/h1\textgreater{}\{\{nl\}\}to\{\{nl\}\}\textless{}h6\textgreater{}\textless{}/h6\textgreater{} & 6 levels of section \textless{}h1\textgreater{} is the highest level and \textless{}h6\textgreater{} the lowest \tn 
% Row Count 18 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}nav\textgreater{}\{\{nl\}\}\textless{}/nav\textgreater{} & navigation link \tn 
% Row Count 19 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\textless{}section\textgreater{}\{\{nl\}\}\textless{}/section\textgreater{} & generic section of a readable element \tn 
% Row Count 21 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#content\_sectioning}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{next block 1}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{head part (Document metadata)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}link rel="stylesheet" href="style.css"\textgreater{} & link external CSS file \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}script src="myscripts.js"\textgreater{}\{\{nl\}\}\textless{}/script\textgreater{} & link external JS* file \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}meta charset="UTF-8"\textgreater{} & define the character \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}meta name="viewport" \seqsplit{content="width=device-width}, initial-scale=1.0"\textgreater{} & set the viewport on every devices \tn 
% Row Count 11 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\textless{}meta\textgreater{}\{\{link="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta"\}\}more info\{\{/link\}\} & HTML elements that cannot be represented by others HTML elements \tn 
% Row Count 16 (+ 5)
% Row 5
\SetRowColor{white}
\textless{}base \seqsplit{href="https://www.myURL.com/"} target="\_blank"\textgreater{} & Base URL of a page \tn 
% Row Count 19 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\textless{}title\textgreater{}\{\{nl\}\}\textless{}/title\textgreater{} & title of the website \tn 
% Row Count 21 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#document\_metadata}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{next block}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Inline text semantics}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}a href="URL"\textgreater{}\{\{nl\}\}\textless{}/a\textgreater{} & create an hyperlink \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}abbr\textgreater{}\{\{nl\}\}\textless{}/abbr\textgreater{} & represents an abbreviation or acronym \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}b\textgreater{}\{\{nl\}\}\textless{}/b\textgreater{} & draw the reader's attention to the element's content \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
\textless{}bdi\textgreater{}\{\{nl\}\}\textless{}/bdi\textgreater{} & element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text \tn 
% Row Count 12 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\textless{}bdo\textgreater{}\{\{nl\}\}\textless{}/bdo\textgreater{} & element overrides the current directionality of text, so that the text within is rendered in a different direction. \tn 
% Row Count 17 (+ 5)
% Row 5
\SetRowColor{white}
\textless{}br\textgreater{} & line break \tn 
% Row Count 18 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\textless{}cite\textgreater{}\{\{nl\}\}\textless{}/cite\textgreater{} & a quote \tn 
% Row Count 20 (+ 2)
% Row 7
\SetRowColor{white}
\textless{}code\textgreater{}\{\{nl\}\}\textless{}/code\textgreater{} & show some code \tn 
% Row Count 22 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textless{}data\textgreater{}\{\{nl\}\}\textless{}/data\textgreater{} & show a content with a machine-readable translation \tn 
% Row Count 25 (+ 3)
% Row 9
\SetRowColor{white}
\textless{}dfn\textgreater{}\{\{nl\}\}\textless{}/dfn\textgreater{} & indicate the term being defined within the context of a sentence \tn 
% Row Count 28 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\textless{}em\textgreater{}\{\{nl\}\}\textless{}/em\textgreater{} & marks text that has stress emphasis (important text) \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Inline text semantics (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
\textless{}i\textgreater{}\{\{nl\}\}\textless{}/i\textgreater{} & range of text that is set off from the normal text \tn 
% Row Count 3 (+ 3)
% Row 12
\SetRowColor{white}
\textless{}kbd\textgreater{}\{\{nl\}\}\textless{}/kbd\textgreater{} & inline text denoting textual user input \tn 
% Row Count 5 (+ 2)
% Row 13
\SetRowColor{LightBackground}
\textless{}mark\textgreater{}\{\{nl\}\}\textless{}/mark\textgreater{} & marked or highlighted a text \tn 
% Row Count 7 (+ 2)
% Row 14
\SetRowColor{white}
\textless{}q\textgreater{}\{\{nl\}\}\textless{}/q\textgreater{} & short quotations that don't require paragraph breaks \tn 
% Row Count 10 (+ 3)
% Row 15
\SetRowColor{LightBackground}
\textless{}rp\textgreater{}\{\{nl\}\}\textless{}/rp\textgreater{} & provide fall-back parentheses for browsers that do not support display of ruby annotations using the \textless{}ruby\textgreater{} element \tn 
% Row Count 15 (+ 5)
% Row 16
\SetRowColor{white}
\textless{}rt\textgreater{}\{\{nl\}\}\textless{}/rt\textgreater{} & ruby text component of a ruby annotation \tn 
% Row Count 17 (+ 2)
% Row 17
\SetRowColor{LightBackground}
\textless{}ruby\textgreater{}\{\{nl\}\}\textless{}/ruby\textgreater{} & small rendered annotations \tn 
% Row Count 19 (+ 2)
% Row 18
\SetRowColor{white}
\textless{}s\textgreater{}\{\{nl\}\}\textless{}/s\textgreater{} & format for element no longer relevant \tn 
% Row Count 21 (+ 2)
% Row 19
\SetRowColor{LightBackground}
\textless{}samp\textgreater{}\{\{nl\}\}\textless{}/samp\textgreater{} & quote output from a program \tn 
% Row Count 23 (+ 2)
% Row 20
\SetRowColor{white}
\textless{}small\textgreater{}\{\{nl\}\}\textless{}/small\textgreater{} & change element size \tn 
% Row Count 25 (+ 2)
% Row 21
\SetRowColor{LightBackground}
\textless{}span\textgreater{}\{\{nl\}\}\textless{}/span\textgreater{} & generic container for phrasing content \tn 
% Row Count 27 (+ 2)
% Row 22
\SetRowColor{white}
\textless{}strong\textgreater{}\{\{nl\}\}\textless{}/strong\textgreater{} & elements with strong importance \tn 
% Row Count 29 (+ 2)
% Row 23
\SetRowColor{LightBackground}
\textless{}sub\textgreater{}\{\{nl\}\}\textless{}/sub\textgreater{} & text which should be displayed as subscript for solely typographical reasons \tn 
% Row Count 33 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Inline text semantics (cont)}}  \tn
% Row 24
\SetRowColor{LightBackground}
\textless{}sup\textgreater{}\{\{nl\}\}\textless{}/sup\textgreater{} & text which is to be displayed as superscript for solely typographical reasons \tn 
% Row Count 4 (+ 4)
% Row 25
\SetRowColor{white}
\textless{}time\textgreater{}\{\{nl\}\}\textless{}/time\textgreater{} & indicate a specific period in time \tn 
% Row Count 6 (+ 2)
% Row 26
\SetRowColor{LightBackground}
\textless{}u\textgreater{}\{\{nl\}\}\textless{}/u\textgreater{} & mark text as having some form of non-textual annotation applied. \tn 
% Row Count 9 (+ 3)
% Row 27
\SetRowColor{white}
\textless{}var\textgreater{}\{\{nl\}\}\textless{}/var\textgreater{} & name of a variable in a mathematical expression or a programming context \tn 
% Row Count 12 (+ 3)
% Row 28
\SetRowColor{LightBackground}
\textless{}wbr\textgreater{} & represents a word break opportunity \tn 
% Row Count 14 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#inline\_text\_semantics}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{new page 1}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Text content}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}div\textgreater{}\{\{nl\}\}\textless{}/div\textgreater{} & generic container for flow content \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}blockquote cite="URL"\textgreater{}\{\{nl\}\}\textless{}/blockquote\textgreater{} & external quotation \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}hr\textgreater{} & thematic break between paragraph-elements \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
\textless{}p\textgreater{}\{\{nl\}\}\textless{}/p\textgreater{} & a paragraph \tn 
% Row Count 9 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\textless{}pre\textgreater{}\{\{nl\}\}\textless{}/pre\textgreater{} & represents preformatted text exactly as written in the HTML file \tn 
% Row Count 13 (+ 4)
% Row 5
\SetRowColor{white}
\textless{}li\textgreater{}\{\{nl\}\}\textless{}/li\textgreater{} & represent an item in a list, used with \textless{}ol\textgreater{} or \textless{}ul\textgreater{} \tn 
% Row Count 16 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\textless{}ol\textgreater{}\{\{nl\}\}\textless{}/ol\textgreater{} & render a list of items as a numbered list \tn 
% Row Count 19 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}ul\textgreater{}\{\{nl\}\}\textless{}/ul\textgreater{} & render a list of items as a bulleted list \tn 
% Row Count 22 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\textless{}menu\textgreater{}\{\{nl\}\}\textless{}/menu\textgreater{} & alternative to \textless{}ul\textgreater{} for interactive list of items \tn 
% Row Count 25 (+ 3)
% Row 9
\SetRowColor{white}
\textless{}figure\textgreater{}\textless{}/figure\textgreater{} & self-contained content \tn 
% Row Count 27 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\textless{}figcaption\textgreater{}\{\{nl\}\}\textless{}/figcaption\textgreater{} & caption or legend describing a parent element \textless{}figure\textgreater{} \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Text content (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
\textless{}dl\textgreater{}\{\{nl\}\}\textless{}/dl\textgreater{} & a description list, used with \textless{}dt\textgreater{} \textless{}dd\textgreater{} \tn 
% Row Count 2 (+ 2)
% Row 12
\SetRowColor{white}
\textless{}dt\textgreater{}\{\{nl\}\}\textless{}/dt\textgreater{} & "head" of the description, what will be describe \tn 
% Row Count 5 (+ 3)
% Row 13
\SetRowColor{LightBackground}
\textless{}dd\textgreater{}\{\{nl\}\}\textless{}/dd\textgreater{} & "body" of the description, the description \tn 
% Row Count 8 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#text\_content}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{next block 3}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Web components}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}slot\textgreater{}\{\{nl\}\}\textless{}/slot\textgreater{} & a placeholder inside a web component that you can fill with your own markup \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\textless{}template\textgreater{}\{\{nl\}\}\textless{}/template\textgreater{} & make the element render after a page load with JS code \tn 
% Row Count 7 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#web\_components}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.69218 cm} x{3.28482 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{image and multimedia}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}img\textgreater{} & import a picture \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\textless{}video\textgreater{}\{\{nl\}\}\textless{}/video\textgreater{} & create a video media control \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}audio\textgreater{}\{\{nl\}\}\textless{}/audio\textgreater{} & create an audio media control \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}track\textgreater{} & child of \textless{}audio\textgreater{} and \textless{}video\textgreater{} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}map\textgreater{}\{\{nl\}\}\textless{}/map\textgreater{} & define a clickable map, use with \textless{}area\textgreater{} for each clickable area \tn 
% Row Count 10 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}area\textgreater{} & clickable areas inside a \textless{}map\textgreater{} element \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#image\_and\_multimedia}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Interactive elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}dialog\textgreater{} & represents a dialog box or other interactive component \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}details\textgreater{}\{\{nl\}\}\textless{}/details\textgreater{} & create a widget with (open/close) state\{\{nl\}\}a \textless{}summary\textgreater{} is mandatory \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}summary\textgreater{}\{\{nl\}\}\textless{}/summary\textgreater{} & summary of caption or legend for \textless{}details\textgreater{} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#interactive\_elements}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{next block 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Embedded content}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}embed\textgreater{} & embeds external content \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\textless{}iframe\textgreater{}\{\{nl\}\}\textless{}/iframe\textgreater{} & embedding another HTML page into the current one \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}object\textgreater{}\{\{nl\}\}\textless{}/object\textgreater{} & represents an external resource \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}portal\textgreater{}\{\{nl\}\}\textless{}/portal\textgreater{} & enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages. \tn 
% Row Count 11 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\textless{}source\textgreater{} & specify the source of a media element, used with \textless{}audio\textgreater{} \textless{}video\textgreater{} \textless{}picture\textgreater{} \tn 
% Row Count 15 (+ 4)
% Row 5
\SetRowColor{white}
\textless{}picture\textgreater{}\{\{nl\}\}\textless{}/picture\textgreater{} & import a picture \tn 
% Row Count 17 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#embedded\_content}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Scripting}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}canvas\textgreater{}\{\{nl\}\}\textless{}/canvas\textgreater{} & draw graphics and animations \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}noscript\textgreater{}\{\{nl\}\}\textless{}/noscript\textgreater{} & will show if JS is turned off/not supported \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}script\textgreater{}\{\{nl\}\}\textless{}/script\textgreater{} & add JS code \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#scripting}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.4931 cm} x{3.4839 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Demarcating edits}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}del\textgreater{}\{\{nl\}\}\textless{}/del\textgreater{} & deleted text from a document (used when rendering "track changes") \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}ins\textgreater{}\{\{nl\}\}\textless{}/ins\textgreater{} & added text from a document (used when rendering "track changes") \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#demarcating\_edits}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{new page 2}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Forms}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}form\textgreater{}\{\{nl\}\}\textless{}/form\textgreater{} & create a form \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}button\textgreater{}\{\{nl\}\}\textless{}/button\textgreater{} & a button \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}meter\textgreater{}\{\{nl\}\}\textless{}/meter\textgreater{} & meter of a scalar value \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}output\textgreater{}\{\{nl\}\}\textless{}/output\textgreater{} & output result of a program \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}progress\textgreater{}\{\{nl\}\}\textless{}/progress\textgreater{} & an indicator showing the completion progress of a task \tn 
% Row Count 11 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}textarea\textgreater{}\{\{nl\}\}\textless{}/textarea\textgreater{} & when users need to input a sizeable amount of text \tn 
% Row Count 14 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\textless{}input\textgreater{} & get an input from the user \tn 
% Row Count 16 (+ 2)
% Row 7
\SetRowColor{white}
\textless{}label\textgreater{}\{\{nl\}\}\textless{}/label\textgreater{} & caption for an \textless{}input\textgreater{} \tn 
% Row Count 18 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textless{}datalist\textgreater{}\{\{nl\}\}\textless{}/datalist\textgreater{} & a list containing multiple \textless{}option\textgreater{} to choose\{\{nl\}\} from ({\bf{can}} chose a given option) \tn 
% Row Count 22 (+ 4)
% Row 9
\SetRowColor{white}
\textless{}select\textgreater{}\{\{nl\}\}\textless{}/select\textgreater{} & a selection of multiples options\{\{nl\}\} ({\bf{must}} chose a given option) \tn 
% Row Count 25 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\textless{}optgroup\textgreater{}\{\{nl\}\}\textless{}/optgroup\textgreater{} & a grouping of options within \textless{}select\textgreater{}/\textless{}datalist\textgreater{} \tn 
% Row Count 27 (+ 2)
% Row 11
\SetRowColor{white}
\textless{}option\textgreater{}\{\{nl\}\}\textless{}/option\textgreater{} & an option inside a \textless{}select\textgreater{}/\textless{}datalist\textgreater{} \tn 
% Row Count 29 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\textless{}fieldset\textgreater{}\{\{nl\}\}\textless{}/fieldset\textgreater{} & a set of several controls \tn 
% Row Count 31 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
\textless{}legend\textgreater{}\{\{nl\}\}\textless{}/legend\textgreater{} & caption(title) for a \textless{}fieldset\textgreater{} \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#forms}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{table content}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}table\textgreater{}\{\{nl\}\}\textless{}/table\textgreater{} & create a table \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}thead\textgreater{}\{\{nl\}\}\textless{}/thead\textgreater{} & head of a table \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}tbody\textgreater{}\{\{nl\}\}\textless{}/tbody\textgreater{} & body of a table \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}tfoot\textgreater{}\{\{nl\}\}\textless{}/tfoot\textgreater{} & foot of a table \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\textless{}caption\textgreater{}\{\{nl\}\}\textless{}/caption\textgreater{} & caption (or) title of a table \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}colgroup\textgreater{}\{\{nl\}\}\textless{}/colgroup\textgreater{} & defines a group of columns within a table\{\{nl\}\} parent of \textless{}col\textgreater{} \tn 
% Row Count 13 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\textless{}col\textgreater{} & column within a table \tn 
% Row Count 14 (+ 1)
% Row 7
\SetRowColor{white}
\textless{}tr\textgreater{}\{\{nl\}\}\textless{}/tr\textgreater{} & row of cells in a table, parent of \textless{}td\textgreater{} \textless{}th\textgreater{} \tn 
% Row Count 16 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textless{}td\textgreater{}\{\{nl\}\}\textless{}/td\textgreater{} & "head" of a cell table \tn 
% Row Count 17 (+ 1)
% Row 9
\SetRowColor{white}
\textless{}th\textgreater{}\{\{nl\}\}\textless{}/th\textgreater{} & "body" of a cell table \tn 
% Row Count 18 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info:  \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#table\_content}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.59264 cm} x{3.38436 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{SVG and MathML}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}dvg\textgreater{} & defines a new coordinate system and viewport \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}math\textgreater{}\{\{nl\}\}\textless{}/math\textgreater{} & top-level MathML element \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#svg\_and\_mathml}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{others HTML5 cheat sheet}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{complete cheat sheet with copy-paste elements \newline % Row Count 1 (+ 1)
\seqsplit{https://htmlcheatsheet.com/} \newline % Row Count 2 (+ 1)
website used \newline % Row Count 3 (+ 1)
\seqsplit{https://developer.mozilla.org/en-US/docs/Web/HTML/Element} \newline % Row Count 5 (+ 2)
another good website \newline % Row Count 6 (+ 1)
\seqsplit{https://www.w3schools.com/html/default.asp}% Row Count 7 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Obsolete and deprecated elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}acronym\textgreater{}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}applet\textgreater{}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}bgsound\textgreater{}} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}big\textgreater{}} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}blink\textgreater{}} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}center\textgreater{}} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}content\textgreater{}} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}dir\textgreater{}} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}font\textgreater{}} \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}frame\textgreater{}} \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}frameset\textgreater{}} \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}image\textgreater{}} \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}keygen\textgreater{}} \tn 
% Row Count 13 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}marquee\textgreater{}} \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}menuitem\textgreater{}} \tn 
% Row Count 15 (+ 1)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}nobr\textgreater{}} \tn 
% Row Count 16 (+ 1)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}noembed\textgreater{}} \tn 
% Row Count 17 (+ 1)
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}noframes\textgreater{}} \tn 
% Row Count 18 (+ 1)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}param\textgreater{}} \tn 
% Row Count 19 (+ 1)
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}plaintext\textgreater{}} \tn 
% Row Count 20 (+ 1)
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}rb\textgreater{}} \tn 
% Row Count 21 (+ 1)
% Row 21
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}rtc\textgreater{}} \tn 
% Row Count 22 (+ 1)
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}shadow\textgreater{}} \tn 
% Row Count 23 (+ 1)
% Row 23
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}spacer\textgreater{}} \tn 
% Row Count 24 (+ 1)
% Row 24
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}strike\textgreater{}} \tn 
% Row Count 25 (+ 1)
% Row 25
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}tt\textgreater{}} \tn 
% Row Count 26 (+ 1)
% Row 26
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}xmp\textgreater{}} \tn 
% Row Count 27 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{more info: \newline https://developer.mozilla.org/en-US/docs/Web/HTML/Element\#obsolete\_and\_deprecated\_elements}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}