Know the “search” Element

Published on June 19, 2024, filed under Web Development (RSS feed for all categories).

You know that at the moment, there are 112 elements in HTML (not counting math, svg, and custom elements, which is important to note). Do you know element #112, i.e., the latest member of the HTML elements family?

What element? The search element—as of this writing, the latest element addition to HTML, which became part of HTML on March 24, 2023.

What does it do? What does it mean?

Here’s its definition:

The search element represents a part of a document or application that contains a set of form controls or other content related to performing a search or filtering operation. This could be a search of the website or application; a way of searching or filtering search results on the current web page; or a global or Internet-wide search function.

However, note:

It’s not appropriate to use the search element just for presenting search results, though suggestions and links as part of “quick search” results can be included as part of a search feature. Rather, a returned web page of search results would instead be expected to be presented as part of the main content of that web page.

Now, can we find the element in use somewhere?

From searching GitHub, search doesn’t seem popular yet. However, there are implementations of it. Here’s one:

<search>
  <form action="./search/">
    <label for="movie">Find a Movie</label>
    <input type="search" id="movie" name="q" />
    <button type="submit">Search</button>
  </form>
</search>

Is this valid?

Yes. Likewise, at the time of this chapter’s writing (March 2024), the W3C validator complains (“Element search not allowed as child of element body in this context”), but that looks like an issue with the validator (cf. validator issue #1569). That is, this code isn’t per se bad.

However, it’s not the maximum—or minimum, I suppose—we could get out of this, either. That would look more like the following:

<search>
  <form action=./search/>
    <label for=movie>Find a movie</label>
    <input type=search id=movie name=q>
    <button>Search</button>
  </form>
</search>

What changed?

1. Dropped quotes: If this is the first book you’re reading from this series, all superfluous code (except for whitespace) is being removed. That includes quotes that aren’t strictly necessary. A basic rule I like to work with is that when an attribute value doesn’t contain equal signs or spaces, it’s usually okay to skip the quotes. (It’s not precise, but works well enough.)

2. Removed value defaults: There’s no need to set attributes with values that match the respective attribute’s default. In the case of the button element, this is type=submit (more accurately, the “Submit Button” state.

3. Tweaked case: Assuming the label is not a heading, using title case seems unusual. I’ve adjusted to sentence case.

This isn’t necessarily all we could do. For example, the label could surround the input, allowing us to save the label–input association (id and for). But that’s something we don’t know, and while I do like to make some guesses and assumptions, I’d stop here. Hi search element!

This is from a short book, Upgrade Your HTML V, which I released just six weeks ago.

If you like this, check out the book; if you more-than-like this, check out the series (Amazon, Apple Books, Kobo, Google Play Books, Leanpub)! Cheers!

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you want to do me a favor, interpret charitably (I speak three languages, and they can collide), yet be critical and give feedback for me to learn and improve. Thank you!