【初心者でも使える!】HTMLで使用するタグの一覧を紹介!

HTMLでは基本的に内容をタグで挟んで記述していきます。

タグには様々な種類があり、それぞれに意味があります。
タグを囲むことでこの内容は「見出しとして表示する」であったり、「文章として表示する」であったり、「表として表示する」であったり、「画像として表示する」などの指示の役割を果たしています。

そのため、インターネット上に存在する多くのホームページがHTMLを使って作られています。

今回はHTMLで使用する以下の場合で使用するタグについて初心者の方でもすぐに使えるよう紹介していきます。

⚫︎ HTMLの文章を示す場合
⚫︎ HTML文書のヘッダ部分を出力する場合
⚫︎ ページの情報を記述する場合
⚫︎ ページのタイトルを記述する場合
⚫︎ 外部ファイルを参照する場合
⚫︎ 文章の本体を表示する場合

⚫︎ 見出しを作成する場合
⚫︎ 文章の段落を作成する場合
⚫︎ リンクを設定する場合
⚫︎ 文字を太文字にする場合
⚫︎ 画像を挿入する場合
⚫︎ 文の一部分のみ装飾する場合

⚫︎ 表全体を囲む場合
⚫︎ 表の1行を囲む場合
⚫︎ 表の見出しを作成する場合
⚫︎ 表のデータセルを作成する場合

⚫︎ フォーム画面を作成する場合
⚫︎ 1行のテキストを入力する場合
⚫︎ ラジオボタンを作成する場合
⚫︎ 送信ボタンを作成する場合
⚫︎ 複数行のテキスト欄を作成する場合

⚫︎ ヘッダー部分を作成する場合
⚫︎ ナビゲーションメニューを作成する場合
⚫︎ テーマを持つグループを作成する場合
⚫︎ メインのコンテンツを作成する場合
⚫︎ フッター部分を作成する場合
⚫︎ 意味のないブロック要素を作成する場合

タグとは

タグとはHTMLで出力したい内容を囲み、囲んだ内容は何とし出力するのか指示を与えるものです。
HTMLでは基本的に出力する内容をこのタグで挟んで記述していきます。

タグの書き方

タグは下記にように記載します。

タグにはたくさんの種類があり「どのタグで挟むか」によってその部分の役割が変わってきます。
また、「<」と「>」で囲まれた最初に書かれる方を開始タグ、それに「/」が加えられた、後から書かれる方を終了タグと言います。

この開始タグと終了タグは基本的にセットで使われますが、場合によっては終了タグのないものもあります。
開始タグから終了タグまでの1つのかたまりを要素と言います。

htmlタグを書くときの注意点

⚫︎ 半角英数字で書く
ファイル名と同じように、タグに全角文字を使うことはできませんので注意してください。

⚫︎ 大文字と小文字の区別はない
基本的に大文字と小文字の区別はありません。
しかし、バージョンによっては小文字で記述する必要がある場合もあるので、小文字で統一した方が良いです。

⚫︎ タグの中にあるタグ(入れ子)
HTMLでは開始タグと終了タグの間に別のタグが入っていることも多くあります。
例えば、htmlタグの中にheadタグが、さらにその中にtitleタグが入っています。
このような書き方を入れ子と呼びますが、入れ子にする場合は必ず手前にあるタグから順に終了タグを書きましょう。

基本の構造やhead内で使用するタグ

ここでは、下記のような基本の構造やhead内で使用するタグを紹介します。

出力結果

HTMLの文章を示す場合

htmlタグは、HTML文書だということを表すタグとであり、HTML文書において基点となる要素となります。
ます。

htmlタグの構文は下記となります。

htmlタグ内に要素を書くことで、その要素がHTMLとして出力されます。

HTML文書のヘッダ部分を出力する場合

headタグは、HTML文書のヘッダ部分を出力するタグとなります。

headタグ構文は下記となります。

ブラウザーには表示されませんが、この中に検索エンジンのための説明文やCSSファイルへのリンク、ページタイトルなどを記述します。

ページの情報を記述する場合

mataタグは言語や説明文など、ページの情報を記述するタグとなります。

mataタグの構文は下記となります。

