【 HTMLタグ 】の種類と分類について解説します~HTML基礎~

< 所要時間 > 10分程度

このような方にオススメの記事

  • divタグを乱用している方
  • HTMLの学習を始めた方

【 HTMLタグ】

について、どのような種類があるのか、それぞれどのように分類されているのかについて解説していきます。

余談ですが、『divタグ多いな~』って感じたことありませんか。先日クラウドソーシングで見かけた募集要項に『divタグばかり使うのはやめてください。』という項目があったのを思い出しました。そこで一度タグについておさらいし、適切な箇所に適切な要素を指定できるようにしていこうと思います。

この記事では、タグは大まかにこのくらいあって、こういう種類のものがあるのか、くらいに理解していただければと思います。

contents

タグの種類と分類

html5にて指定できるタグは全部で全部で108種類あります。

その108種類は下記の15のカテゴリーに分類される。(HTMLクイックリファレンスを参照

①文書情報・構造

②テキストの表現

③テキストの意味

④リンク

➄画像・動画・埋め込み

⑥表・レイアウト

➆フレーム

⑧レイヤー

⑨入力フォーム

⑩リスト

⑪スクリプト

⑫スタイルシート

⑬範囲指定

⑭コメント

⑮ソースの表示

上から順に大まかな特徴と分類されている代表的なタグをみていきましょう。

①文書情報・構造

文書に関する情報や、HTMLであるという宣言をするタグ等、文書の土台となるタグが含まれます。代表的なタグとしては、<!DOCTIPE>,<HTML>,<HEAD>などが挙げられます。

②テキストの表現

テキストの種類や色、配置等テキストの表現を指定するタグが含まれます。代表的なタグとしては、<FONT><B><STRIKE>などが挙げられます。

③テキストの意味

テキストが引用、転載であることや変数、引数であることなどを指定するタグが含まれます。代表的なタグとしては、<CITE><EM><INS>等が挙げられます。

④リンク

リンク、つまりURLやパス等の指定をするタグが含まれます。代表的なタグとしては<A>,<AREA>,<LINK>などが挙げられます。

➄画像・動画・埋め込み

画像や動画の表示や、データの埋め込み等を指定するタグが含まれます。代表的なタグとしては<IMG>,<OBJECT>,<PARAM>等が挙げられます。

⑥表・レイアウト

表やテーブルの表示、それらのタイトル等を指定するタグが含まれます。代表的なタグとしては<TABLE><TR><TD>などが挙げられます。

➆フレーム

レイヤーを表示するタグ等が含まれます。代表的なタグとしては<LAYER>などが挙げられます。

⑧レイヤー

レイヤーを表示する際に指定されるタグ等が含まれます。代表的なタグとしては、<FLAMESET><FLAME>などが挙げられます。

⑨入力フォーム

フォームを表示する際に使用されるタグで、入力フォームやフォームの送信ボタン等を指定するタグが含まれます。代表的なタグとしては、<FORM>,<INPUT>などが挙げられます。

⑩リスト

リストを表示する際に使用されるタグで、順序のありなし等を指定するタグが含まれます。代表的なタグとしては、<UL>,<OL>などが挙げられます。

⑪スクリプト

java等スクリプトを記述する際に使用されるタグが含まれます。代表的なタグとしては、<SCRIPT>,<NOSCRIPT>が挙げられます。

⑫スタイル

スタイルシートを記述する際に使用するタグ。<STYLE>が挙げられます。

⑬範囲指定

ブロック要素やインライン要素などのかたまりの範囲を指定するタグが含まれます。代表的なタグは、<DIV>,<SPAN>が挙げられます。

⑭コメント

文書には表示しないコメントであることを指定するタグ等が含まれます。代表的なタグは、<!—->,<COMMENTが挙げられます。

⑮ソースの表示

記述した文書のスペースや改行をそのまま反映させる際などに指定されるタグが含まれます。代表的なタグとしては、<PRE>,<PLAINTEXT>等が挙げられます。

覚える必要はない

上記、HTML5に指定できるタグの分類と代表的なタグを挙げてきましたが、

これらを全て覚えようとするのはHTMLを学ぶ上で効率が悪いです。実際にコードを書いて、こういうタグがあるんだって調べながら引き出しを増やしていく方がいいと思います。

それには理由があって、実際主に使用するタグは100種類のうち半分以下で、ほとんど記述することがないタグを覚えることはほぼ無意味だということです。まあ、使わないですからどうせ忘れますしね。。。

今後の記事でこれらのカテゴリーごとにタグの使用方法も含めて解説していければと思います。

ありがとうございました。

ABOUT AUTHOR

portfolio-image

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。

お問い合わせはこちらから
関連記事
html

【 文書情報・構造タグ 】HTMLの文書・構造タグについて解説します~HTML入門~

html

【 imgタグ 】で画像を出力する方法について解説します~HTML入門~

html

【 HTMLタグ 】の種類と分類について解説します~HTML基礎~

html

【 MAPタグ/AREAタグ】について解説します~HTML入門~