Geek Answers Handbook

What is the best semantic way to wrap a search field?

I would like to use the improved html5 semantics. I am creating a search area, and the search area should have a background and contain things related to the search, such as autocomplete and search hints.

Is there any consensus on what type of element should look like a search area?

  • Should it be NAV because search is a navigation method?
  • Should there be a SECTION because this is the secret section of the page?
  • Should it be a DIV, because there is no clear semantics in the wrapper of elements related to the search?

The markup looks 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.

+5
source share
4 answers

, , Google " , , , , , .

<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>
Hide result

, HTML (, get, id ..) ( , , ), .

, : <fieldset> <legend> ( - https://www.w3.org/TR/WCAG20-TECHS/H71.html), <input> <label> for id (https://www.w3.org/TR/WCAG20-TECHS/H44.html - , ). ( SEO , , , ) ..

+3

HTML5 section:

, , , contentinfo, main, , , , alertdialog,

.

+6

What about:

<form>
   <input type="search" name="" value="" />
   <input type="submit" value="Search" />
</form>
+5
source 
<section role="search">

role ARIA Landmark Attribute :

An indicative region containing a collection of objects and objects that are generally combined to create a search object.

+4
source

More articles:


All Articles