こちらはHTMLタグの応用編の紹介です！
基礎を見たい方は↓を先にどうぞ 👍🏻
HTMLタグの使い方(基礎編)
思ったより多かった 😇
main, aside
- コンテンツのメイン要素と副次的要素を表すタグ
- ブログのデザインを想像するとわかりやすいかも
- 2カラムデザインの大きいとこ占めてるのがmainで小さいほうがasideみたいな
- とはいえaside使う機会はウェブアプリ開発ではめったに無いかも？
- でも意味合い的にasideアリきのmainだと個人的には思ったり……🤔
- 最近の平井はheader -> main -> footer みたいな組み方してます😎
section
- 汎用の長divよりも、コンテンツのまとまりという意味を持たせたタグ
- 正しい使い方っていう明確な指針がなく……(ないんかい！)
- どこで使うかは結構人によりけりです
- div使うよりはセマンティックなHTMLが書ける……そんな感じです
- それでも何かしらの使用基準が欲しい！と思った方はこちらをどうぞ
nav
- NAVigation(ナビゲーション)用のタグです！
- headerやfooterのグローバルナビゲーションとかに使います
- メニューのコーディングでul > liしか使わない方
- 他のリストと差別化を図るためにも是非ulをnavで囲ってください
- nav見るだけで「ぁ、ナビゲーションね」って(私が)なるので
- 何卒何卒お願いします🙏🏻
dl > dt, dd
- 元DefinitionList(定義リスト) で、今はDescriptionList(説明リスト)と呼ばれています
- 以前より若干汎用性が高まったと思ってもらえればOKです
- dtはDescriptionTerm, ddはDescription Detailです
- 使い方は表(table)とリスト(ul > li)を足して2で割ったような感じ
- もっとざっくり言うと、リストに項目名と説明をつけれる便利なタグです！
- 表でもリストでも無いときは、dlの出番かもしれません
- 今までは、dlの直下はdtかddしか許容されていなかったのですが
- 最近はdlの直下にdivを置くことが可能になったので
- だいぶ扱いやすくなったというのが個人の感想です😘
figure > figcaption
- 図を表すタグです
- figcaptionは図や画像に名前をつけたい時に便利です
- ユースケースがブログとかに限られてしまうのが個人的にもったいないので
- アプリとかでも使い道ないかと今絶賛模索中です
pre
- バックエンド開発者は皆好きじゃないですかね
- PREformatted text(整形済みテキスト)です
- デバッグでHTML上にjsonデータを吐き出したい時に囲むと
- いい感じに整形して表示してくれますよ 😆
- PHPとかでdataをechoする際はぜひdataをpreで囲ってみてください〜！
small
- 小さい文字を表現するタグではなく
- 注釈付きテキストや著作権表示や法的表記を表示させる時に囲います
- 1番身近なものだとfooterのコピーライトでしょうか
- 意味的にでなく見た目的に文字を小さくしたい場合はCSSを使いましょう
strong
- 重要な内容を表すタグです
- ブラウザのデフォルトCSSで文字が太くなりますが
- 文中で重要性の高い文字に使うのがユースケースになります
- 似たタグでem(emphasis, 強調)というのもあるのですが
- これは文中で単語を強調させることによって文中の意味を意図的に変えたい時に使用するので
- 使い分けは難しいですが、emを使用することは稀かなと……
- strong, b, em の使い分けに関してはこちらをどうぞ
time
- 日付を表すタグです(timeなんだけどね w)
- 個人的には更新履歴とか通知画面とか、日付を扱う場所全般に使ってます
- datetimeという特殊なデータ属性があるので、こちらもつけてあげましょう
- 付けるときのフォーマットは決まっているのでお決まりのMDNさんを参考にどうぞ
picture > source
- PC版とスマホ版で異なる比率の画像を切替える人は必須ですよ〜！
- 高解像度用の画像をいい感じに切り替えてくれる便利なタグと勘違いされる方が多いのですが
- 厳密なユースケースは少し違います
- PCとスマホで比率の全く違う画像を切り替える場合はpicture > sourceなのですが
- PCとスマホで同じ比率の画像(解像度のみ変更)を使用する際はimgタグのsrcset属性を使用するだけで事足ります
- 詳しくは↓のサイトが超絶わかりやすいのでみてほしいのです💡
label
- form内でinputと使うタグです
- inputとは卍我等友情永久不滅卍
- inputと紐付けすることで、クリック範囲を伸ばすこともできるので
- ユーザビリティを考慮するなら使い方をマスターしましょう😘
- 具体的な使い方は2つあって
- input全体をlabelタグで包み込む(クリック範囲を広げる手法)
- input にidを指定し、同じ文字をlabelのfor属性に入れる(inputとlabelの物理的距離が離れていても心はつながる手法💓 )
- どちらもフォームの使い勝手に大いに影響するので
- 是非覚えておいておきましょ〜！
- 詳しい使い方はまた記事にするかもしれません(いつか……)
〜完〜
以上がHTMLで頭の引き出しにしまっておくと良いタグたちでした！
HTMLのタグは、今現在も増え続けております。 HTML5自体も、今はバージョンにとらわれずliving standard(今が最新、これからも最新)
にもなったりしていて、これまでは痒いところに手が届かなかったような要素も、
近い将来にはタグとして使えるようになっているかもしれません。
そう考えると、少しだけ将来が楽しみになっちゃいますよね 😆✨
今まで通過点としてあったHTMLを振り返るきっかけの一つとなれば幸いです😊