HTML・CSS:Webサイト内・外での検索機能を持たせるタグ・ページ内検索の方法

スポンサーリンク

searchタグとは

<search>タグとは、<search>と</searc>で囲った部分が検索に関することですよ~というのを表します。<div>タグのように要素をブロックとして捉えることが可能で、それもただ囲うだけではなく検索のためのものなんですよってことをエンジン側に伝える働きを持っているものだと思われます(じゃないとこのタグ新たに追加した意味ないですし…。2023.7月か8月ごろに新たに追加されたタグ)

具体的にはどんな時に使うの?

たとえばですが、あらゆるホームページの中でページ内検索などはよくヘッダーに付けられているのを目にします。それがあると一発で関連するページが表示されますので、かなり便利ですね。(このHPも一応サイドバーに検索フォームを設けています。気になるタグがある人は使ってみてね♪)
そういうタグをまとめて使うときに、<search>タグを使って囲ってあげることによって、この内容は検索するものだよ~ってわかりやすく伝えることができます。

searchタグの注意点

<search>タグは、検索をするためのフォームだとか、検索したい単語などの一部を含んだ結果を表示させるなどのものを囲むことが出来ますが、ただ検索結果を表示するだけの部分には<search>タグを使うことが出来ません。なんでもいいから<search>タグつ~かおっ★はダメだということです。

searchタグの使い方

我がHPのHP内検索フォームを<search>タグで囲みました。↓

<code>
<search>
<form action="https://111111monji.com/" method="get">
 <input type="search" name="search" placeholder="キーワードを入力">
 <input type="submit" name="submit" value="検索">
</form>
</search>
</code>

実際に表示させてみるとこうなります。↓

これで検索をかけると、実際にHP内検索をすることが出来ます。

タイトルとURLをコピーしました