#どうも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制作のちょいテク詰め合わせ