<datalist> Tag Syntax

<body>
   ...
   ... phrasing content expected ...
   <datalist id="...">
      <option value="..." label="...">... text content ...</option>
      ... phrasing content ...
   </datalist>...
   ...
</body>
Rules for coding HTML datalist elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Code the datalist element where phrasing content is expected.
  2. Begin the datalist element with a starting <datalist> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Inside the <datalist> starting tag, include an id attribute that can be used to refer to the data list.
  4. Inside the datalist element, between the starting <datalist> tag and the ending </datalist> tag, code the option elements for the predefined suggestions.
  5. Also inside the datalist element,code the fallback text and/or phrasing content.
  6. End the datalist element with a matching </datalist> closing tag.
datalist Content Model
Content of the datalist element

The content of the datalist element consists of a list of option elements along with fallback content for browsers that do not support the <datalist> tag.

Note that the options cannot be grouped with the <optgroup> tag like the options in a <select> list can.

According to the HTML 5 specifications:

In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

However, this applies only to browsers that support the <datalist> tag. Browsers that do not support <datalist> will display the content of the datalist element, including the text content of any child option elements. See the examples of the <datalist> tag below for how to hande this.