What's the best semantic way to wrap a search area? [closed]

Question

I'd like to take advantage of the improved semantics of html5. I'm creating a search area, and the search area should have a background and contain search related things, like autocomplete and search hints.

Is there some consensus around what type of element something like a search area should be wrapped in?

• Should it be a NAV because searching is a method of navigation?
• Should it be a SECTION because it's a discreet section of the page?
• Should it be a DIV because the wrapping of search related elements has no clear semantics?

The markup is something like this:

<?whatElement?>
  <input type="search" placeholder="Search for a name or ID..." required />
  <a href="#" class="search button">Search</a>
</?whatElement?>

Thanks for your thoughts.

Basaltware

Answer 1

I am aware this question already has a chosen answer, but it ranked so high in my Google search for "semantic search form" that I feel the need to contribute what I believe to be a slightly better answer, semantically and from a standards standpoint.

<section role="search">
    <form action="#" method="get">
        <fieldset>
            <legend>Search this website:</legend>
            <label for="s">
                <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" />
            </label>
            <button type="submit" title="Search this website now">Submit</button>
        </fieldset>
    </form>
</section>

Of course, I made a series of assumptions and populated the HTML with some default values (action, get, the id and name of the input, etc) and with no classnames for the elements (which I always tend to use in favor of generic element names or, Heaven forbid, IDs) but you should adapt to your own needs.

For example, some additions on top of the excellent contributions above: the first child of any form should always be a <fieldset> tag and have a <legend> attached (visible or not - https://www.w3.org/TR/WCAG20-TECHS/H71.html ), and all <input> tags should have a connected <label> tag through the for and id properties (https://www.w3.org/TR/WCAG20-TECHS/H44.html - I find it easier to just wrap the input in the label so as not to forget connecting them). All call to action elements should have a title (for SEO and usability, to reinforce the action the user is about to make just before she makes it), etc.

Herniotomy

Yeah, the aria stuff is a good addition, thank you. If this becomes doctrinal you might not want to encode s in folks' brains though. – Basaltware

Have some justification (link) for why every form should have a first child of fieldset? I've never heard that, and it comes with styling by default I don't care about. – Basaltware

This describes accessibility techniques for forms: webaim.org/techniques/forms and this is the requirement specification for this particular rule: w3.org/TR/WCAG20-TECHS/H71.html (part of the WCAG 2.0 – Web Content Accessibility Guidelines w3.org/WAI/WCAG20/quickref ). Which reminds me, I have an edit to make to the answer (adding a legend). – Herniotomy

Answer 2

The HTML5 specification says this about the section element:

Role must be either region, document, application, contentinfo, main, search, alert, dialog, alertdialog, status, or log

so I would use that.

Whitehot

Awesome, exactly what I was looking for (a self-justifiable position), thanks. – Basaltware

Answer 3

How about:

<form>
   <input type="search" name="" value="" />
   <input type="submit" value="Search" />
</form>

Practice

I actually had that previously, but Safari mobile adds an irreversible 6px of left and right padding on BUTTON and INPUT type=submit elements, so I went with the fakey button instead. – Basaltware

Your question was about semantics, style can be changed through CSS (thinkvitamin.com/design/…) Without the semantics of the form and input[type=submit] elements you'll loose a lot of good default browser behaviour – Practice

And what about the <label> tag? – Nath

Answer 4

<section role="search">

The role attribute is an ARIA landmark:

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

Mintamintage

Answer 5

Starting March 2023 the <search> element made its way into the spec:

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 web site or application; a way of searching or filtering search results on the current web page; or a global or Internet-wide search function.

Source: https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element

Example of how it's used:

<header>
  <h1>Movie website</h1>
  <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>
</header>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search

Pretty good support: caniuse.com (currently 79%)

Seaton

Why does this have negative upvotes? This is the best and most up-to-date answer to the question. – Tactic