LaTeX to HTML cheatsheet

% A super-helpful comment

<!-- A super-helpful comment -->

LaTeX embeds the title given in \title{...} into the PDF metadata and usually also typesets it at the top of the document. Specific document classes can customize that behavior.

<title>My excellent document title</title>

The <title> tag does not actually tell the renderer to print any text to the document, unlike the \title{...} directive in LaTeX. <title> sets the document title shown in, for example, a browser title bar or a search engine link, but it is metadata and may only appear in the HTML header.

\section{A primary heading}
\subsection{A secondary heading}
\subsubsection{A tertiary heading}

<h1>A primary heading</h1>
<h2>A secondary heading</h2>
<h3>A tertiary heading</h3>

HTML allows multiple <h1> headings on a single page. Using multiple <h1> tags versus a single <h1> tag and multiple <h2> tags is a matter of taste and the structure of the document at hand.

HTML supports heading hierarchy up to level six with <h6>.

\par I'm starting a new paragraph! It
doesn't really say anything, but, boy, is it shiny.

<p>I'm starting a new paragraph! It
doesn't really say anything, but, boy, is it shiny.</p>

In HTML, consecutive paragraphs are usually displayed with some space between the blocks of text, but this is controlled by the stylesheet and can be customized. Separating blocks of text with <p> makes the structure of the text explicit and helps you avoid writing a "wall of text."

\begin{itemize}
  \item Item the first...
  \item Item the second...
\end{itemize}

<ul>
  <li>Item the first...</li>
  <li>Item the second...</li>
</ul>

The tag <ul> is an abbreviation for "unordered list." Lists with bullets are unordered since the item marker, a bullet, is not unique between items. <li> is used for every item (abbreviation of "list item") in both ordered and unordered lists.

\begin{enumerate}
  \item Item the first...
  \item Item the second...
\end{enumerate}

<ol>
  <li>Item the first...</li>
  <li>Item the second...</li>
</ol>

The tag <ol> is an abbreviation for "ordered list." Lists with numbers (or letters, etc.) are ordered since the item marker is unique between items. HTML takes care of assigning the number or letter for you, just like LaTeX does.

% in the preamble
\usepackage{hyperref}

% in the document environment
\href{https://www.w3.org}{Read more about HTML!}

<a href="https://www.w3.org">Read more about HTML!</a>

It may seem counterintuitive that the HTML tag for a link is <a> when a <link> tag exists and does something entirely different! The correct tag for a link to a URL is <a>, which is an abbreviation of the word "anchor." Anchors can also be used to jump around a document with defined anchor points.

% in the preamble
\usepackage{graphicx}

% in the document environment
\includegraphics{very_cool_image}

<img src="very_cool_image.png" alt="Short alt text" />

The <img /> element is good for web-friendly rasterized images like PNG, JPEG, or GIF (static or animated) files. It is not used for interactive content, however.

% in the preamble
\usepackage{listings}

% in the document environment
\begin{lstlisting}
def the_song_that_never_ends():
    print('Yes: It goes on and on, my friends!')
    the_song_that_never_ends()
\end{lstlisting}

<code>
def the_song_that_never_ends():
    print('Yes: It goes on and on, my friends!')
    the_song_that_never_ends()
</code>

The <code> block does not take care of syntax highlighting for you; it just indicates that the contents are code. You can use a library like highlight.js to lex and highlight many programming languages.

You might also nest the <code> block inside a <pre> block, a section of preformatted text. A default styling for both <code> and <pre> might be monospaced font, but this can also be customized with styling.

Have you heard about the dangers of dihydrogen monoxide, commonly known as H\textsubscript{2}O? It is the 1\textsuperscript{st} most abundant molecule in the human body!

Have you heard about the dangers of dihydrogen monoxide, commonly known as H<sub>2</sub>O? It is the 1<sup>st</sup> most abundant molecule in the human body!

\emph{I really want to emphasize this!}

Text enclosed in \emph{...} is usually typeset in italic font. The difference between \emph{...} and \textit{...} is subtle and seems to be related to inter-character spacing when the font changes. Whether the intent of emphasis makes it into the PDF is not clear (to me).

<em>I really want to emphasize this!</em>

Text between <em> and </em> tags may be shown to the user in italic font, but <em> more specifically indicates text with "emphatic stress." There is no ambiguity about the intent, for example, if the document is being rendered as audio.

LaTeX does not seem to have a standard way of typesetting strong importance. If you roll your own macro, you might use bold or bold-italic font, but that choice can easily vary from user to user or even document to document.

<strong>This is strongly important.</strong>

Text between <strong> and </strong> tags may be shown to the user in boldface, but <strong> more specifically indicates text with "strong importance." There is no ambiguity about the intent, for example, if the document is being rendered as audio.

\textbf{I think this looks nice in bold.}

Text enclosed in \textbf{...} will always be typeset in boldface, but the significance of the formatting may or may not be clear from context.

<b>I think this looks nice in bold.<b>

Text between <b> and </b> tags may be shown to the user in boldface. The element itself does not indicate emphasis, just that the conventional formatting would be boldface.

\textit{I think this looks nice in italic.}

Text enclosed in \textit{...} will always be typeset in italic font, but the significance of the formatting may or may not be clear from context.

<i>I think this looks nice in italic.<i>

Text between <i> and </i> tags may be shown to the user in italic font. The element itself does not indicate emphasis, just that the conventional formatting would be as italicized text.

\underline{I think this looks nice underlined.}

Text enclosed in \underline{...} will always be typeset underlined, but the significance of the formatting may or may not be clear from context.

<u>I think this looks nice underlined.<u>

Text between <u> and </u> tags may be shown to the user underlined. The element itself does not indicate emphasis, just that the conventional formatting would be as underlined text.

LaTeX does not have a standard command for strikethrough text, though additional packages may add that capability.

<s>I think this looks nice struck out.<s>

Text between <s> and </s> tags may be shown to the user struck through with a horizontal line. It is used to indicate content that is "no longer accurate or no longer relevant.".