どうも7noteです。大量にあるHTMLのタグに覚えておきたい優先順位を付けてみました。
↓関連記事↓
初心者でHTMLの練習を初めて驚くのが、HTMLタグの種類の多さ！
いや多すぎでしょ。マイナーなのも入れたらなんこあるの？？
その数なんと、＼ １１4個 ／。
いや多すぎでしょ。覚えられんわ。
ということで、個人的に重要だなと思う順で、覚える優先順位をつけてみました。
※あくまで主観なので、googleのSEOに効果があるとかそういうのじゃありませんのであしからず。
※HTML5のタグも交えて解説しています。
重要度★★★「絶対に覚えておいたほうがいいタグ」
これがないとコーディングができないレベルで重要なタグたちです。丸暗記しましょう
「ルート要素＆文書メタデータ」
html・・・HTML文書であることを示すhead・・・文書のヘッダ情報を表すtitle・・・文書にタイトルをつけるlink・・・リンクする外部リソースを指定するmeta・・・その文書に関する情報（メタデータ）を指定するstyle・・・スタイルシートを記述する
「セクション」
body・・・文書の本体を表すh1〜h6・・・見出しを付けるheader・・・ヘッダであることを示すfooter・・・フッタであることを示す
「グルーピングコンテンツ」
p・・・ひとつの段落（パラグラフ）であることを表すol・・・順序のあるリストを表示するul・・・順序のないリストを表示するli・・・リストの項目を記述するdl・・・定義・説明リストを表すdt・・・定義・説明される言葉を表すdd・・・定義用語や言葉の説明をするdiv・・・ひとかたまりの範囲として定義する
「テキストレベルセマンティクス」
a・・・ハイパーリンクを指定するspan・・・ひとつの範囲として定義するbr・・・改行する
「埋め込み型コンテンツ」
img・・・画像を表示する
「表データ」
table・・・テーブル（表）を作成するtr・・・テーブル（表）の横一行を定義するth・・・テーブル（表）の見出しセルを作成するtd・・・テーブル（表）のデータセルを作成する
「フォーム」
input・・・フォームを構成する様々な入力部品を作成するlabel・・・フォーム部品と項目名（ラベル）を関連付ける
「スクリプティング」
script・・・文書にJavaScriptなどのスクリプトを組み込む
重要度★★「使う機会があるので覚えておいたほうがいいタグ」
ホームページ等をコーディングする上で頻出するタグです。最重要タグを覚えたら次にこのタグたちを覚えていくとスムーズな開発ができると思います。
「セクション」
article・・・記事であることを示すsection・・・一つのセクションであることを示すnav・・・ナビゲーションであることを示すaside・・・余談・補足情報のセクションであることを示す
「グルーピングコンテンツ」
main・・・メインコンテンツであることを示すpre・・・半角スペースや改行をそのまま表示する
「テキストレベルセマンティクス」
time・・・日付や時刻を正確に示す
「埋め込み型コンテンツ」
picture・・・レスポンシブ・イメージを実現するsource・・・動画や音声などのURLや種類を指定するiframe・・・インラインフレームを作るvideo・・・動画を再生するaudio・・・音声を再生する
「フォーム」
form・・・入力・送信フォームを作るbutton・・・ボタンを作成するselect・・・セレクトボックスを作成するoption・・・セレクトボックスや入力候補リストの選択肢を指定するtextarea・・・複数行のテキスト入力欄を作成する
「インタラクティブ」
details・・・備考や操作手段などの詳細情報を折りたたみコンテンツで示すsummary・・・detailsの内容の要約を示す
重要度★「たまに出てくるくらいのレベルのタグ」
たまに出てくるレベルですが、知っておいて損はないタグです。ただ中にはややこしいものもあると思うので覚える優先順位は低い目かなと。2回目使うときに覚えよう、くらいの感覚でいいと思います。
「セクション」
address・・・連絡先を示す
「グルーピングコンテンツ」
blockquote・・・引用・転載セクションであることを表すfigure・・・図表であることを示すfigcaption・・・図表のキャプションを示す
「テキストレベルセマンティクス」
strong・・・強い重要性を表すem・・・強勢する（アクセントを付ける）箇所を表すq・・・引用句・引用文であることを表すs・・・すでに正確ではなくなった内容を表すwbr・・・改行しても良い位置を示すcite・・・作品のタイトルを表すcode・・・プログラムなどのコードであることを示すruby・・・ルビをふるrb・・・ルビをふる文字を指定する(IE用)rt・・・ルビのテキストを指定するrtc・・・ルビテキストの集まりを指定するrp・・・ルビを囲む記号を指定するsmall・・・免責・警告・著作権などの注釈や細目を表す
「埋め込み型コンテンツ」
-
map・・・イメージマップを作成する -
area・・・イメージマップのハイパーリンク領域を設定する -
svg・・・コードを記載して画像を描画する
「表データ」
caption・・・テーブル（表）にキャプションをつけるcolgroup・・・表の縦列をグループ化するcol・・・表の縦列の属性やスタイルを指定するtbody・・・テーブル（表）のボディ部分を定義するthead・・・テーブル（表）のヘッダ部分を定義するtfoot・・・テーブル（表）のフッタ部分を定義する
「スクリプティング」
canvas・・・図形を描く
重要度ゼロ「正直使うことめったに無いので、覚えなくてもいいタグ」
全く覚えなくてもいいというよりgoogleで調べればなんでも出てくるので、暗記する必要がないという意味ですね。
「なんか見たことあるな」「こんなタグあったね」くらいでいいかなと思ってます。
「ルート要素＆文書メタデータ」
base・・・相対URLの基準となるパスを示す
「グルーピングコンテンツ」
hr・・・テーマや話題の区切りを表す
「テキストレベルセマンティクス」
dfn・・・用語が使用されていることを示すabbr・・・略語や頭字語であることを表すdata・・・さまざまなデータを表すvar・・・変数であることを示すsamp・・・確認メッセージやエラーメッセージなどの出力例kbd・・・ユーザーが入力する内容であることを示すsub・・・下付き文字を表すsup・・・上付き文字を表すi・・・声や心の中で思ったことなど、他と区別したいテキストを表すb・・・文書内のキーワードや製品名など、他と区別したいテキストを表すu・・・テキストに下線（アンダーライン）を引く（※非推奨タグ）mark・・・文書内の該当テキストを目立たせるbdi・・・隔離されたテキストを表しますbdo・・・文字表記の方向を指定する
「編集」
ins・・・追加された部分であることを示すdel・・・削除された部分であることを示す
「埋め込み型コンテンツ」
embed・・・プラグインデータを埋め込むobject・・・文書に外部リソースを埋め込むparam・・・プラグインのパラメータを指定するtrack・・・テキストトラックを表すmath・・・MathML における最上位の要素
「フォーム」
datalist・・・入力候補となるデータリストを定義するoptgroup・・・選択肢をグループ化するkeygen・・・ォーム送信時にキーを発行するoutput・・・計算結果を示すprogress・・・タスク完了までの進行状況を示すmeter・・・規定範囲内の測定値を表すfieldset・・・フォームの入力項目をグループ化するlegend・・・フォームの入力項目グループにタイトルを付ける
「インタラクティブ」
dialog・・・閲覧者が操作することが可能なダイアログを表す
「スクリプティング」
noscript・・・スクリプトが動作しない環境用の表示内容を指定するtemplate・・・スクリプトによる文書への挿入・複製が可能なHTMLの断片を定義
まとめ
個人的に使っていないだけで「これはよく使うよ」っていうタグもあるかもしれませんが、重要度★★★のものは間違いなく必要になるところなので、最初に覚えていきたいタグになります。
解説テキストの引用元：
http://www.htmq.com/
https://dekiru.net/
https://weblan3.com/
https://developer.mozilla.org/ja/
https://web-designer.cman.jp/
【フロントエンド強化月間に参加中↓↓】
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