こんな事ができるHTMLタグ

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「こんな事ができるHTMLタグ」についてお伝えしていきます。

詳細と内容まとめ

開閉可能なウィジェットは通常JavaScriptを利用して実装しますが、挙動を取り扱うデフォルトのHTMLタグが存在します。

<details>タグにはデフォルトで閉じた状態が設定されており、必要に応じてopen属性を追加することで最初から内容を表示することができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ウィジェット</title>
  </head>
  <body>
    <details open>
      <summary>詳細</summary>
      <p>内容</p>
    </details>
  </body>
</html>

メールアドレスまたは電話番号へのリンク

<a> タグには、リンクを示す href 属性があります。

ウェブページ、ファイル、電子メールアドレス、同じページ内の場所、または URL でアドレス指定できるその他のあらゆるものにリンクできます。

メールアドレスへのリンク

mailto: と対象受信者の電子メールアドレスを href の URL スキームに追加すると、クリックすると新しい送信電子メールメッセージが開きます。

<a href="mailto:nowhere@email.org">メール</a>

電話番号へのリンク

href に電話番号を追加するときに、電話番号にリンクすることもできます。

<a href="tel:+18005551239">(800) 555 1239</a>

※リンクの動作はデバイスによって異なる場合があります

オートコンプリート付きリスト

<datalist> はオートコンプリート付きのリストを作成するためのものです。

ユーザーが入力すると、ポケモンの名前を補完してリストから選択できるようになります。

<body>
    <h1>ポケモンスターター選択リスト</h1>
    <form>
      <label for="pokemon">初めてのポケモンを選んでください：</label>
      <input
        list="starter-pokemon"
        id="pokemon"
        name="pokemon"
        placeholder="選んでください.."
      />
      <datalist id="starter-pokemon">
        <option value="フシギダネ"></option>
        <option value="ヒトカゲ"></option>
        <option value="ゼニガメ"></option>
        <option value="キャタピー"></option>
        <option value="ビードル"></option>
        <option value="ポッポ"></option>
        <option value="コラッタ"></option>
        <option value="オニスズメ"></option>
      </datalist>
    </form>
  </body>