知らなかったHTMLタグについて
知らないHTMLタグが多くあったため、備忘録として残す。
📝 HTML Tags Memory Test
114個のHTMLタグいくつ覚えているか？というテストでしたが、知らないHTMLタグが数多くありました。
フロントエンドエンジニアとして知らなかったでは済まされないと思うのでこれを機に知らなかったHTMLタグについて学びを深めようと思います。
codepen.io
📙 知らなかったHTMLタグ
<address>
<address>要素の中の情報が個人や組織の連絡先であることを示す。
<address>
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>
<address>: 連絡先要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<address> は HTML の要素で、この中の HTML が個人、団体、組織の連絡先情報を提供していることを示します。
<hgroup>
<h1>等の見出し要素と<p>要素をグループ化する。
<hgroup>
<h1>Blog</h1>
<p>This is my personal blog.</p>
</hgroup>
<search>
検索処理を行う要素のコンテナー。
検索結果を表示するという役割ではなく、子要素の目的が検索機能であることを表す。
<search>
<form>
<label>
<span>HTML</span>
<input type="search" />
</label>
<button>search</button>
</form>
</search>
<search>: 一般検索要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<search> は HTML の要素で、文書やアプリケーションのうち、検索や絞り込み操作を行うことに関連する、フォームコントロールやその他のコンテンツの部分を表すコンテナーです。<search> 要素は意味的に、要素の内容の目的が検索や絞り込み機能であることを示します。検索や絞り込み機能は、ウェブサイトやアプリケーション、現在のウェブページや文書、あるいはインターネット全体やそのサブセクションを対象とする可能性があります。
<cite>
引用先を表示する際に使用する。
<p>次の引用は有名な文学作品からのものです:</p>
<blockquote>
"生きるとは呼吸することではない。行動することだ。"
<cite>— ジャン＝ジャック・ルソー, 『エミール』</cite>
</blockquote>
<cite>: 引用元要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<cite> は HTML の要素で、引用された創作物のタイトルをマークアップするために使用します。この参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。
<abbr>
略語を表す。
<p><abbr>HTML</abbr>(HyperText Markup Language)</p>
<abbr>: 略語要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<abbr> は HTML の要素で、略語や頭字語を表します。
<b>
ユーザーの注意を惹きたい場合に使用する。
ただし、<b>を太字にするという装飾目的で使用するべきではない。
単にテキストを太字にする場合は CSS の font-weight を使用し、重要な意味を持つテキストは <strong>を使用する。
<b>: 注目付け要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<b> は HTML の要素で、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、 <b> を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の font-weight プロパティを使用し、特別な重要性を持つテキストを示すには <strong> 要素を使用してください。
<bdi>
ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立しているものと扱うよう指示する。
<bdi>: 書字方向分離要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<bdi> は HTML の要素で、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立しているものと扱うよう指示します。これは特に、ウェブサイトがテキストを動的に挿入するとき、挿入されるテキストの書字方向が不明な場合に便利です。
<bdo>
現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにする。
<bdo>: 双方向文字列上書き要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<bdo> は HTML の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。
<data>
商品などを並べる際にidのような識別子を付与する際に使用する。
日付を扱う場合は<data>ではなく<time>を使用する。
<ul>
<li><data value='1'>Apple</li>
<li><data value='2'>Orange</li>
<li><data value='3'>Strawberry</li>
</ul>
<data>: データ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<data> は HTML の要素で、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、<time> 要素を使用する必要があります。
<time>
時刻を表す。
datetime属性を一緒に使用する。
<time>: （日付）時刻要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<time> は HTML の要素で、特定の時の区間を表します。datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。
<dfn>
定義句や文の文脈の中で定義している用語を示す。
<dfn>: 定義要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<dfn> は HTML の要素で、定義句や文の文脈の中で定義している用語を示すために用いられます。祖先である <p> 要素、<dt>/<dd> の組み合わせ、または直近の <section> 要素が用語の定義とみなされます。
<kbd>
キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。
<kbd>: キーボード入力要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<kbd> は HTML の要素で、キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。慣習的に、ユーザーエージェントは既定で <kbd> 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。
<mark>
テキストにマーカーを引くことができる。
<p>aaaa<mark>bbb</mark></p>
<mark>: テキストマーク要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<mark> は HTML の要素で、周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します。
<q>
文章中に含まれるインラインの引用。
<blockquote>と異なり、テキストサイズが短い場合に使用する。
<q>: インライン引用要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<q> は HTML の要素で、中に含まれるテキストが短いインラインの引用であることを示します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、 <blockquote> 要素を使用してください。
<ruby>
テキストの上下左右に表示される小さな注釈を表す。
漢字の読み等を表現する際に使用する。
後述する<rp>と<rt>と併せて使用する。
<ruby>田中<rp>(</rp><rt>Tanaka</rt><rp>)</rp></ruby>
<ruby>: ルビ注釈要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<ruby> は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。
<rp>
<ruby>による注釈表示に対応していないブラウザで表示する代替の括弧を提供するための要素。
<rp>: ルビの代替表示用括弧要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<rp> は HTML の要素で、<ruby> 要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの <rp> 要素で、注釈の文字列を含む <rt> 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。
<rt>
注釈として表示するテキストを指定する。
<rt>: ルビテキスト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<rt> は HTML の要素で、ルビによる注釈（振り仮名）のルビテキストの部分を指定します。東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 <rt> 要素は常に <ruby> 要素の中で使用されます。
<s>
打ち消し線で対象の要素が既に適切ではない、正確ではないことを表現する。
<s>: 取り消し要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<s> は HTML の要素で、テキストを取り消し線または打ち消し線つきで描画します。<s> 要素はすでに適切または正確ではなくなった事柄を表現するために使用してください。しかし、文書の修正を示す場合、 <s> 要素は適切ではありません。この場合は <del> と <ins> の方が適しているので、こちらを使用してください。
<del>
文章の中で削除されたテキスト。
<ins>と併せて使用する。
<blockquote>
<del>const size = 100;</del>
<ins>const size = 300;</ins>
</blockquote>
<del>: 削除済みテキスト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<del> は HTML の要素で、文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。<ins> 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。
<ins>
文章の中に追加されたテキスト。
<del>と併せて使用する。
<blockquote>
<del>const size = 100;</del>
<ins>const size = 300;</ins>
</blockquote>
<ins> - HTML: ハイパーテキストマークアップ言語 | MDN
<ins> は HTML の要素で、文書に追加されたテキストの範囲を表します。同様に、 <del> 要素を使用して文書から削除されたテキストの範囲を表すことができます。
<samp>
プログラムを実行した際のサンプル出力を表す。
<samp>: サンプル出力要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<samp> は HTML の要素で、コンピュータープログラムからのサンプル出力を表すインラインのテキストを収めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。
<sub>
表記上の理由で下付き文字として表示するべきインラインテキスト。
<sub>: 下付き文字要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<sub> は HTML の要素で、表記上の理由で下付き文字として表示するべきインラインテキストを示します。下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。
<sup>
表記上の理由で上付き文字として表示するべきインラインテキスト。
<sup>: 上付き文字要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<sup> は HTML の要素で、表記上の理由で上付き文字として表示するべきインラインテキストを指定します。上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。
<u>
テキストに対して下線を付与したいだけの場合は CSS の text-decoration を使用する。
<u>: 非言語的注釈（下線）要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<u> は HTML の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。
<var>
変数名や数式を表す。
<var>: 変数要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<var> は HTML の要素で、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。
<area>
イメージマップの中でクリック可能な領域をあらかじめ定義する。
<area>: イメージマップ領域要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<area> は HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。
<track>
<audio>もしくは<video>の子要素として使用する。
<track>: 埋め込みテキストトラック要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<track> は HTML の要素で、メディア要素 (<audio> および <video>) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定することができます。トラックは WebVTT 形式 (.vtt ファイル) を用います。
<wbr>
ブラウザの判断で改行しても良い場所を表す。
<wbr>: 改行可能要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<wbr> は HTML の要素で、改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。
<meter>
メーターを表示する際に使用する。
<meter>: HTML メーター要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<meter> は HTML の要素で、既知の範囲内のスカラー値、または小数値を表します。
🧪 実験的な機能
<portal>
別のページの内容を現在のページにプレビューとして埋め込む。
<iframe>よりも制限がある。
<portal>: ポータル要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<portal> は HTML の要素で、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。
✅ まとめ
セマンティックな実装ができるように心がけていきます。
GitHubで編集を提案する