Subscribe

HTML spellcheck attribute

✍️

Turning on a spellcheck attribute with the power of HTML

16 Mar, 2021 · 2 min read

Did you know HTML has a spellcheck attribute? It tells the browser if it should spellcheck an area or not.

It’s as simple as adding the spellcheck attribute to an element.

It will look like this:

HTML Spellcheck attribute

HTML Spellcheck attribute

We will use the contenteditable element, I’ll make one with spellcheck and the other not.

<p contenteditable="true" spellcheck="true">
  Did you knoww you can click me to edit my contentz?
</p>
<p contenteditable="true" spellcheck="false">
  Did you knoww you can click me to edit my contentz
</p>

As you can see, both paragraphs have the contenteditable tag, but one has the spellcheck true and one not.

This now allows us to have the native spellchecker on the top one.

Note: Grammarly will still work on both!

You can have a play with the following Codepen to try it out.

See the Pen HTML spellcheck attribute by Chris Bongers (@rebelchris) on CodePen.

Browser support

The spellcheck attribute has good support. You can see partial support in some browsers, mainly depending on which tag you use the spellcheck attribute.

HTML spellcheck browser support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Submit button outside the form

4 Dec, 2022 · 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

Join 2099 devs and subscribe to my newsletter