HTML writingsuggestions Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The writingsuggestions attribute is a global HTML attribute that provides hints to the browser or user agent about the types of writing suggestions it may offer to the user when they are entering text into an editable field. This attribute is particularly useful in contexts where a web application wants to influence the suggestions provided by spell checkers, virtual keyboards, or other text input enhancement tools.

Purpose

The main purpose of writingsuggestions is to improve the quality and relevance of text input suggestions. By specifying the expected type of input, developers can help user agents provide more appropriate autocompletion, correction, or recommendation options.

Attribute Values

The writingsuggestions attribute can accept the following predefined keywords, or a comma-separated list of them:

none – No suggestions should be provided. The browser or input method should avoid offering corrections or suggestions for the content.
spell – The user agent may provide spelling suggestions for the input.
grammar – Grammar suggestions can be offered, such as punctuation or sentence structure corrections.
list – Provides a set of predefined suggestions for the input, often from a datalist element associated with the input field.
phrases – Suggests entire phrases or common word combinations instead of single-word corrections.

Developers can combine multiple values by separating them with spaces. For example:

<input type="text" writingsuggestions="spell grammar">

This indicates that both spelling and grammar suggestions are desired for this input field.

Usage Context

The writingsuggestions attribute is typically used on:

<input> elements (type="text", email, search, etc.)
<textarea> elements
Any element with the contenteditable attribute

Example

<!-- Input field with spelling suggestions only -->
<input type="text" writingsuggestions="spell" placeholder="Enter your name">

<!-- Textarea with spelling and grammar suggestions -->
<textarea writingsuggestions="spell grammar" rows="4" cols="50">
Type your essay here...
</textarea>

<!-- Input field with no suggestions -->
<input type="text" writingsuggestions="none" placeholder="Sensitive input">

Notes

The writingsuggestions attribute is advisory. User agents are not required to follow it and may ignore it depending on their capabilities.
It is complementary to other input-related attributes such as autocomplete, autocorrect, and spellcheck, which control different aspects of text input behavior.
This attribute can help improve user experience in forms where input correctness or suggestions are important, such as writing applications, comment sections, or email composition interfaces.

Syntax

<element writingsuggestions="value">

Values

noneNo suggestions should be provided. The browser or input method should avoid offering corrections or suggestions for the content.
spellThe user agent may provide spelling suggestions for the input.
grammarGrammar suggestions can be offered, such as punctuation or sentence structure corrections.
listProvides a set of predefined suggestions for the input, often from a datalist element associated with the input field.
phrasesSuggests entire phrases or common word combinations instead of single-word corrections.

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Writing Suggestions Example</title>

</head>

<body>

  <h1>HTML writingsuggestions Attribute Demo</h1>



  <!-- Input with spelling suggestions only -->

  <label for="name">Name (spell check only):</label>

  <input type="text" id="name" writingsuggestions="spell" placeholder="Enter your name">

  <br><br>



  <!-- Textarea with spelling and grammar suggestions -->

  <label for="essay">Essay (spell + grammar suggestions):</label>

  <textarea id="essay" writingsuggestions="spell grammar" rows="4" cols="50">

Type your essay here...

  </textarea>

  <br><br>



  <!-- Input with phrase suggestions -->

  <label for="greeting">Greeting (phrase suggestions):</label>

  <input type="text" id="greeting" writingsuggestions="phrases" placeholder="Hello, how are you?">

  <br><br>



  <!-- Input with no suggestions -->

  <label for="password">Password (no suggestions):</label>

  <input type="password" id="password" writingsuggestions="none" placeholder="Enter password">

</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML writingsuggestions global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.