What is the StudyGrid HTML tutorial?

The StudyGrid HTML tutorial is a full beginner track: tags, headings, links, images, tables, layout, forms, and media. Each chapter has copy-and-run examples.

Should I run html examples examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn html examples in this HTML HTML lesson (HTML Examples).

Is the HTML editor the same as Try Python?

No. Try HTML is a live page preview at /html/try. Try Python stays at /try and runs Python. HTML lessons never open the Python editor.

Do I need to install anything to learn HTML?

No. Open a chapter, click Try it in HTML, and the page preview updates in the browser. You can also download a .html file and open it locally.

Where should I start the HTML tutorial?

Start at HTML Intro, then Basic, Elements, and Attributes. After the first document, continue to headings, links, and forms. Use Next at the bottom of each chapter.

Is the HTML tutorial free?

Yes. The HTML studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.

HTML Examples | StudyGrid

120 copy-and-run snippets. Open one in Try HTML at /html/try, change a value, and run it again. Each language has its own shelf and its own editor.

Start

Page skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Studio</title>
</head>
<body>
  <h1>Hello, HTML</h1>
</body>
</html>

Language and charset

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Charset</title>
</head>
<body>
  <p>Text is UTF-8.</p>
</body>
</html>

Page title

<title>Cafe menu · StudyGrid</title>
<h1>Cafe menu</h1>

Comment

<!-- Hours change on holidays -->
<p>Open 8–16</p>

Text

Heading outline

<h1>Bakehouse</h1>
<h2>Today</h2>
<h3>Sourdough</h3>

Paragraphs

<p>Sourdough, tomato, olive oil.</p>
<p>Espresso until 16:00.</p>

Line break

<p>Studio<br>Harbor Street 12</p>

Bold and italic

<p><strong>Open</strong> today. <em>Come early.</em></p>

Mark and small

<p><mark>New</mark> rye. <small>Baked at 6am.</small></p>

Quote

<blockquote>
  <p>Bread is a kind of calendar.</p>
</blockquote>

Inline quote

<p>The baker said <q>use a hot oven</q>.</p>

Abbreviation

<p><abbr title="HyperText Markup Language">HTML</abbr> structures a page.</p>

Inline color

<p style="color:#c2410c">This line is clay orange.</p>

Background color

<p style="background:#ffedd5;padding:0.6rem">Warm paper.</p>

Text align

<p style="text-align:center">Centered title line</p>

CSS in a style tag

