HTML typing practice
HTML typing practice drills the sequences markup repeats endlessly: the shifted angle brackets
wrapping every tag, the =" that opens every attribute value, the slash that starts
every closing tag, and hyphenated names like data- and aria-. The
closing tag is a motor pattern of its own.
Just start typing. Errors are marked and cannot be backspaced — accuracy first.
Markup is punctuation with words in between
Count the characters in a line you have typed a thousand times:
<a class="nav-link" href="/about/">About</a>. Forty-eight characters,
of which fifteen are punctuation, and eleven of the fifteen need Shift. The visible words are
a small minority of the keystrokes. That ratio is what makes markup feel slow to type even for
people who are genuinely fast at prose, and it is why a words-per-minute score measured on
English tells you almost nothing about how quickly you can write a template.
HTML is also the language people most often write outside a proper editor. Markup ends up in email templates, in content fields, in documentation, in support replies, in a Jira comment. In all of those places the tooling that has been closing your tags for years is simply absent, and what is left is whatever your hands actually know.
Both angle brackets are shifted, and they sit on the left hand
The less-than sign is Shift plus comma and the greater-than is Shift plus period, which places both of them on the left middle and left ring fingers, on the bottom row, with the right hand holding Shift. That is the reverse of the arrangement most symbols use, and it is worth knowing, because it means every single tag you write is a left-hand movement.
A single element needs four of them at a minimum: two to open the tag, two to close it. A short list with five items needs twenty-four. There is no other character in common use that arrives in that volume, on the bottom row, always shifted.
The attribute opener is the most repeated pair in the language
Every attribute with a value goes through the same two keystrokes. The equals sign is an unshifted top-row reach for the right little finger; the double quote is Shift plus the apostrophe key, which is that same little finger back down beside its home position, with Shift now held. One finger, two rows, and a Shift that turns on between the two presses.
Then the value gets typed and the finger comes back for the closing quote. So every single attribute costs three presses from the weakest finger on your right hand, plus two shift transitions, before you have written anything meaningful. An anchor with a class and an href pays that four times. This is the sequence to drill if you drill only one.
The closing tag is a motor pattern of its own
Typing </div> means Shift plus comma, then the slash unshifted, then three
letters, then Shift plus period. Look at what the left little finger has to do there: hold
Shift for the opening bracket, release it for exactly one keystroke while the right hand
strikes the slash, then take Shift again a moment later.
That release-and-retake in the middle of a three-character sequence is the whole difficulty, and it produces a recognisable set of typos. Shift held a beat too long gives you a question mark instead of a slash. Shift dropped early turns the closing bracket into a full stop. The slash arriving before the bracket gives you the self-closing form when you wanted a closing tag. None of these are letter errors, and none of them get better by typing more prose.
Self-closing tags run the same three keys in a different order
A void element like <br /> or an image tag reverses it: the slash comes
before the closing bracket, so the pattern is slash then Shift rather than Shift off, slash,
Shift on. The characters are identical and the movement is not, which is exactly the kind of
near-miss that motor learning handles badly. If you write both plain HTML and a
component-based framework, you are alternating between these two orderings all day.
Hyphenated names, and the finger they share with Python
HTML is full of hyphens in places other languages would not put them:
data- attributes, every aria- attribute, http-equiv,
accept-charset, and the class naming conventions almost every codebase uses. The
hyphen is an unshifted reach up and out for the right little finger.
It is worth noticing that this is the same key Python's underscore uses, one shift state apart. If you write both, that single finger is carrying the naming convention of both languages, which is a good argument for drilling the reach itself rather than either character in isolation.
What editors hide, and why it matters anyway
Emmet expansions, tag auto-closing and attribute autocomplete are good tools and nobody should switch them off to feel virtuous. What they do is make the weakness invisible: you can be genuinely productive in your editor and still be unable to type a closing tag smoothly, because you have not typed one in years.
The gap is only ever exposed somewhere else, which is precisely where it is most expensive. Fixing broken markup in a production content field, writing an example in a review comment, pasting a snippet into a chat, editing a template over SSH. Those are the moments this drill is for, and they are also the moments where a typo is most likely to ship.
How to practise this
Short sessions, accuracy over speed, and type the snippet exactly as written including its indentation. Pay attention specifically to whether you can produce a closing tag without pausing before the slash, since that pause is the reliable tell that the pattern has not been learned yet. Ten minutes a day for a week or two is enough to change it.
If the alphabet is not yet automatic, start there instead of here, and follow the step-by-step guide to learning touch typing. If you write more than markup, the other two tracks are Python typing practice, built around colons, underscores and indentation, and C++ typing practice, built around braces, semicolons and the scope operator.
Frequently asked questions
Is HTML typing practice worth it when my editor auto-closes tags?
It is worth it precisely because your editor does. Emmet and tag auto-closing mean a lot of people have written markup for years without ever typing a closing tag by hand, so the pattern was never learned. It comes due the moment you are writing markup somewhere without those tools: a CMS field, an email template, a chat message, a code review comment, a documentation page, a plain text editor on someone else machine.
What is genuinely the hardest thing to type in HTML?
Two things compete. The first is the sequence that opens an attribute value, because it puts an unshifted key and a shifted key on the same little finger one after the other. The second is the closing tag, where the slash sits between two shifted angle brackets, so the left little finger has to release Shift for exactly one keystroke and then take it again. Both are short, both are constant, and both are where the errors cluster.
Do these drills cover CSS and JavaScript too?
No, this track is markup. There is real overlap at the edges, since class names carry the same hyphens and CSS uses the same braces and semicolons the C++ track drills, but the characteristic rhythm of HTML is angle brackets and quoted attributes and that is what these snippets are built around. Practising the thing you actually write beats practising an average of everything.
Does this help with JSX, Vue or Svelte templates?
Yes, for the most part. Component syntax keeps the angle brackets, the quoted attributes and the closing-tag rhythm essentially intact, so the motor patterns carry over directly. What it does not cover is the brace interpolation those frameworks add, which is closer to the f-string pattern on the Python track than to anything in plain markup.
How long is each drill?
A few lines of real markup, which usually takes well under a minute. That is deliberate: the value in symbol practice comes from finishing a snippet cleanly and starting another, not from grinding a long passage. Ten minutes gets you a useful number of repetitions on every character that matters here.
My keyboard layout makes angle brackets awkward. Does that change the advice?
The reaches differ by layout, and on several non-US layouts the angle brackets and the slash sit somewhere else entirely, sometimes behind a third modifier. The principle survives the change: find which characters your layout makes expensive, and drill those rather than assuming the difficulty is where an article says it is. The drills here are written and described for a standard US layout.