これは文字コードを「UTF-8」にすると言う指定です。
これが正しく表記されていないと文字化けをしてうまく言葉が表示されない場合があるので必ず記述しましょう。

このページについての説明文を書きます。
検索エンジンでページタイトルとともに表示される部分になります。

ページのタイトルを記述する場合

titleタグはページのタイトルを記述するタグとなります。

titleタグの構文は下記となります。

この部分がブラウザーのタブやブックマークしたときのページタイトルとして表示されます。

外部ファイルを参照する場合

linkタグは外部ファイルを参照する際に使用するタグとなります。

linkタグの構文は下記となります。

hrefの後に読み込みたいファイル名を指定します。
主にCSSファイルを読み込む時に使用します。

文章の本体を表示する場合

bodyタグはHTML文章の本体部分に値するタグです。

bodyタグの構文は下記となります。

bodyタグ内にコンテンツを入力することで実際にブラウザ上で表示されます。

コンテンツ内で使用するHTMLタグ

ここでは、下記のようなコンテンツ内で使用するHTMLタグについて紹介していきます。

出力結果

見出しを作成する場合

h1〜h6タグは見出しを表示するタグです。

h1〜h6タグの書き方は下記となります。

h1〜h6までの6種類のタグあり、h1が一番大きな見出しでウェブページのタイトルや記事のタイトルなどにもよく使われます。
hの後の数字が大きくなるほど小さい出しになっていきます。

文章の段落を作成する場合

pタグは文章の段落を表すタグです。
pは英語で没落を意味する「Paragraph」のpからきており文章のまとまりを表示するときにはこのタグを使用します。

pタグの構文は下記となります。

pタグ絵を使用すると、ブラウザの表示でも段落ごとに改良され段落の間には少しスペースができます。
改行がされない長い文章は読みにくくなるのでpタグを追加して段落を分けて表示しましょう。

リンクを設定する場合

aタグはリンクを貼るタグとなります。

aタグの構文は下記となります。

リンク先をhref属性で指定することで、指定したページへ移動することができます。
また、aタグの間に文字列を記載すると、HTMLではそのリンクを持つ文字列を作成することができます。

文字を太文字にする場合

strongタグとは1文字で表示されるタグとなります。

strongタグの構文は下記となります。

strongタグは太文字で表示されるので重要性のある文字や、強調したい文字につけると良いです。

画像を挿入する場合

imgタグは画像を表示するタグです。
普通のタグのように終了タグがありませんので注意してください。

imgタグの構文は下記となります。

srcの後ろには「.jpg」や「.png」といった画像名を入力します。
また、altの後ろにはうまく画像が表示されなかった場合の代わりに表示する文字を指定することができます。

文の一部分のみ装飾する場合

spanタグは意味の持たないインライン要素となるタグです。
CSSでこの文字だけ赤くしたいなど、部分のみ装飾するときに使用されます。

表の作成に使用するタグ

ここでは下記のような表を作成する際に使用するタグを紹介します。

出力結果

表全体を囲む場合

tableタグは、表を示すタグです。
表の全体を囲みます。

tableタグの構文は下記となります。

表の1行を囲む場合

trタグは表の1行を囲むタグです。

trタグの構文は下記となります。

表の見出しを作成する場合

thタグは表の見出しとなるセルを作成するタグです。

thタグの構文は下記となります。

表のデータセルを作成する場合

tdタグは表のデータとなるセルを作成するタグです。

tdタグの構文は下記となります。

フォーム画面の作成で使用するタグ

お問い合わせ画面や会員登録など様々な場面でフォーム画面を見ることがあるかと思います。
ここでは、以下の画面のように、フォーム画面を作成する際に使用するタグを紹介します。

出力結果

フォーム画面を作成する場合

formタグフォームを作成するタグです。

formタグの構文は下記となります。

actionにはデータの送信先を指定し、methodにはデータの送信方法を指定し、nameはフォームの名前を指定します。

1行のテキストを入力する場合

input type = “text”タグは1行のテキストを入力するタグです。

input type = “text”タグの構文は下記となります。

placeholderの後ろにタ文字列を指定すると、入力欄にテキストを用意することができます。

