<search>

The HTML (<input type="search">) element generates a search box, enabling users to enter and submit search queries, often featuring enhancements for a better search experience.

<search> Tag

The <search> tag is not a standard HTML element. Instead, use the <input> element with type="search" to create a search box where users can enter search queries.

Syntax

index.html
<input type="search" name="search" placeholder="Search...">

Search Demo

index.html
<form>
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" placeholder="Enter search terms">
  <button type="submit">Search</button>
</form>

Attributes

This element supports attributes.

Meaning and Purpose

The <search> tag represents a section dedicated to search-related elements, typically including a search form.

By default, the <search> element does not have a unique appearance in browsers, but it can be styled using CSS.

Key Points

  • type="search": Generates a search input field, often with browser enhancements like a clear button.
  • placeholder: Displays a hint within the search field, guiding users on what to enter.

Default CSS Settings

By default, most web browsers render the <search> element with the following preset styles:

style.css
search {
  display: block;
}

See Also

Explore other search-related elements:

<header> <footer> <aside> <nav> <form>

Conclusion

The <search> tag is not a standard HTML element, but the <input> element with type="search" is commonly used to create search boxes. This input type often includes features like a clear button for enhanced user experience. It also supports the placeholder attribute, which guides users on what to enter. While browsers render it as a block-level element by default, it can be styled with CSS to fit design needs.