Everything in one place
Use this chapter as a quick reference once you've worked through the rest of the course. It collects every core construct of HTML into runnable, copy-pasteable snippets you can scan whenever you forget the exact syntax.
Hello world & variables
```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello</title></head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Welcome to my site
```Data types & operators
```html
<!-- HTML content types include text, links, images, lists and forms -->
<p>Text content</p>
<a href="/about">A link</a>
<img src="logo.png" alt="Logo">
<ul><li>Item</li></ul>```
Conditionals & loops
```html
<!-- HTML alone cannot branch. Modern frameworks (React, Vue) add conditional rendering, but raw HTML simply displays whatever markup it contains. -->
<div hidden>This will not show</div>
- Apple
- Banana
- Cherry
Functions & arrays
```html
<!-- The closest thing to a function in HTML is a reusable component (custom element) -->
<template id="card">
<article><h2><slot name="title"></slot></h2></article>
</template>- JavaScript
- Python
- HTML
- CSS
Strings & objects
```html
<p>Text content with <strong>bold</strong> and <em>italic</em> inside.</p>
<p>Use &copy; for © symbols.</p>Errors, modules & I/O
```html
<!-- Invalid HTML rarely throws an error. Browsers do their best to render anyway, which is why you should validate your pages: -->
<!-- https://validator.w3.org -->
```
How to use this page
Bookmark it. When you start a new project, open this cheatsheet alongside your editor and use it as a syntax lookup. Once a construct becomes second nature you'll stop needing the reference for it — and that's exactly when you know you've mastered that part of HTML.