はじめに

最近、便利な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のタグは探せばまだまだ出てくるが、とりあえず自分がすぐ見返せる用です。
ただ、ついでに誰かの役に立てばなぁ～と思ってます！
間違っているとこあったらごめんなさい！！！

初投稿なもんで、今後文章力や記事のレイアウトは改善・精進していきます！