HTML Code Typing Test

100% free
Nonprofit 501(c)(3)
No charges
No ads

Programmers don't type prose - they type symbols. This HTML code typing test uses short, realistic HTML snippets so you can build speed on angle brackets, equals signs, quotes and slashes.

60s left

0 wpm

100% acc

<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>↵<a href="/about" target="_blank">About us</a>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<input type="email" name="email" required />↵<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>↵<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>↵<a href="/about" target="_blank">About us</a>↵<input type="email" name="email" required />↵<input type="email" name="email" required />↵<a href="/about" target="_blank">About us</a>↵<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>↵<a href="/about" target="_blank">About us</a>↵<a href="/about" target="_blank">About us</a>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<a href="/about" target="_blank">About us</a>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<a href="/about" target="_blank">About us</a>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<a href="/about" target="_blank">About us</a>↵<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>↵<a href="/about" target="_blank">About us</a>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<a href="/about" target="_blank">About us</a>↵<input type="email" name="email" required />↵<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>↵<a href="/about" target="_blank">About us</a>↵<div class="card">↵ <h2>Title</h2>↵ <p>Some text.</p>↵</div>↵<input type="email" name="email" required />↵<input type="email" name="email" required />↵<ul>↵ <li>One</li>↵ <li>Two</li>↵</ul>

Click here or press any key to focus

Press Tab to restart. The timer starts with your first keystroke.

Press Enter at the end of each line (shown as ↵) and type the indentation spaces just like in your editor. The timer starts on your first keystroke.

What makes HTML different to type

HTML is mostly angle brackets, attribute names, equals signs and quoted values. Front-end developers type < and > thousands of times a day, so smooth bracket typing makes a real difference.

Type the opening and closing tags in one fluid motion - your right hand handles <, > and / without moving from the home row much.

Does typing speed matter for programmers?

Thinking is the slow part of programming, but typing speed still matters: fast, accurate typing keeps you in flow, makes it painless to write tests and documentation, and means you never avoid a refactor because it's tedious to type. Most professional developers type between 50 and 80 WPM on prose and noticeably slower on code.

Frequently asked questions

Why is my code WPM lower than my normal WPM?

Code has far more symbols, numbers and capital letters than English text, and those keys are farther from the home row. A 20-40% drop is normal.

Do I need to type the indentation?

Yes. Indentation spaces are part of the text, just like in a real editor without auto-indent.

Can I practice with my own code?

Yes - choose Custom and paste any snippet. Line breaks and indentation are preserved.