HtmlConceptBeginner · 3 min read

What is spellcheck Attribute in HTML: Definition and Usage

The spellcheck attribute in HTML tells the browser whether to check the spelling and grammar of the text inside an element. It can be set to true to enable spell checking or false to disable it, helping improve user input accuracy.

⚙️

How It Works

The spellcheck attribute acts like a switch that tells the browser if it should look for spelling mistakes in the text a user types or sees. Imagine writing a letter and having a friend who points out spelling errors as you write. This attribute turns that friend on or off for specific parts of a webpage.

By default, browsers usually check spelling in editable areas like text boxes. But sometimes you want to control this behavior, for example, turning off spellcheck in code editors or special input fields where spelling mistakes are expected. Setting spellcheck="true" means the browser will underline misspelled words, while spellcheck="false" stops this checking.

💻

Example

This example shows a text input with spellcheck enabled and a textarea with spellcheck disabled.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spellcheck Attribute Example</title>
</head>
<body>
  <label for="input1">Spellcheck Enabled:</label><br>
  <input type="text" id="input1" spellcheck="true" placeholder="Type here...">
  <br><br>
  <label for="textarea1">Spellcheck Disabled:</label><br>
  <textarea id="textarea1" spellcheck="false" rows="4" cols="30" placeholder="No spellcheck here..."></textarea>
</body>
</html>

Output

A webpage with a text input box that underlines misspelled words and a textarea where no spelling mistakes are highlighted.

🎯

When to Use

Use the spellcheck attribute when you want to control if the browser should check spelling in user input or displayed text. For example:

Enable spellcheck in comment boxes or forms to help users avoid typos.
Disable spellcheck in code editors, password fields, or fields expecting special terms where spell checking is not helpful.
Improve user experience by preventing distracting red underlines where they are not needed.

✅

Key Points

spellcheck can be set to true or false.
It works on editable elements like input, textarea, and contenteditable elements.
By default, browsers enable spellcheck on editable text fields.
Use it to improve or customize user input experience.

✅

Key Takeaways

The spellcheck attribute controls browser spelling and grammar checking on text elements.

Set spellcheck="true" to enable and spellcheck="false" to disable spell checking.

It is useful to improve user input accuracy or avoid unwanted spellcheck in special fields.

Works on inputs, textareas, and contenteditable elements.

Helps create a better user experience by managing when spell checking happens.