HTML <search> Tag

The HTML <search> tag is a semantic element that defines a search or filter section within a document. It helps to structure content logically and improves accessibility, particularly for screen readers, by clearly identifying where search functionality is located on a page. While it doesn't provide the actual search functionality itself, it acts as a container for input elements, labels, and controls that are involved in searching, filtering or navigating through content.

Syntax

<search>
  <!-- Search elements go here, like input fields, labels, buttons -->
</search>

Attributes

The <search> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|———–|——–|————-|
| accesskey | character | Specifies a keyboard shortcut to activate/focus an element. |
| class | classname | Specifies one or more class names for an element (refers to a class in a style sheet). |
| contenteditable | true | false | Specifies whether the content of an element is editable or not |
| dir | ltr | rtl | auto | Specifies the text direction for the content of an element.|
| draggable| true | false | auto | Specifies whether an element is draggable |
| hidden| hidden | Specifies that an element is not yet, or is no longer, relevant.|
| id | id | Specifies a unique id for an element. |
| lang | _languagecode | Specifies the language of the content within an element. |
| spellcheck | true | false | Specifies whether spellcheck is enabled for the element. |
| style | _CSSproperties | Specifies an inline CSS style for an element. |
| tabindex | number | Specifies the tabbing order of an element. |
| title | text | Specifies extra information about an element. |
| translate| yes | no | Specifies whether the content of an element should be translated or not. |

Example

<search>
  <label for="site-search">Search this site:</label>
  <input type="search" id="site-search" name="q" aria-label="Search the site">
  <button>Search</button>
</search>

More Examples

Basic Search Bar

This example demonstrates a basic search bar with a label, an input field, and a button. The aria-label attribute enhances accessibility for screen readers, which is particularly helpful when the label is not readily visible.

<search>
  <label for="product-search">Search Products:</label>
  <input type="search" id="product-search" name="product-query" placeholder="Enter product name" aria-label="Search Products">
  <button>Search</button>
</search>

Search With Advanced Options

This example includes additional controls like checkboxes for filtering options within the search section, demonstrating it can contain multiple search and filter controls.

<search>
  <label for="article-search">Search Articles:</label>
  <input type="search" id="article-search" name="article-query" placeholder="Enter keywords" aria-label="Search Articles">

  <label>
    <input type="checkbox" name="filter-date" value="last-month"> Last Month
  </label>
    <label>
    <input type="checkbox" name="filter-date" value="last-year"> Last Year
  </label>
    <label>
    <input type="checkbox" name="filter-category" value="tech"> Technology
  </label>
  <button>Filter</button>
</search>

Search Container with Custom Styling

The <search> tag works well with styling using CSS. This example shows a customized search container with added styling for better visual appearance and user experience.

<search style="border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; display: flex; gap: 5px;">
  <label for="custom-search" style="margin-right: 10px;">Find a Course:</label>
  <input type="search" id="custom-search" name="course-query" placeholder="Course name" aria-label="Search Courses" style="padding: 8px; border: 1px solid #ddd; flex: 1;">
  <button style="padding: 8px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Search</button>
</search>

Browser Support

The <search> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <search> tag is a semantic element, which means it helps to provide meaning and structure to the content of a webpage.
• The search element does not provide actual search functionality, it just labels the element with the search semantic.
• Use the <label> element with the for attribute to associate labels with search input fields, enhancing accessibility.
• The aria-label attribute can be used to provide more information to screen readers, especially when the label is not visually present.
• Always provide an accessible experience by ensuring search elements are usable with keyboard navigation.
• Combine with CSS to customize the search sections for a consistent UI in your applications.
• Use it for search inputs, advanced filtering or navigation elements where you allow users to search within the content.