はじめに
最近、便利なHTMLタグをいくつか見つけたので、
いっそ基礎的なタグから駆け出しエンジニアの私が自分なりにまとめてみる。
この記事の概要・意図
- HTMLタグの基本から便利なものまで概ね分かる。
- きっかけ程度になればいいな思うのでざっくりの記載。
- 良さそうなのをピックアップして単体で調べて使用していただければと。
この記事の対象者
- HTML初心者
- 簡単なチートシートを探している人
- 便利なタグを知りたい人
HTMLタグ一覧
| No. | タグ | 簡単な説明 |
|---|---|---|
| 基礎 | ||
| 基本レイアウト | ||
| 1 | head | 制御情報を記入・Webページ上に公開されない |
| 2 | title | タイトルバーや検索エンジンの結果として表示 |
| 3 | meta | テキストの文字コードや概要 |
| 4 | link | 別の文書ファイルとの関係を指定 |
| 5 | script | スクリプトファイルを指定 |
| 6 | body | ページ上に表示する内容を記述 |
| 7 | header | webページに表示するおもに上部に表示されるコンテンツを宣言 |
| 8 | main | webページに表示するメインコンテンツを宣言 |
| 9 | footer | webページに表示するおもに下部に表示されるコンテンツを宣言 |
| タグ | ||
| 10 | h1~h6 | 見出し・ブロック要素 |
| 11 | p | 段落・ブロック要素 |
| 12 | a | リンク・インライン要素 |
| 13 | img | 画像ファイルを埋め込む |
| 14 | video | 動画ファイルを埋め込む |
| 15 | div | 要素をグループ化・ブロック要素 |
| 16 | span | 要素をグループ化・インライン要素 |
| 17 | br | 改行 |
| 18 | small | 著作権や注釈を表示 |
| 19 | blockquote | 他サイト引用する時・ブロック要素 |
| ナビゲーション | ||
| 20 | nav | ナビゲーションの作成を宣言 |
| 21 | ul | 「・」の箇条書きリストを宣言 |
| 22 | ol | 数字で順序のリストを宣言 |
| 23 | li | 各項目をくくる |
| 表・テーブル | ||
| 24 | table | 表の作成を宣言 |
| 25 | tr | 表における行 |
| 26 | th | 表における見出し |
| 27 | td | 表におけるデータ |
| フォーム | ||
| 28 | form | フォームの作成を宣言 |
| 29 | input | 入力欄・インライン要素 |
| 30 | textarea | 複数行の入力欄・インラインブロック要素 |
| 31 | select | 選択肢の作成を宣言 |
| 32 | option | 選択肢 |
| 33 | button | ボタンを作成 |
| 説明 | ||
| 34 | dl | 説明リストを宣言 |
| 35 | dt | 説明リストのタイトル |
| 36 | dd | 説明リストの内容 |
| 意味のある・要素をグループ化 | ||
| 37 | article | 要素をセクションでまとめる・単体で完結している必要あり |
| 38 | section | 要素をセクションでまとめる・見出しタグを含める必要あり |
| 39 | aside | サイドバー・補足・主題とは関係が薄い |
| 参考文献 | ||
| 40 | figure | 自己完結型のコンテンツを宣言・参考文献の画像や図表 |
| 41 | figcaption | figureのキャプションや説明を定義 |
| コメント | ||
| 42 | <!- -> |
Webページに表示されない・メモ |
| 簡単で便利 | ||
| 43 | dialog | jsと合わせてダイアログやモーダルが楽に実装できる |
| 44 | details | HTMLのみでアコーディオンを作成できる・宣言 |
| 45 | summary | detailsタグのタイトル・要約 |
| 46 | progress | 進行率のバーを表示・似たものでmeterタグがある |
| 47 | datalist | 選択肢であるoptionをリアルタイム検索 |
参考資料
最後に
最近JavaScriptでモーダルを実装していましたが、なかなかめんどくさいなと思い。
調べたらdialogタグがあり試しに実装してみたら、あらまあ簡単！にモーダルが実装できました。
他にも便利なタグがあるんじゃないか、、、？
またいっそ自分なりにまとめてみようというのが経緯です。
HTMLのタグは探せばまだまだ出てくるが、とりあえず自分がすぐ見返せる用です。
ただ、ついでに誰かの役に立てばなぁ～と思ってます！
間違っているとこあったらごめんなさい！！！
初投稿なもんで、今後文章力や記事のレイアウトは改善・精進していきます！