【HTML Living Standard】search要素の使い方
search要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
searchオブジェクトは、HTML Living Standardで定義されているセマンティックな要素であり、文書やアプリケーション内で検索機能やフィルタリング操作に関連するコンテンツを含む部分を表すオブジェクトです。具体的には、サイト内検索フォーム、特定の検索結果のリスト、あるいはコンテンツを絞り込むための入力フィールドやボタンなどのインターフェースをマークアップする際に使用されます。
この要素は、単に見た目を整えるだけでなく、ウェブページの構造に意味的な情報を提供します。これにより、検索エンジンがページのどの部分が検索機能として機能しているかをより正確に理解しやすくなるほか、特に支援技術（スクリーンリーダーなど）を利用するユーザーにとってのアクセシビリティが大幅に向上します。例えば、スクリーンリーダーは<search>要素を認識し、ユーザーにページのどこに検索機能があるかを明確に伝えることができるため、ユーザーはより効率的に目的のコンテンツにアクセスできるようになります。
searchオブジェクトの使用は、ウェブサイトのナビゲーションや情報探索のユーザーエクスペリエンスを向上させる上で重要な役割を果たします。文書内に複数の検索機能が存在する場合でも、通常は最も主要な検索機能に対してこの要素を使用することが推奨されますが、それぞれの検索機能が独立したセクションである場合は複数回使用することも可能です。この要素を適切に利用することで、よりセマンティックでアクセシブルなウェブコンテンツの作成に貢献します。
構文(syntax)
1<search> 2</search>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLで検索機能を作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>検索機能のサンプル</title> 7</head> 8<body> 9 <!-- 10 <search>要素は、検索機能に関連するコンテンツの領域を定義します。 11 ウェブサイト内検索などのユーザーインターフェースをセマンティックに表現する際に使用します。 12 --> 13 <search> 14 <!-- 15 <label>要素は、ユーザーインターフェース項目のキャプションを表します。 16 ここでは、入力フィールドが何の目的で使用されるかを明確に示し、アクセシビリティを向上させます。 17 'for'属性は対応する入力要素の'id'属性と一致させる必要があります。 18 --> 19 <label for="site-search">サイト内検索:</label> 20 21 <!-- 22 <input>要素は、ユーザーがデータを入力するためのインタラクティブなコントロールを作成します。 23 'type="search"' は、検索キーワードを入力するための特殊な入力フィールドを示します。 24 ブラウザによっては、入力履歴のサジェストやクリアボタンが表示されるなど、検索に特化した振る舞いをします。 25 'id'属性は<label>と関連付けるために使用し、'name'属性はフォーム送信時にデータの識別に使用されます。 26 'placeholder'属性は、入力例やヒントを薄い文字で表示します。 27 --> 28 <input type="search" id="site-search" name="q" placeholder="キーワードを入力..."> 29 30 <!-- 31 <button>要素は、クリック可能なボタンを表します。 32 'type="submit"' の場合、このボタンがクリックされると、所属するフォームが送信されます。 33 (この例では<form>要素を省略していますが、実際には<form>要素で囲むことが一般的です。) 34 --> 35 <button type="submit">検索</button> 36 </search> 37</body> 38</html>
HTMLの<search>要素は、ウェブページ上で検索機能に関連するコンテンツの領域を、その意味を明確にして定義するために使用されます。これは、単に見た目をグループ化するだけでなく、その内容が「検索機能」であることをブラウザや支援技術に伝える、セマンティックな役割を担います。この要素は、特定の引数を受け取ったり、値を直接戻したりするものではなく、検索UIを構成する他の要素をまとめるためのコンテナとして機能します。
サンプルコードでは、<search>要素の中に、ユーザーが操作する検索インターフェースが配置されています。まず、<label for="site-search">は、次の<input>要素が何の目的で使用されるかをユーザーに伝える役割を持ち、for属性によって入力フィールドと関連付けられ、アクセシビリティを向上させます。次に、<input type="search" id="site-search" name="q" placeholder="キーワードを入力...">は、検索キーワードを入力するための特別な入力フィールドです。type="search"を指定すると、一部のブラウザでは入力履歴のサジェストやテキストをクリアするボタンが表示されるなど、検索に特化した便利な挙動を示します。id属性は<label>との関連付けに、name属性はフォーム送信時にデータの識別に使用されます。最後に、<button type="submit">検索</button>は、入力されたキーワードを送信するためのボタンとして機能します。このように、HTMLで<search>要素を活用することで、ウェブサイト内検索などの機能を明確に構造化し、ユーザーにもブラウザにも理解しやすいコードを作成できます。
search要素は検索機能に関連するコンテンツの領域を意味的に表すために使用します。<label>要素のfor属性と<input>要素のid属性を正しく関連付けることは、アクセシビリティを向上させ、利用者にとって使いやすいインターフェースを提供するために非常に重要です。input type="search"は検索キーワード専用の入力フィールドであり、ブラウザによっては独自のUIや機能を提供します。このサンプルコードでは<form>要素が省略されていますが、通常は<form>要素で<search>要素全体を囲み、<input>要素にname属性を設定してサーバーに送信されるデータの識別名を指定する必要があります。placeholder属性は入力のヒントとして活用できます。これらの点を意識して実装してください。
HTMLのsearchタグで検索フォームを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>検索機能のサンプル</title> 7</head> 8<body> 9 <!-- <search>要素は、ウェブサイトやウェブアプリケーションにおける検索機能のセクションを定義します。 --> 10 <!-- このセクションには、通常、検索フォームが含まれます。 --> 11 <search> 12 <!-- 検索フォームは、ユーザーが検索キーワードを入力し、送信するためのコンポーネントです。 --> 13 <!-- action属性は検索リクエストの送信先URLを、method属性はHTTPメソッド（GETまたはPOST）を指定します。 --> 14 <form action="/search-results" method="get"> 15 <!-- <label>要素は、フォームコントロール（入力フィールドなど）の説明を提供し、アクセシビリティを向上させます。 --> 16 <label for="site-search">サイト内検索:</label> 17 <!-- <input type="search">は、検索クエリを入力するための専用の入力フィールドです。 --> 18 <!-- id属性は<label>のfor属性と関連付けられ、name属性はフォーム送信時に使用されるフィールド名です。 --> 19 <!-- placeholder属性は、入力がない場合に表示されるヒントテキストです。 --> 20 <input type="search" id="site-search" name="query" placeholder="キーワードを入力..."> 21 <!-- <button type="submit">は、フォームを送信するためのボタンです。 --> 22 <button type="submit">検索</button> 23 </form> 24 </search> 25</body> 26</html>
HTMLの<search>要素は、ウェブサイトやウェブアプリケーションにおいて、検索機能のセクションを定義するために使われます。これは、通常、ユーザーが情報を検索するための入力フォームを内包します。この要素自体に、直接受け取る引数や特定の値を返す戻り値はありません。<search>要素の主な役割は、その内容が検索機能に関連するものであることを明確にし、コードの可読性やアクセシビリティを高めることです。
提示されたサンプルコードでは、<search>要素の中に<form>要素が配置されています。このフォーム内には、検索キーワードを入力するための<input type="search">フィールドと、検索を実行するための<button type="submit">が実装されています。<label>要素は入力フィールドの目的をユーザーに伝える役割を持ち、placeholder属性は入力例を提示します。このように<search>要素は、単独で機能するのではなく、<form>、<input>、<button>といった他のHTML要素と組み合わせて、具体的な検索インターフェースを構築するセマンティックなコンテナとして機能します。これにより、Webページの構造がより理解しやすくなります。
<search>要素は、ウェブサイトの検索機能全体を意味的に示すための領域を定義します。この要素自体が具体的な検索機能を提供するものではなく、その内部に検索フォーム（通常は<form>要素）を配置することで実際の機能を実現します。サンプルコードのように、<input type="search">を利用すると、ブラウザによっては検索履歴の表示などユーザーにとって便利な機能が提供されることがあります。また、<label>要素とinput要素をfor属性とid属性で正しく関連付けることで、スクリーンリーダーなどの補助技術を利用するユーザーのアクセシビリティが向上します。<form>タグのaction属性で検索リクエストの送信先URLを、method属性でHTTPメソッドを指定し、inputタグのname属性で送信するデータの識別子を定めることが必須です。これにより、ユーザーの入力が正しくサーバーに伝達されます。