HTML

HTML cheat sheet

Every HTML element has one job. This cheat sheet shows you eleven of them — the exact ones that make up Nadia's Wikipedia page.

Start at step one. Each step adds one new element to the page. By step eleven you will have seen how the whole thing is built.

Click Try it on any step to open that code in the live compiler. Change it, break it, fix it. That is how things go in.

The page you are building

Every element in the steps below appears somewhere on this page.

11 elements, one at a time

Each step introduces one element and shows exactly where it appears on Nadia's page.

HTML Skeleton

<!DOCTYPE html><html><head><body>

Every HTML page starts with this structure. The DOCTYPE declares it as HTML5. The head holds invisible metadata like the title. The body holds everything the user sees.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nadia - Wikipedia</title>
</head>
<body>

</body>
</html>

Try it

Heading

<h1>

The h1 is the main title of the page. Every page should have exactly one. It is the largest heading and tells both users and search engines what the page is about.

<h1>Nadia</h1>

Try it

Paragraph

<p>

Paragraphs hold the main body text. Each paragraph gets its own p tag. The browser automatically adds space between paragraphs.

<p>Nadia (born 1988) is an American software engineer,
web developer, educator, and content creator.</p>

Try it

Bold & Italic

<b><i><strong><em>

Use b or strong to bold text. Use i or em to italicise it. strong and em also carry meaning for screen readers — use them when the text is genuinely important, not just styled.

<p><b>Nadia</b> <i>(born 1988)</i> is an American
<strong>software engineer</strong> and <em>educator</em>.</p>

Try it

Links

<a>href

The a tag creates a hyperlink. The href attribute holds the destination URL. Use # as a placeholder when you do not have a real URL yet.

<a href="#">software engineer</a>

Try it

Section Headings

<h2><h3>

Use h2 for main sections and h3 for subsections. Headings create a clear document outline and make long pages easy to scan.

<h2>Career</h2>
<h3>2015–2020: YouTube success</h3>

Try it

Lists

<ul><ol><li>

ul creates an unordered (bullet) list. ol creates an ordered (numbered) list. Each item in a list goes inside an li tag.

<ul>
  <li>Modern JavaScript frameworks</li>
  <li>Backend development with Node.js</li>
  <li>Database design and management</li>
</ul>

Try it

Tables

<table><tr><th><td>

Tables organise data into rows and columns. tr is a table row. th is a header cell (bold by default). td is a regular data cell.

<table border="1">
  <tr>
    <th>Born</th>
    <td>1988</td>
  </tr>
  <tr>
    <th>Nationality</th>
    <td>American</td>
  </tr>
</table>

Try it

Images

<img>srcalt

The img tag displays an image. src is the path to the image file. alt is a text description — always include it for accessibility and for when the image fails to load.

<img src="nadia.jpg" alt="Nadia in 2025">

Try it

Divs

<div>

Divs are invisible containers for grouping elements. They have no default styling. Add inline styles or CSS classes to control how they look and how content inside them is arranged.

<div class="header">
  <b>WIKIPEDIA</b>
</div>

<div class="sidebar">
  <ul>
    <li><a href="#">Early life</a></li>
  </ul>
</div>

<div class="content">
  <h1>Nadia</h1>
</div>

Try it

Forms

<form><input><button>

Forms collect user input. The input tag creates a text field (the type attribute changes it to email, password, checkbox, and more). The button submits the form.

<form>
  <input type="text" placeholder="Search Wikipedia">
  <button type="submit">Search</button>
</form>

Try it

✓

Complete page

All eleven elements together with CSS styling — this is the full Nadia Wikipedia page. Open it in the compiler to explore or modify the complete code.

Open compiler

Want the full explanation for each element?

The cheat sheet gives you the reference. The full course gives you the understanding. Twelve lessons, every concept explained clearly, with hands-on practice in every lesson.

Take the full HTML course