ラジオボタンを作成する場合

input type = “radio”タグはラジオボタンを作成するるタグです。

input type = “radio”タグの構文は下記となります。

送信ボタンを作成する場合

input type = “submit”タグは送信ボタンを作成するタグです。

input type = “submit”タグの構文は下記となります。

複数行のテキスト欄を作成する場合

textareaタグは複数行のテキスト欄を作成するタグです。
お問い合わせ内容やメッセージを入力するときによく使われます。

textareaタグの構文は下記となります。

ブロック要素のグループ分けで使用するタグ

ブロック要素でグループ分けをすることでまとまりごとにレイアウトを組むことができます。
ここでは、下記のようなブロック要素のグループ分けで使用するタグを紹介します。

出力結果

ヘッダー部分を作成する場合

ヘッダー部分を作成する場合はheaderタグを使用します。
headerタグはページのヘッダー部分を作成するタグとなります。
HTMLファイルの冒頭に記述するhead要素とは異なるタグなので注意しましょう。

headerタグの構文は下記となります。

ナビゲーションメニューを作成する場合

navタグはナビゲーションメニューを作成するタグです。
headerタグの中に含まれることが多いので、基本的にメインではないメニュー部分には使いません。

navタグの構文は下記となります。

テーマを持つグループを作成する場合

sectionタグは意味のあるグループをまとめるためのタグです。
1グループに一つのテーマがある時によく使われます。

テーマ持ちのグループを作成するタグの構文は下記となります。

メインのコンテンツを作成する場合

mainタグはメインのコンテンツを作成するタグです。
そのページのミソとなるコンテンツを囲むタグとなります。

mainタグの構文は下記となります。

フッター部分を作成する場合

footerタグはページのフッター部分を作成するタグです。

footerタグの構文は下記となります。

意味のないブロック要素を作成する場合

divタグは意味のないブロック要素を作成するタグです。
デザインのためだけにグループ化するなど、とにかく一まとめにしたいがどれが適切かわからないといった場合に使います。

divタグの構文は下記となります。

今回のポイント

HTMLを作成するにはタグが必要

⚫︎ HTMLでは基本的に出力する内容をタグで囲んで記述する

⚫︎ HTMLの文章を表示するにはhtmlタグを使用する

⚫︎ HTML文書のヘッダ部分を出力するにはheadタグを使用する

⚫︎ ページの情報を記述するにはmataタグを使用する

⚫︎ ページのタイトルを記述するにはtitleタグを使用する

⚫︎ 外部ファイルを参照するにはlinkタグを使用する

⚫︎ 文章の本体部分を表示するにはbodyタグを使用する

⚫︎ 見出しを作成するにはh1〜h6タグを使用する

⚫︎ 文章の段落を表すにはpタグを使用する

⚫︎ リンクを設定するにはaタグを使用する

⚫︎ 文字を太文字にするにはにはstrongタグを使用する

⚫︎ 画像を挿入するにはimgタグを使用する

⚫︎ 文の一部分のみ装飾するにはspanタグを使用する

⚫︎ 表全体を囲むにはtableタグを使用する

⚫︎ 表の1行を囲むにはtrタグを使用する

⚫︎ 表の見出しを作成するにはthタグを使用する

⚫︎ 表のデータを作成するにはtdタグを使用する

⚫︎ フォーム画面を作成するにはformタグを使用する

⚫︎ 1行のテキストを入力するにはinput type = “text”タグを使用する

⚫︎ ラジオボタンを作成するにはinput type = “radio”タグを使用する

⚫︎ 送信ボタンを作成するにはinput type = “submit”タグを使用する

⚫︎ 複数行のテキスト欄を作成するにはtextareaタグを使用する

⚫︎ ヘッダー部分を作成するにはheaderタグを使用する

⚫︎ ナビゲーションメニューを作成するにはnavタグを使用する

⚫︎ テーマを持つグループを作成するにはsectionタグを使用する

⚫︎ メインのコンテンツを作成するにはmainタグを使用する

⚫︎ フッター部分を作成するにはfooterタグを使用する

⚫︎ 意味のないブロック要素を作成するにはdivタグを使用する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し