あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり知られていないかもしれませんが、特定の状況では非常に役立ちます。
Web 開発者は、多くの場合、複数の言語を知り、習得したいと考えています。その結果、言語が提供するすべての機能を学ぶことは困難ですが、より専門的でありながら便利なタグの一部を十分に活用していないことに気付くのは簡単です。
翻訳元: TutsPlus
残念ながら、あまり知られていない HTML タグの可能性をまだ十分に調査できていません。しかし、この分野に再び参入し、これらの未開発のタグのエネルギーを活用するためのコードを書き始めるのに遅すぎるということはありません。
ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり知られていないかもしれませんが、特定の状況では非常に役立ちます。
1. <引用>
<blockquote> タグは皆さんよくご存知のようですが、<blockquote> の弟分である <cite> についてはご存知ですか? <cite> 要素を使用すると、要素内のテキストを参照として定義できます。通常、ブラウザは <cite> タグ内のテキストを斜体で表示しますが、これは CSS を少し変更するだけで変更できます。
<cite> タグは、ディレクトリや他の Web サイトからの参照を引用する場合に便利です。段落内で cite タグを使用する例を次に示します。
デビッド・アレンの画期的な組織論の本『 Get Your Work Done』は、忘却に旋風を巻き起こしました。 2. <optgroup>
<optgroup> タグは、選択タグ内でオプションのグループを定義するのに最適な方法です。たとえば、映画のリストを時間別にグループ化する必要がある場合は、次のようにします。
1 2
< label for = "showtimes" >上映時間< / label > < select id = "showtimes" name = " showtimes" > < optgroup label = "1pm" >< / optgroup > < option value = "titanic" >タイタニック< / option > < option value = "nd" >スラムドッグ$ミリオネア< / option > < option value = "wab" >シュレック・ザ・モンスター< / option > < optgroup label = "2pm" >< / optgroup > < option value = "bkrw" >ライオン・キング< / option > < option value = "stf" >みんなのスーパーマン< / option > < / select >
デモ：
ショータイム

映画リストを視覚的に区別できます。 3. <頭字語>
<acronym> は、一連のリテラルを定義したり、より詳細に解釈したりする方法の 1 つです。 <acronym> タグが使用されているテキストの上にマウスを置くと、タイトルタグの内容を示すボックスが下に表示されます。例えば：
1
マイクロブログサイト< acronym title = "2006 年に設立" > Twitter < / acronym >は最近頻繁にダウンタイムが発生しています。
例：
マイクロブログサイトTwitterは最近頻繁にダウンタイムが発生している。 4. <アドレス>
<address> タグは非常に目立たない小さなタグですが、だからといって役に立たないというわけではありません。名前が示すように、<address> を使用すると HTML を意味的にマークアップできます。この小さなタグは、デフォルトでコンテンツを斜体で表示します。もちろん、デフォルトのスタイルはスタイルを使用して簡単に変更できます。
1 2 3 4
<住所> Glen Stansberry 1234 Web Dev Lane Anywhere、米国< /住所> 5. <ins> と <del>
編集されたバージョンを表示するためにタグを使用する場合は、<ins> と <del> が最適です。名前が示すように、<ins> は追加されたコンテンツを下線で強調表示し、<del> は削除された情報を取り消します。
1
ジョンは新しい iPod が< del >気に入っています< / del > < ins >大好きです< / ins > 。
例：
みんな~~のように~~放棄されたZブログ。 6. <ラベル>
フォーム要素は、テキストをマークするタイミングが最も忘れられやすいようです。最も忘れられがちなフォーム要素は <label> タグです。 <label> タグは、単にテキストをマークアップする便利な方法であるだけでなく、どの要素に関連付けるかを指定するための "for" 属性を渡すこともできます。 <label> はスタイル設定が簡単なだけでなく、タイトルをクリック可能にすることもできます。
1 2
< label for = "username" >ユーザー名< / label > < input id = "username" type = "text" / > 7. <フィールドセット>
Fieldset は、フォーム要素に論理的なグループ化を追加するために使用できる小さなタグです。 <fieldset> タグは、その中の要素の周囲にボックスを描画します。もう 1 つのポイントは、フィールドセットに <label> タグを追加して、グループのタイトルを定義できることです。
1 2 3 4 5 6 7
<フォーム><フィールドセット> <凡例>あなたは 5 年生より賢いですか? < / legend >もちろんです< input name = "yes" type = "radio" value = "yes" / >わかりません< input name = "no" type = "radio" value = "no" / > < / fieldset > < / form >
例: 8. <abbr>
<abbr> タグは <acronym> タグと非常によく似ていますが、<abbr> タグは略語を定義するためにのみ使用される点が異なります。 <acronym> と同様に、このタグの title 属性を定義できます。ユーザーが短縮テキストの上にマウスを移動すると、完全な内容が下に表示されます。 <abbr> タグはあまり使用されませんが、スクリーンリーダー、スペルチェッカー、検索エンジンには非常に便利です。
1
< abbr title = "脳損傷" > NC < / / abbr >は野蛮な用語です。
例：
それは野蛮な言葉です。それは野蛮な言葉です。 9. 相対
rel は非常に便利な属性です。どの HTML 要素にも rel 属性を適用できます。特に指定されていない追加のパラメータを渡すのに役立ちます。これは HTML で JavaScript を使用するときに非常に便利です。インラインで編集したいリンクがある場合は、以下を追加できます。
1
< a rel = "clickable" href = "page.html" >このリンクは編集可能です。 < /ア>
Javascript は、rel 属性が「クリック可能」なリンクを探し、Ajax を適用してインライン編集できるようにします。これは、rel 属性を使用できる多くのテクニックの 1 つに過ぎず、その可能性は無限です。興味のある方は、W3C の Rel の紹介を詳しく学習してください。 10.
<wbr> タグは非常にわかりにくいタグです。率直に言って、このラベルはほとんど使用されないので、あなたもこのラベルに遭遇することはないと思います。 (実際、この記事を書くまでこのラベルをほとんど見たことがありませんでした)。実際、このタグはソフト改行であり、行内に改行ポイントを指定でき、この時点で行を分割できることを示しますが、必ずしも行を分割するわけではありません。必要な場合にのみ行を分割します。このタグは、水平スクロールバーを回避したい場合に最適です。
例：
以下は、オーバーフローが定義されていない 200 ピクセル幅のボックスです。いいえWbrいいえWbrいいえWbrいいえWbrいいえWbrいいえWbrいいえWbrいいえWbr
ハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbr
<wbr> タグを使用せずに同じ効果を実現したい場合は、 または  を試してください。これら 3 つのタグは、すべてのブラウザで完全にサポートされているわけではないと言われています。この記事を通じて、3 つのタグに対する各ブラウザのサポート状況を確認できます。
追記：この記事を翻訳するのはかなり大変でした。Shen Fei はセマンティクスの魅力と HTML タグの威力を深く感じました。私たちが認識していないタグがたくさんあると思います。その結果、誰もが一般的なタグに精通していますが、一般的でないタグの使い方を知っている人はいません。前回の記事で説明したように、「セマンティクス」の大きな部分は、div だけを使用するのではなく、適切なタグを適切な場所で使用することです。より多くの HTML タグを理解できれば、より意味のある HTML コードを記述できるようになり、CSS の記述の難しさや作業負荷も大幅に軽減され、ページ構造がより合理的になります。

<<: CSS3のall属性の使い方を理解する

>>: 検証コードケースのJavaScript実装