使いどころが分かりにくいhtml要素の使いどころを考えてみる 後編

使いどころが分かりにくいhtml要素の使いどころを考えてみる 後編

さて、重い腰を上げてhtml要素の使いどころ 後編いってみたいと思います。

前回分は前の記事でご確認下さい。

使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編

まずは大枠の仕分け

テーブル要素に関しては、そんなに掘り下げるべき点もないので、思い切って飛ばします 笑
captionやtfootなんかも意味合いで振り分けるぐらいですし、、、
では、さっそく紐解いていきましょうか。

動画やマップの埋め込みに使用するコンテンツ埋め込み要素

代表的なホームページに別サービスやgoogleマップを埋め込むときに使用するiframeという要素があります。

結構iframeで代用できちゃう要素は多いのですが、せっかくなので他の埋め込み要素も色々と見ていきましょう。

動画を埋め込むvideo、embed要素
動画を埋め込む要素はembedとvideoで合計2つあるのですが、今はほとんどvideoでの埋め込みが多いのではないでしょうか。embedは単純に動画を埋め込んで幅や高さを指定するだけなのに対し、videoはより細かな情報を一緒に掲載することができます。(代替画像やオートプレイなど)

また、sourceタグを併用することで、再生候補を複数に分けることもできます。
(表示の代替動画や画像を用意するなど)

サポート状況もほぼ整っているので、特別条件などなければvideo要素一択でいいでしょう。

汎用性のある埋め込みタグobject要素
object要素は、指定した外部リソースを表示するために使うタグです。
意味合いは厳密でなく、指定された外部リソースなら表示しますよー。という内容。
ちなみにparam要素というのは、object要素内で指定するデータを指定する要素です。
(このデータはmovieです。とかそんな感じで明示したい時に使用する)

SVG画像の表示不具合があった時なんかに使う機会があるかも、、、
あえて動画の表示に使うのはあんまり無いかもしれないです。

アニメーションなどで活用されるcanvas要素
描いた図形をアニメーションとして使用するときに使われる要素です。
javascriptで表現できるので、データ操作が容易

まだ実務で使用したことないので、早く使ってみたいです。

図形描画してリンクを設定できるmap、aria要素
丸・三角・四角といった図形をカンタンに表現でき、なおかつその図形をリンク要素として利用することができます。
画像内で一部分だけ丸くリンクにしたい時、一から丸を作るより楽かもしれませんね。
ちなみに実際図形を表示する要素はaria要素になります。mapはその外枠といった扱い。
音楽や効果音を流すaudio要素
読んで字のごとし、オーディオになる要素です。
video要素と同じく自動再生や代替の文言などを指定することができます。
まとめiframeでまとめがちな埋め込み要素ですが、適宜要素を選択することで今までよりできることが増える印象です。(主にデータの操作やロボットへ伝える情報について)
canvasは早く使ってみたいなぁ。

問い合わせで多用するフォームコンテンツ

form要素まわりに関しては、項目が膨大すぎるので、別記事で書こうと思います。
完成次第こちらにリンクを貼り付けますので、今しばらくお待ち下さい。
出来ました。下記リンクボタンからご確認ください。

使いどころが分かりにくいhtml要素の使いどころを考えてみる form編

ユーザー操作

details要素といって開閉式のメニューみたいなものを作ることができます。
summaryタグで表題を設けて、summary直下に書いた要素(リストなど)が中身として機能します。
上記をdetails要素で囲うと、いわゆるウィジェット的な要素となるわけですね。
部品化して、ナビゲーションに使えるかも

ただ、ブラウザサポートが微妙な状況なので、現時点では実務で使うことはないかもしれません。

調べてみると色々出てくるhtml

いやはや調べるとまだまだ知らない要素や使っていなかった要素がたくさんでてきます。
ひとつずつ使えるものを増やしていって、自分のモノにしていきたい・・・

こちらの記事も読まれています

使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編...   皆さん、コーディングしている時に使わないhtml要素ってありませんか? 僕はhtmlリファレンスを見るとコレ、全然使ってないなあ。なんて要素がかなりあります。 (上手に使ってる方はもちろんいらっしゃるのでしょうが、、、) なので今日は自戒の意味も込めて、htmlの使って...
webサイトを作る時の要素の使い方 4巻 head内の記述... 前回はmeta要素の書き方について記事を投稿しました。 前回の記事リンク webサイトを作る時の要素の使い方 4巻 meta要素 今回は少し幅を拡げて、head内の記述について掘り下げていこうと思います。 掘り下げたらびっくり。数が結構あるんですね、、、 ...
webサイトを作る時の要素の使い方 3巻 meta要素... htmlってそんなに掘り下げなくてもホームページ作成って意外と出来ちゃいますよね。 でも、文書を正確に機械に読み取ってもらう為にも、なるべく知識は正しく持っといた方が制作の際に迷わないし、正確な仕事が出来ると思うのです。 という訳で今日は人には見えない部分の一つ、「meta要素...
webサイトを作るときの要素の使い方2巻 article section... さて、前回はwebサイトを構成する際、適切に要素を配置するための内容を書いていきました。 前回の記事 今回は残りのsection、article要素について考えてみます。 似ている部分もあるこの二つのセクション。他のセクショニング要素に比べてあやふやな部分が多いこの要素を、一...

htmlカテゴリの最新記事