HTML tutorial

Simple HTML skeleton

Consider a minimal LaTeX document like this:

\documentclass{article}
\title{A very simple \LaTeX\ document}

\begin{document}
Hello, world!
\end{document}

You can write something similar in pure HTML in a straightforward way.

<!DOCTYPE html>
<html>
  <head>
    <title>A very simple HTML document</title>
    <meta charset="utf-8" />
    <!-- Other metadata goes here -->
  </head>
  <body>
    <h1>This is a very simple heading</h1>
    <p>Hello, world!</p>
  </body>
</html>

Picking apart this example, we have:

  • <!DOCTYPE html> is the doctype declaration for HTML5 going forward. It just indicates that the following document is HTML. The standard defines some other declarations.
  • All of the HTML tree lives in the <html></html> root element.
  • Inside that, we define the <head></head>, which encloses metadata like the document title, scripts and stylesheets that should be loaded, and the character encoding.
  • Everything else is contained in the <body></body> element. Most elements in this section are document contents that could be rendered to the screen, read aloud, or printed.
  • The <h1></h1> and <p></p> tags define a level one heading and a (very short, in this case) paragraph.

The <head></head> element is analogous to the LaTeX document preamble. The <body></body> element is analogous to the \begin{document} ... \end{document} environment.