TOMOYAこんにちは!フロントエンドエンジニアの山田です。citeが個人的に印象に残っています。それぞれ、用途は近しいですが使い方が異なりましたね。前回の記事もご覧ください。知ってそうで知らない!?HTML要素たち早速、知ってそうで知らないHTML要素について、まとめてまいります。HTMLとCSSの関係性HTMLそのものは見栄えを制御する機能を持ち合わせていません。文字にタグをつけてブラウザ上で表示すると、文字の大きさや太さが変わったり、タグの変わり目で改行が入ることがあります。これは、ブラウザが要素単位でデフォルトのスタイルを設定しているからです。ブラウザによっては同じ要素でも見栄えが異なる場合があります。このHTMLやWordといった文書の見栄えを指定する技術のことをスタイルシートと呼びます。Sheets(CSS)と呼ばれています。作成したデザインの通りにウェブページの見栄えを整え、ブラウザ毎の見栄えの崩れや誤差がないようにCSSを指定することが、私たちコーダーやフロントエンドエンジニアの役目です。それでは、本題に入りましょう。caption要素caption要素は、table要素(表組み)のタイトルや説明文を表記する要素です。この要素は必ずtable要素の直下の先頭に記述する必要があります。</tbody></table>原則として、caption要素は表の上部に表示されます。表示位置を変更する場合はCSSで変更することができます。今まで、表を作成したときにはキャプションをh要素やp要素でマークアップしていたという方は、この機会にcaption要素を使用してみてはいかがでしょうか。code要素code要素はHTMLやJavaScriptなどのコードであることを示します。pre要素に入れ子して使用することが多いです。エンジニア内では馴染みのある要素ですが、これまでの経験上、受託しているウェブサイトで使用する機会は滅多にありません。s要素del要素とs要素はいずれも文字に打ち消し線が入る要素です。HTMLは要素のデフォルトのスタイルを使うことを目的とした要素を使用することは非推奨となっています。いずれの要素も見栄えこと異なりますが、del要素はその名の通り「削除された情報」でs要素は「正確ではなくなった情報」や「関係がなきなった情報」を表します。del要素は二つの属性を任意で指定することができます。cite属性は変更を説明するURLの指定し、datetime属性は情報の変更日時をUTC※で表記します。※UTCとは世界の標準時刻(協定世界時)のことで、日本はこの標準時刻から9時間進んでいます。legend要素フォームを作成する際に、table要素やdl要素や単にdiv要素を使用してCSSでレイアウトをすることがほとんどではないかと思います。テキストボックスやチェックボックスなどのフォーム部品をグループ化するfieldset要素があります。fieldset要素は枠線で囲まれますが、デフォルトのスタイルはCSSでリセットすることが可能です。name属性やdisabled属性を使用することもできます。legend要素はfieldset要素のキャプションを指定します。fieldset要素の直下の先頭に記述します。legendは日本語訳すると「伝説」や「神話」といった意味もあるため、王道RPGっぽさがあります。まとめフォームや表にはキャプションをつける要素があります。表のキャプションはh要素やp要素を使っているウェブサイトが多くあります。フォーム要素はtable要素やdl要素でレイアウトをしているサイトが多いため、fieldset要素を使用しているサイトというのは見たことが無いと言っても過言ではありません。