Prompt
マイナーでちょっとレアなHTMLタグを色々教えて〜
ただ、非推奨であるものは除いてね。
承知しました！マイナーでちょっとレア、だけど非推奨ではないHTMLタグですね！
なるほど、普段あまり見かけないけど、知っておくと「おっ！」となるような、通好みのタグを探しているんですね。まるで、あまり知られていない隠れた名曲を見つけるような感覚ですね！INFPの君がきっと心惹かれるような、そんなHTMLタグをいくつか紹介しますね！
1. <data> タグ
-
何これ？: 要素のコンテンツを人間が読める形式で提供しつつ、機械が処理しやすい形式でデータ（値）を提供するためのタグです。
-
用途: 商品のID、データベースのレコードIDなど、ユーザーには表示されないけど、JavaScriptなどで処理する際に必要な情報を埋め込みたい場合に使います。
-
例:
HTML
<ul class="product-list"> <li><data value="324">豪華なハンドソープ</data></li> <li><data value="456">エコバッグ Lサイズ</data></li> </ul> <script> const products = document.querySelectorAll('data'); products.forEach(product => { console.log(`商品名: ${product.textContent}, ID: ${product.value}`); }); // 出力例: 商品名: 豪華なハンドソープ, ID: 324 </script> -
ポイント: 見た目は普通のテキストだけど、裏にデータが隠れているのが面白いですね！
2. <meter> タグ
-
何これ？: 指定された範囲内の数値（計測値）や、ディスク使用量、投票結果など、量を表すためのタグです。プログレスバーと似ていますが、こちらは既知の範囲を持つ「測定値」を表します。
-
用途: ストレージの使用率、試験の点数（例えば100点満点中80点）、特定の目標達成度などを視覚的に表現したい場合。
-
属性:
value(現在の値),min(最小値),max(最大値),low(低いと見なされるしきい値),high(高いと見なされるしきい値),optimum(最適値)。 -
例:
HTML
<label for="c_drive_usage">Cドライブ使用量:</label> <meter id="c_drive_usage" value="80" min="0" max="100" low="50" high="90" optimum="70">80%</meter><br> <label for="exam_score">あなたの点数:</label> <meter id="exam_score" value="75" min="0" max="100" low="40" high="80" optimum="90">75点</meter> -
ポイント: CSSで見た目をかなりカスタマイズできます。視覚的に情報を伝えるのに便利ですね。
3. <progress> タグ
-
何これ？: タスクの進行状況を示すためのタグです。ファイルダウンロードの進捗やフォーム送信の完了度など、タスクが進行中であることを示します。
-
用途: 非同期処理の進捗状況をユーザーにフィードバックしたい場合。
-
属性:
value(現在の値),max(完了と見なされる値)。valueがない場合は、不確定な進行状況（ローディングスピナーのように常に動く）を示します。 -
例:
HTML
<label for="file_upload">ファイルアップロード中:</label> <progress id="file_upload" value="70" max="100">70%</progress><br> <label for="loading_data">データ読み込み中:</label> <progress id="loading_data"></progress> ``` -
ポイント:
meterと似ていますが、こちらは「完了に向かっているプロセス」を表す点が異なります。
4. <output> タグ
-
何これ？: 計算結果や、ユーザーのアクション（フォーム入力など）によって生成された結果を表示するためのタグです。
-
用途: JavaScriptでフォームの入力値を計算し、その結果を表示する電卓のような機能や、スライダーの値の表示など。
-
属性:
for(関連する要素のIDを指定),name。 -
例:
HTML
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="10"> + <input type="number" id="b" value="20"> = <output name="result" for="a b"></output> </form> -
ポイント: フォームの入力と結果を紐付けるセマンティクスが素晴らしいですね。
5. <mark> タグ
-
何これ？: テキストの一部を、ユーザーの参照目的のためにハイライト表示するためのタグです。検索結果のキーワード強調などによく使われます。
-
用途: 検索エンジンが検索キーワードを結果ページで強調表示するような場合や、特定の情報を目立たせたい場合。
-
例:
HTML
<p>この文章の中で、特に<mark>重要なキーワード</mark>をハイライトしています。</p> <p>検索結果: 「<mark>JavaScript</mark>の<mark>スプレッド構文</mark>について」</p> -
ポイント: デフォルトでは背景が黄色になります。
<strong>や<em>が意味的な強調なのに対し、これは参照目的の強調という違いがあります。
6. <details> と <summary> タグ
-
何これ？: クリックで開閉できる「アコーディオン」や「詳細情報」セクションを、JavaScriptを使わずに純粋なHTMLだけで実装できるタグです。
-
用途: FAQセクション、隠れた詳細情報、長いコンテンツの要約など。
-
例:
HTML
<details> <summary>クリックして詳細を表示</summary> <p>ここには、普段は隠されているが、ユーザーが興味を持った場合にのみ表示される詳細な情報が入ります。</p> <ul> <li>項目1</li> <li>項目2</li> </ul> </details> <details open> <summary>最初から開いているセクション</summary> <p>このセクションは、デフォルトで開いた状態です。</p> </details> -
ポイント: これらは本当に便利！ JavaScriptを減らしてシンプルにインタラクティブなUIを作りたい時に重宝します。
7. <rp> と <rt> タグ (Ruby Annotation関連)
-
何これ？: 東アジアの言語（特に日本語）で、漢字の読み仮名（ルビ）を振るための
<ruby>タグと一緒に使われるタグです。-
<rt>: ルビテキスト（読み仮名）を定義します。 -
<rp>: ルビが表示できないブラウザのために、括弧などを表示するためのフォールバックテキストを定義します。
-
-
用途: Webページで日本語の漢字に読み仮名（ふりがな）を付けたい場合。
-
例:
HTML
<ruby> HTML<rp>(</rp><rt>えいちてぃーえむえる</rt><rp>)</rp> </ruby> と <ruby> CSS<rp>(</rp><rt>しーえすえす</rt><rp>)</rp> </ruby> でウェブサイトを制作する。 -
ポイント: 日本語のコンテンツを作る上では非常に重要な、意味的なタグです。ブラウザのルビの表示に対応していない場合は
えいちてぃーえむえるのように表示されます。
どうかな？ これらは普段あまり意識しないかもしれないけど、それぞれがセマンティックな意味を持っていて、ウェブページの構造をより豊かにしてくれるタグたちだよ。INFPの君が、コードの裏側にある「意味」や「哲学」に興味を持つように、これらのタグも単なる見た目だけでなく、そのセマンティクスに注目すると、また違った面白さが見えてくるんじゃないかな！ ぜひ使ってみてね！