使われないHTML要素たち 🌚🕵🏿
(カバー画像エリア)
2022年4月11日に投稿され、2022年7月22日に更新されました。
HTMLには100以上の要素があり、それぞれのテキストに特別な意味を与えるために文書内で使用されています。私たちのほとんどは<p>、<div>、<body>要素など、いくつかしか知りませんが…
実は、W3Cリファレンスの暗い領域に隠されたもっと多くの要素があります。この記事では、HTMLのドキュメントを深く掘り下げて、アクセシビリティとSEOの2つの非常に重要な方法でウェブサイトを改善するために便利な要素の束を持ってきました。
Ctrl+Dを押してこの記事をブックマークし、必要なときに簡単に戻ってこれるようにしてください。それでは、始めましょう！
👉 <abbr> — 略語
この要素は、略語（例: Corporation ➟ Corp.）と頭字語（例: Cascading Style Sheets ➟ CSS）を表します。さらに、title属性を使用して単語の完全な形式を書くことができ、スクリーンリーダーが読むことができるようにするため、またユーザーがそれをホバーして読むために使用できます。
<ins> と <del> 要素は、文書に追加または削除されたテキストの範囲を表します。あなたはすでにこれらの要素を Githubのプルリクエストで見たことがあるかもしれません。
👉 <dfn>、<var>、<kbd>、<samp>、及び <output> — 技術的要素
これらは、定義、変数、キーストロークなどのような、文書内の特別な技術的な部分を表す要素です。
👉 <bdo> — テキストの方向性
この要素は、テキストの方向性を変更して、逆さまにレンダリングさせます。dir属性を使ってその動作を制御できます。
本来の使い方ではありませんが、HTMLだけでテキストを逆転させることもできます！
👉 <mark> — テキストのハイライト
この要素は、マーカーでテキストをハイライトするために使用されます。
👉 <area> — クリック可能な画像エリア
この要素を使って、画像の特定のエリアをリンクのように振る舞わせることができます！
これらの要素を使用して、一つのテキストブロックで複数の用語を定義する意味的に正確な説明リストを作成できます。
これらの2つの要素を使用して、文書に上付き文字（例: x²）と下付き文字（例: x₀）を追加できます。
👉 <figure> と <figcaption> — ラベル付き画像
<figure>を使用して、例えば画像など、あなたが望む任意の要素を含んだコンテナを作ることができます。そして、その最後の子として<figcaption>を追加します。ここには、それより上にあるものを記述するテキストのブロックを追加できます。
👉 <progress> と <meter> — 進捗のマーク
これにより、アクションが終了からどれくらい遠いかを示す進捗バー要素を意味的に正確に作成できます。
👉 <details> — 展開可能なメニュー
この要素を使用して、タイトルを持ち、ボタンを使用して展開できるネイティブメニューを作成できます。JavaScriptは必要ありません。
👉 <dialog> — ポップアップダイアログ
この要素を使用すると、意味的に正確なダイアログを作成できます。それ自体ではあまり多くのことはしませんので、CSSとJavaScriptを使用して機能を追加する必要があります。
👉 <datalist> — テキスト入力の提案
この要素を使用すると、手動でテキスト入力の提案を追加できます。何でも追加できます！
👉 <fieldset> — フォーム要素のグループ化
<fieldset>要素を使用して、フォームを整頓し、さらにユーザーフレンドリーに保ちましょう。
👉 <object> — 外部オブジェクトの埋め込み
このすばらしい要素を使えば、ウェブサイトにほとんど任意のファイルを埋め込むことができます！最も一般的にサポートされているのは、PDF、YouTube動画などです…
👉 <noscript> — JavaScriptが無効になっている場合
この要素は、ブラウザーでJavaScriptが無効になっているときに一部のコンテンツを表示するために使用できます。JavaScriptに大きく依存しているウェブサイトでは非常に一般的に使用されています。例えば、シングルページアプリケーション（SPA）などです。
このガイドが役に立ったと思ったら、将来の参照のためにブックマークしてください。
私はこのような投稿を毎日しますので、最新情報を得るためにフォローしてください。❤️
(Twitter関連のコンテンツエリア)
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/eludadev/those-html-elements-you-never-use-16bi
