Hack University
← All cheatsheets
HTML
Document Structure

HTML Cheatsheet

Document Structure

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Minimal HTML5 Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <p>Content goes here.</p>
  </body>
</html>

<html> Element

The root element. lang is required for accessibility and SEO.

<html lang="en">           <!-- English -->
<html lang="es">           <!-- Spanish -->
<html lang="zh-Hans">      <!-- Simplified Chinese -->
<html lang="pt-BR">        <!-- Brazilian Portuguese -->
<html lang="en" dir="ltr"> <!-- explicit direction -->

<head> — Metadata Container

Everything inside <head> is not rendered on the page. Order convention: charset first, viewport second, title third, then everything else.

<head>
  <!-- 1. Character encoding — always first -->
  <meta charset="UTF-8">

  <!-- 2. Viewport — always second for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. Page title (shown in tab / search results) -->
  <title>My Site | Page Name</title>

  <!-- 4. Everything else... -->
  <meta name="description" content="Page description for SEO.">

  <!-- CSS stylesheets -->
  <link rel="stylesheet" href="/styles/main.css">

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Preconnect / preload hints -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/current-page">

  <!-- Base URL for relative links -->
  <base href="https://example.com/">
</head>

<body> — Page Content

All visible content lives in <body>. Accepts global attributes.

<body>
  <!-- All visible page content -->
</body>

<body> event attributes (prefer JS addEventListener over these):

AttributeFires when
onloadPage fully loaded
onunloadPage is unloading
onbeforeunloadBefore page unloads
onresizeWindow resizes
onscrollPage scrolls

<title> Element

<!-- Basic -->
<title>About Us | ACME Corp</title>

<!-- Good SEO pattern: primary keyword | brand -->
<title>Buy Running Shoes Online | SportShop</title>
  • Max ~60 characters for search snippets.
  • Must be inside <head>.
  • Required — pages without a title fail accessibility audits.

<script> Element

<!-- External script (default: blocking) -->
<script src="/app.js"></script>

<!-- async — downloads in parallel, executes ASAP (no order guarantee) -->
<script src="/analytics.js" async></script>

<!-- defer — downloads in parallel, executes after HTML parsed, in order -->
<script src="/app.js" defer></script>

<!-- Inline script -->
<script>
  console.log('Hello');
</script>

<!-- ES module (always deferred) -->
<script type="module" src="/main.js"></script>
<script type="module">
  import { init } from './app.js';
  init();
</script>

<!-- JSON data island (not executed) -->
<script type="application/json" id="page-data">
  {"userId": 42, "role": "admin"}
</script>

<!-- Importmap (ES module specifiers) -->
<script type="importmap">
{
  "imports": {
    "lodash": "/vendor/lodash.js"
  }
}
</script>

Script loading comparison

StrategyBlocks HTML parsingExecution orderUse case
<script src> (default)YesIn document orderLegacy, critical blocking scripts
asyncNoWhenever readyAnalytics, ads — no order needed
deferNoDocument order, after parseApplication scripts
type="module"NoAfter parse (like defer)Modern ES modules

<style> Element

Inline CSS in the document head (or body).

<head>
  <style>
    body { margin: 0; font-family: sans-serif; }
    .hero { background: #000; color: #fff; }
  </style>

  <!-- Scoped to print media -->
  <style media="print">
    nav { display: none; }
  </style>
</head>

<base> Element

Sets the base URL for all relative URLs in the document. Only one <base> is allowed.

<head>
  <base href="https://example.com/docs/">
  <!-- All relative links now resolve from this base -->
</head>
<body>
  <a href="intro.html">Intro</a>   <!-- resolves to https://example.com/docs/intro.html -->
  <a href="#anchor">Jump</a>       <!-- resolves to https://example.com/docs/#anchor -->
</body>
<!-- Also sets default link target -->
<base href="/" target="_blank">

Page Skeleton Variants

With Google Fonts and Open Graph

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page | My Site</title>
  <meta name="description" content="A great page about things.">

  <!-- Open Graph -->
  <meta property="og:title" content="My Page">
  <meta property="og:description" content="A great page about things.">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/my-page">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="My Page">
  <meta name="twitter:image" content="https://example.com/og.jpg">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="canonical" href="https://example.com/my-page">

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <!-- content -->
  <script src="/app.js" defer></script>
</body>
</html>

SPA shell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App</title>
  <link rel="stylesheet" href="/assets/index.css">
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/assets/index.js"></script>
</body>
</html>