<style>
  h1 { color: #9a3412; }
  p { color: #57534e; }
</style>
<h1>Studio</h1>
<p>Harbor Street</p>

Preformatted

<pre>open  08:00
close 16:00</pre>

Horizontal rule

<h2>Menu</h2>
<hr>
<p>Sourdough</p>

Superscript

<p>Area = 3<sup>2</sup> m</p>

Links and media

Text link

<p><a href="/html/intro">Open the HTML intro</a></p>

Link in a new tab

<a href="https://studygrid.dev" target="_blank" rel="noopener">StudyGrid</a>

Email link

<a href="mailto:hello@example.com">Write the studio</a>

Image with alt

<img src="https://picsum.photos/seed/bread/320/180" alt="A loaf on a board" width="320" height="180">

Figure caption

<figure>
  <img src="https://picsum.photos/seed/cafe/320/160" alt="Cafe window" width="320" height="160">
  <figcaption>Harbor Street window</figcaption>
</figure>

Image as a link

<a href="/html">
  <img src="https://picsum.photos/seed/mark/80/80" alt="Go to HTML home" width="80" height="80">
</a>

Unordered list

<ul>
  <li>Espresso</li>
  <li>Still water</li>
  <li>Tomato toast</li>
</ul>

Ordered list

<ol>
  <li>Mix</li>
  <li>Proof</li>
  <li>Bake</li>
</ol>

Description list

<dl>
  <dt>Open</dt>
  <dd>08:00–16:00</dd>
  <dt>Closed</dt>
  <dd>Monday</dd>
</dl>

Nested list

<ul>
  <li>Breads
    <ul>
      <li>Rye</li>
      <li>Sourdough</li>
    </ul>
  </li>
</ul>

Basic table

<table border="1">
  <tr><th>Item</th><th>Price</th></tr>
  <tr><td>Espresso</td><td>3</td></tr>
  <tr><td>Toast</td><td>6</td></tr>
</table>

Table header scope

<table>
  <caption>Hours</caption>
  <tr><th scope="col">Day</th><th scope="col">Open</th></tr>
  <tr><td>Tue</td><td>8–16</td></tr>
</table>

Favicon link

<link rel="icon" href="/favicon.svg">
<p>The tab icon is set in head.</p>

File path note

<p>Images live in <code>/images/loaf.jpg</code>.</p>

Audio controls

<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
  Audio not supported.
</audio>

Video controls

<video controls width="280" poster="https://picsum.photos/seed/film/280/120">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  Video not supported.
</video>

YouTube embed

<iframe width="280" height="158" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>

Iframe page

<iframe src="/html/intro" title="HTML intro" width="280" height="160"></iframe>

Layout

Div group

<div style="padding:1rem;background:#ffedd5">
  <h2>Today</h2>
  <p>Tomato toast.</p>
</div>

Span inline

<p>Status: <span style="color:#16a34a">open</span></p>

Class names

<style>.card{border:1px solid #fdba74;padding:0.8rem}</style>
<div class="card">A card with a class.</div>

Id target

<h2 id="hours">Hours</h2>
<p><a href="#hours">Jump to hours</a></p>

Semantic header

<header>
  <h1>Cafe menu</h1>
  <p>Harbor Street</p>
</header>

Nav links

<nav>
  <a href="/html">Home</a>
  <a href="/html/forms">Forms</a>
</nav>

Main and footer

<main>
  <h1>Studio</h1>
  <p>Write a page. See the page.</p>
</main>
<footer>StudyGrid HTML</footer>

Article

<article>
  <h2>Rye notes</h2>
  <p>Proof overnight.</p>
</article>

Aside

<aside>
  <p>Tip: preheat the stone.</p>
</aside>

Section

<section>
  <h2>Drinks</h2>
  <p>Espresso and water.</p>
</section>

Two columns

<div style="display:flex;gap:1rem">
  <div>Menu</div>
  <div>Hours</div>
</div>

Responsive width

<img src="https://picsum.photos/seed/wide/600/180" alt="Wide loaf" style="max-width:100%;height:auto">

Viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1">
<p>This page scales on a phone.</p>

Entity ampersand

<p>Toast &amp; tomato</p>

Entity quotes

<p>&ldquo;Come early&rdquo;</p>

Non-breaking space

<p>Room&nbsp;12 stays together.</p>

Forms

Simple form

<form action="#" method="get">
  <label>Name <input name="name"></label>
  <button type="submit">Send</button>
</form>

Text input

<label>Email <input type="email" name="email" placeholder="you@studio.test"></label>

Password input

<label>Password <input type="password" name="pw"></label>

Number input

<label>Loaves <input type="number" name="n" min="1" max="12" value="2"></label>

Checkbox

<label><input type="checkbox" name="rye" checked> Rye</label>

Radio buttons

<label><input type="radio" name="size" value="s"> S</label>
<label><input type="radio" name="size" value="l" checked> L</label>

Select menu

<label>City
  <select name="city">
    <option>Oslo</option>
    <option selected>Lisbon</option>
  </select>
</label>

Textarea

<label>Note
  <textarea name="note" rows="3">Hold the sesame.</textarea>
</label>

Date input

<label>Pickup <input type="date" name="when" value="2026-08-19"></label>

Range input

<label>Heat <input type="range" min="1" max="10" value="7"></label>

Color input

<label>Accent <input type="color" value="#c2410c"></label>

File input

<label>Photo <input type="file" name="photo" accept="image/*"></label>

Required field

<form action="#">
  <input name="name" required placeholder="Your name">
  <button>Send</button>
</form>

Disabled button

<button type="button" disabled>Sold out</button>

Fieldset legend

<fieldset>
  <legend>Pickup</legend>
  <label><input type="radio" name="p" checked> Now</label>
  <label><input type="radio" name="p"> Later</label>
</fieldset>

Label for id

<label for="n1">Table</label>
<input id="n1" name="table">

Search input

<input type="search" name="q" placeholder="Search the menu">

Telephone input

<label>Phone <input type="tel" name="tel" placeholder="+47 555 12 12"></label>

URL input

<label>Site <input type="url" name="url" placeholder="https://"></label>

Hidden field

<form action="#">
  <input type="hidden" name="source" value="html-examples">
  <button>Book</button>
</form>

Graphics and script

Button

<button type="button">Toast is ready</button>

Canvas box

<canvas id="board" width="240" height="80" style="border:1px solid #c2410c"></canvas>

Canvas draw

<canvas id="c" width="240" height="80"></canvas>
<script>
const ctx = document.getElementById("c").getContext("2d");
ctx.fillStyle = "#c2410c";
ctx.fillRect(20, 20, 80, 40);
</script>

SVG circle

<svg width="120" height="80" viewBox="0 0 120 80">
  <circle cx="60" cy="40" r="28" fill="#ea580c" />
</svg>

SVG rectangle

<svg width="160" height="70">
  <rect x="10" y="15" width="140" height="40" rx="8" fill="#fdba74" />
</svg>

Inline script

<p id="out">…</p>
<script>
document.getElementById("out").textContent = "HTML ran a script.";
</script>

Click handler

<button id="go" type="button">Mark open</button>
<p id="state">closed</p>
<script>
document.getElementById("go").onclick = () => {
  document.getElementById("state").textContent = "open";
};
</script>

Local storage write

<button id="save" type="button">Remember rye</button>
<p id="out"></p>
<script>
document.getElementById("save").onclick = () => {
  localStorage.setItem("bread", "rye");
  document.getElementById("out").textContent = localStorage.getItem("bread");
};
</script>

Session storage

<script>
sessionStorage.setItem("seat", "12");
document.body.insertAdjacentHTML("beforeend", "<p>Seat " + sessionStorage.getItem("seat") + "</p>");
</script>

Progress bar

<progress value="70" max="100">70%</progress>

Meter

<meter min="0" max="10" value="7">7 of 10</meter>

Details summary

<details>
  <summary>Allergens</summary>
  <p>Contains gluten and sesame.</p>
</details>

Time element

<p>Opens <time datetime="2026-08-19T08:00">19 Aug, 08:00</time></p>

Address

<address>
  Harbor Street 12<br>
  Lisbon
</address>

Picture source

<picture>
  <source media="(max-width: 500px)" srcset="https://picsum.photos/seed/sm/240/120">
  <img src="https://picsum.photos/seed/lg/400/160" alt="Loaf">
</picture>

Map area

<img src="https://picsum.photos/seed/map/240/120" alt="Shop map" usemap="#shop">
<map name="shop">
  <area shape="rect" coords="0,0,120,120" href="/html" alt="Counter">
</map>

Iframe title

<iframe title="Blank note" width="240" height="100" srcdoc="<p>Inner page</p>"></iframe>

Noscript

<noscript>Turn on JavaScript to try the live preview extras.</noscript>
<p>The page still has text.</p>

Keyboard kbd

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save locally.</p>

Code sample

<p>The tag is <code>&lt;h1&gt;</code>.</p>

Output live

<form oninput="out.value = Number(a.value) + Number(b.value)">
  <input id="a" type="number" value="3"> +
  <input id="b" type="number" value="4"> =
  <output id="out" for="a b">7</output>
</form>

Wbr opportunity

<p>HarborStreet<wbr>Studio<wbr>Lisbon</p>

Ruby annotation

<p><ruby>HTML<rt>markup</rt></ruby></p>

Data value

<p>Price <data value="6">six euro</data></p>

Dialog polyfill-free

<p>Use a heading and a form instead of a native dialog for this preview.</p>
<section>
  <h2>Book a loaf</h2>
  <button type="button">Close</button>
</section>

Accessible button

<button type="button" aria-pressed="false">Subscribe</button>

Skip link

<a href="#content">Skip to content</a>
<main id="content"><h1>Menu</h1></main>

Lang on a phrase

<p>Today: <span lang="fr">pain de seigle</span></p>

Dir rtl phrase

<p dir="rtl">مرحبا</p>

Title tooltip

<p title="Baked at 6am">Rye</p>

Contenteditable

<p contenteditable="true">Edit this line in the preview.</p>

Draggable text

<p draggable="true">Drag this line in a supporting browser.</p>

Ol reversed

<ol reversed>
  <li>Cool</li>
  <li>Bake</li>
  <li>Proof</li>
</ol>

Start attribute

<ol start="7">
  <li>Seat seven</li>
  <li>Seat eight</li>
</ol>

Table colspan

<table border="1">
  <tr><th colspan="2">Cafe</th></tr>
  <tr><td>Open</td><td>8–16</td></tr>
</table>

Table rowspan

<table border="1">
  <tr><th rowspan="2">Hours</th><td>Tue 8–16</td></tr>
  <tr><td>Wed 8–16</td></tr>
</table>

Empty alt decorative

<p>Menu <img src="https://picsum.photos/seed/dot/16/16" alt="" width="16" height="16"> Harbor</p>

STEM

Ammeter page

<h1>Ammeter reading</h1>
<p>Current I = 0.45 A</p>

Lab report outline

<h1>Free-fall write-up</h1>
<h2>Aim</h2>
<p>Measure s after 1 s, 2 s, and 3 s from rest.</p>
<h2>Results</h2>
<p>Gaps grow because speed increases.</p>

Titration table

<table>
  <caption>HCl vs NaOH titres</caption>
  <tr><th>Run</th><th>mL</th></tr>
  <tr><td>1</td><td>24.8</td></tr>
  <tr><td>2</td><td>25.1</td></tr>
</table>

Fever warning

<p>Oral 38.4 °C. <strong>Treat as fever.</strong></p>

Clinic booking

<form action="#">
  <label>Name <input name="name" required></label>
  <label>Date <input type="date" name="when"></label>
  <button>Book</button>
</form>

Vitals card

<div style="background:#fef3c7;padding:0.8rem">
  <h2>Vitals</h2>
  <p>36.8 °C · 72 bpm</p>
</div>

H2O with sub

<p>Water is H<sub>2</sub>O. Area 3<sup>2</sup> m<sup>2</sup>.</p>

pH bands

<p style="background:#b91c1c;color:#fff;padding:0.4rem">pH 1 acid</p>
<p style="background:#166534;color:#fff;padding:0.4rem">pH 7 neutral</p>

3-4-5 triangle

<h1>Right triangle</h1>
<p>Sides: 3 m, 4 m, 5 m</p>