Hey there, web enthusiasts! It's me, Russell, your shipboard developer.
Before we dive into the fun stuff, a quick heads-up: the search element we're discussing here might not be fully supported by all browsers yet. So, keep that in mind when tinkering with your projects.
Now, let's get to the exciting part—unveiling the search element in HTML!
The search element is designed to group and semantically identify parts of a document or application related to search or filtering functionality.
This can include form controls, quick search results, or other content that assists users in searching or filtering.
The Point of <search>
The search element is not specifically for performing search operations but for organizing search-related content.
Let's explore some examples of how the search element is used to group search-related content:
Example 1: Grouping Search Form in the Header
In this example, a search form is grouped in the header of a web page, making it clear that the content inside is related to searching for articles:
<header>
<h1><a href="/">My fancy blog</a></h1>
...
<search>
<form action="search.php">
<label for="query">Find an article</label>
<input id="query" name="q" type="search">
<button type="submit">Go!</button>
</form>
</search>
</header>
Example 2: Grouping a JavaScript-Powered Search
In this example, JavaScript is used to power the search, and the search element groups the content, providing a clear indication of its purpose:
<search>
<label>
Find and filter your query
<input type="search" id="query">
</label>
<label>
<input type="checkbox" id="exact-only">
Exact matches only
</label>
<section>
<h3>Results found:</h3>
<ul id="results">
<li>
<p><a href="services/consulting">Consulting services</a></p>
<p>
Find out how we can help you improve your business with our integrated consultants, Bob and Bob.
</p>
</li>
...
</ul>
<output id="no-results"></output>
</section>
</search>
Example 3: Grouping Multiple Search Features on a Page
In this example, two search features are grouped within their respective search elements on one page—one for a global site search and another for filtering content on the current page:
<body>
<header>
...
<search title="Website">
...
</search>
</header>
<main>
<h1>Hotels near your location</h1>
<search>
<h2>Filter results</h2>
...
</search>
<article>
<!-- search result content -->
</article>
</main>
</body>
Wrap-up
The search element in HTML is an excellent way to group and semantically identify search and filtering-related content within your web application.
By understanding the purpose of the element, you can create a more organized and user-friendly experience.
Happy coding!
Top comments (0)