The HTML spellcheck attribute specifies whether the browser should check the spelling of text entered or displayed within an editable element. It is useful for text fields, text areas, editable paragraphs, and online writing tools.
For example, you can enable spell checking in a comment box so users can identify spelling mistakes while typing.
In this tutorial, you will learn how the HTML spellcheck attribute works, its supported values, and how to use it with practical examples.
What Is the HTML Spellcheck Attribute?
The spellcheck attribute indicates whether an element’s text should be checked for spelling errors by the browser’s spell-checking feature.
Here is a simple example:
<textarea spellcheck="true">
Type your message here.
</textarea>
When spell checking is supported and enabled in the browser, misspelled words may be underlined while the user types.
The attribute is a global HTML attribute, so it can be used with many HTML elements. Learn more in our guide to HTML global attributes.
HTML Spellcheck Attribute Values
The spellcheck attribute has two primary values:
| Value | Description |
|---|---|
true | Requests that spelling be checked |
false | Indicates that spelling should not be checked |
Example:
<p contenteditable="true" spellcheck="true">
You can edit this text and check its spelling.
</p>
<textarea spellcheck="false">
Type text without requesting spell checking.
</textarea>
In the first example, the editable paragraph requests spell checking. In the second example, the text area indicates that spell checking should be disabled.
The actual behavior depends on browser support, user settings, and available language dictionaries.
Using Spellcheck with an Input Field
You can enable spell checking on a text input.
<label for="username">Enter your name:</label>
<input
type="text"
id="username"
spellcheck="true">
The browser may check the spelling of text entered into the field.
However, spell checking is not equally useful for every type of input. Usernames, email addresses, product codes, and other values may contain unusual words that are not spelling mistakes.
For that reason, choose the spellcheck setting based on the kind of information users enter.
To learn more about text-entry controls, read our guide to HTML text fields.
Using Spellcheck with a Textarea
The textarea element is commonly used for comments, feedback, messages, and longer text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Spellcheck Example</title>
</head>
<body>
<h1>Write Your Feedback</h1>
<label for="feedback">Your feedback:</label>
<textarea
id="feedback"
rows="5"
cols="40"
spellcheck="true"
placeholder="Write your feedback here..."></textarea>
</body>
</html>
This example creates a feedback area that requests browser spell checking. Users may see spelling suggestions depending on their browser and settings.
You can also explore the HTML textarea tutorial to learn more about creating multiline text fields.
Using Spellcheck with Content Editable
The spellcheck attribute can also be used with elements that users can edit directly.
<div contenteditable="true" spellcheck="true">
Click here and write your article.
</div>
The contenteditable attribute allows users to edit the content, while spellcheck="true" requests spelling checks.
This combination is useful for simple note-taking interfaces, blog editors, and online writing applications.
For more details, see our guide to the HTML contenteditable attribute.
Important Things to Remember
- The
spellcheckattribute requests or disables spelling checks. - Use
spellcheck="true"to request checking andspellcheck="false"to turn it off. - Spell checking depends on browser capabilities, settings, and available dictionaries.
- The attribute does not automatically correct misspelled words.
- Spell checking is not the same as grammar checking.
- Use it where spelling assistance is useful, especially in longer text fields.
Frequently Asked Questions
Is the HTML spellcheck attribute Boolean?
No. It is an enumerated attribute with values such as true and false. Use an explicit value to communicate the intended behavior.
Does spellcheck automatically fix spelling mistakes?
No. Browsers may underline misspelled words or offer suggestions, but the user generally chooses whether to apply a correction.
Can I use spellcheck with a textarea?
Yes. The textarea element supports the spellcheck attribute, making it useful for comments, feedback, and longer messages.
Does spellcheck work in every browser?
Support and behavior vary. The browser’s spell-checking settings, language configuration, and available dictionaries can affect the results.
Should I enable spellcheck for email fields?
Usually, email addresses do not benefit much from ordinary spelling checks. Choose the setting according to your application’s needs and test it in your target browsers.