最初に覚えるべきHTMLタグの種類
Updated
2021/8/8 9:46
Author
Jumpei Ikegamiorder
3
HTMLタグには、
pタグ、aタグ、imgタグなど、様々な種類があります。全ての種類を数えると、100以上もあるそうです。しかし、よく使われるHTMLタグは限られています。全ての英単語を覚えなくても英文が読めるように、HTMLタグの種類を全て覚える必要はありません。ここでは、最初に覚えるべきHTMLタグについて紹介します。
他のタグで代替できないHTMLタグ
HTMLタグの中には、唯一無二の役割をもったタグが存在します。数は少ないですが、覚えるべきタグであることが多いです。
Webページとしての体裁を整えるためのタグ
一般的に、HTML5と呼ばれる最新のHTML仕様で書かれたWebページは、次のようなHTMLで表現されます。
HTML
冒頭の
<!DOCTYPE html>というのは、「このページはHTML5で書かれてますよ」という宣言です。HTMLをWebページとして公開する場合は、ブラウザにWebページを適切に表示してもらうために必要です。それ以降の部分で登場するタグは、次の通りです。
htmlタグ
headタグ
metaタグ
titleタグ
bodyタグ
HTMLドキュメントの構成を見てみると、全体を囲む
htmlタグの中身がheadタグとbodyタグに分けられています。headタグの中では、実際のコンテンツではなく主にそのページに関するメタ情報を記述します。metaタグは、このWebページが書かれている文字コードなど、まさにメタ情報を追加するためのタグです。ちなみに、FacebookやTwitterなどでシェアされた場合のサムネイル画像などもこのmetaタグで指定します。また、代表的なメタ情報として、titleタグを使ってそのWebページのタイトルを指定できます。ここで記述したタイトルは、ブラウザのタブに表示されます。bodyタグの中には、Webページをブラウザで開いたときに表示される実際のコンテンツを記述します。これ以降に登場するタグは、基本的には全てbodyタグの中に書かれます。
コンテンツ表示に使われる唯一無二のタグ
実際のコンテンツで使われるタグの中で、固有の役割をもっている主なタグは、次の4種類あります。
aタグ
imgタグ
brタグ
- ユーザーからのインプットを受け付けるタグ
aタグ
aタグは、ページリンクに使われます。href属性を使ってリンク先URLを指定します。HTML
aタグの詳細は次のリファレンスをご覧ください。imgタグ
imgタグは、画像の表示に使われます。src属性を使って画像URLを指定します。HTML
imgタグの詳細は次のリファレンスをご覧ください。brタグ
brタグは、表示時に改行させるために使われます。HTMLでは書き方の汎用性を担保するためにそのまま改行を打っても表示時は無視されます。明示的に改行を表現するためには、brタグを使う必要があります。HTML
なお、後述するブロック要素を使う場合、基本的にその前後は改行されます。ブロック要素をうまく使うことで
brタグを使う必要がなくなるケースは多いです。ユーザーに何かを入力させるためのタグ
ユーザーからのインプットを受け付けるのに使うタグにはいくつかの種類があります。
inputタグは、type属性に何を指定するかに応じて、入力方法が変わります。指定できるtype属性だけで20種類以上ありますが、代表的なものは次の3つです。type="text"
type="radio"
type="checkbox"
HTML
なお、
name属性は主にその回答を後から利用するときの識別のための使います。value属性には、回答した場合の値を指定します。1行のテキスト入力は
inputタグのtype="text"でしたが、複数行を入力させたい場合はtextareaタグを使います。inputタグは閉じタグが不要でしたが、使い方がほとんど同じであるtextareaタグはなぜか閉じタグが必須になっています。HTML
セレクトボックスは、
selectタグとoptionタグを組み合わせて表現します。HTML
なおこれらの「ユーザーからのインプットを受け付けるタグ」は、
formタグの中で使われて入力フォームを構成するため、「フォーム部品」と呼ばれることもあります。
他のタグで代替できるタグ
100種類以上あるHTMLタグの多くは、Webページのレイアウトやテキストの表示のために使われるタグです。これらのタグのほとんどは、他のタグを使っても同様の表現が実現できます。
コンテンツ表示に使われるタグは、その表示方法によって次の2つに大別されます。
- ブロック要素をつくるタグ
- インライン要素をつくるタグ
（厳密にいえば、HTML5ではブロック要素やインライン要素はより上位の「コンテンツ・モデル」という概念に吸収されましたが、ここでは説明の都合上そのことは忘れます）
ブロック要素とは、ヘッダー、見出し、段落など1つのまとまった領域をつくるための要素です。表示上は、前後に改行が入ります。
インライン要素とは、主にブロック要素の中で使われ、文章の中にインラインで表示されるような要素です。表示上は、前後に改行が入りません。
たとえば、チュートリアルで紹介した次のHTMLを見てみましょう。
HTML
ここでは、
h1やh2はブロック要素、labelやinputはインライン要素です。その証拠に、ブロック要素の前後はデフォルトで改行されますが、インライン要素の前後はbrタグを入れないと改行されません。大抵の場合、ブロック要素をつくるタグは、ブロック要素をつくる他のタグでも代替することができます。インライン要素をつくるタグについても同様です。
ブロック要素をつくるタグ
ブロック要素をつくるタグは、主に以下です。
divタグ
h1〜h6タグ
pタグ
ulタグ
liタグ
最も汎用的に使えるのは、division（区切り）を意味する
divタグです。極端に言えば、ほとんどのブロック要素はdivタグを使って表現できます。h1〜h6タグは見出し（Heading）で、pタグは段落（Paragraph）で、ulタグは箇条書き（Unordered List）領域全体で、liタグはその中の個々のアイテム（List Item）で使われます。
インライン要素をつくるタグ
インライン要素をつくるタグは、主に以下です。
span
label
最も汎用的に使えるのは
spanタグです。極端に言えば、ほとんどのインライン要素はspanタグを使って表現できます。labelは、上述した「ユーザーからのインプットを受け付けるタグ」の隣で項目名を表示するために使われます。HTMLタグとセマンティクス
冒頭で述べたように、HTMLタグは100種類以上あります。なぜHTMLタグの種類はこんなに多いのでしょうか。その理由は大きく2つあります。
1つは、歴史的な経緯によるものです。HTMLは、CSSが登場する以前から存在しました。そのため、昔はHTMLタグで文字装飾などを指定するのが一般的でした。今ではあまり使われなくなりましたが、スタイルを指定するためだけのHTML要素が多数存在します。たとえば次のようなタグです。
iタグ: イタリック
uタグ: アンダーライン
bタグ: 太字
その後、CSSの登場によりHTMLでスタイルを指定する必要はなくなりました。しかし、古いWebページであっても問題なく表示できるようにするため、HTMLの仕様としてはこれらの不要なタグも残されています。ちなみに、このように昔の仕様をサポートし続けることを「後方互換性を担保する」と言います。HTMLやJavaScriptなどは、新しい仕様が追加されるときも後方互換性に対してかなり配慮されています。
2つ目の理由は、セマンティクスを表現するためです。「セマンティクス」とは、プログラムなどが持つ「意味」のことです。HTMLでいうと、その要素がどのように見えるかではなく、その要素にどんな意味や役割があるか、を指します。見た目は同じでも、意味を表現するためのHTMLタグが多数存在します。たとえば、次のようなタグはセマンティクスを表現するためのタグです。
h1〜h6タグ: 見出し
pタグ: 段落
articleタグ: 記事
sectionタグ: セクション
headerタグ: ヘッダー
footerタグ: フッター
セマンティクスに配慮することで、Webページとして見たときの見た目は同じでも、ブラウザやGoogleのbotに対してわかりやすく意味を伝えられるようになります。それによって、アクセシビリティが向上したり、SEO的に有利になったりすることがあります。また、HTMLを編集する人間にとっても、タグが適切に使い分けられていることで修正箇所がわかりやすくなります。書き捨てのHTMLを書くときは特に考慮する必要はありませんが、慣れてきたらセマンティクスを気にしてみるといいかもしれません。
もっと詳しく知りたい方へ
なお、個々のHTMLタグの使い方については、実際に使う際にググることでたくさんの記事が出てきます。