初心者が知っておくべきHTMLのタグ20選！目的別に分かりやすく解説
ナレッジ
この記事では、どんなHTMLのタグがあるのか知りたい人に向けて、よく使われるHTMLのタグを20種類ご紹介していきます。
これからコーディングを勉強しようと考えている人は、まず基礎から学ぼうと思います。
HTMLがどういうものかわかれば次はタグについて知りたくなりますが、タグは100種類以上あるので全て覚えるのは大変です。
HTMLも日々進歩しておりますので、現在では使われなくなったタグがでてきたり、解釈や用法が変わるタグ、そして新たなタグが生まれたりしています。
そのため、HTMLのタグについて知りたいなら、まずよく使われるタグから覚えると良いでしょう。
そこで、まだHTMLに触れたことがない人に向けて、HTMLの表示方法もお伝えしていきます。
HTMLを打ち込む際の注意点もご紹介するので、この記事でHTMLのタグについて理解が深まるはずです。
目次
1.HTMLのよく使うタグ目的別の一覧
まず初めに、使うことが多いHTMLのタグを20種類ご紹介します。
それぞれの意味やタグの書き方、実際にそのタグを使うとどのようにWeb上で表示されるかもお伝えするので参考にしてください。
1-1.全ての基本となるタグ
1-1-1.<html>
<html>は最初に<html>と記述して最後に</html>で終わることで、その文書がHTMLの文書であることを指すタグです。
See the Pen
html by Sinji Oosawa (@s-Osawa)
on CodePen.
タグの中でもっとも外側に記述されるタグで、<html>と</html>で文書全体を囲って「この文書がHTMLの文書である」とブラウザ（Webサイトを見るアプリ）に伝えることができるのです。
HTMLでコーディングする際には必ず記述するタグであるといえます。
1-2.文書情報を表すタグ
| タグ | 意味 |
|---|---|
| <head> | 文書の情報を表意味する（基本的にユーザー側に見えない） |
| <meta> | キーワードやメタディスクリプションなどの関連情報を意味する |
| <title> | ページのタイトルを意味する |
| <link> | 関連するファイルを読み込む |
1-2-1.<head>タグ
<head>はブラウザや検索エンジン(yahoo!やGoogleなど)のロボット(クローラーなど)に必要な情報を渡すために記述されるタグです。
See the Pen
ヘッダ by Sinji Oosawa (@s-Osawa)
on CodePen.
そのため、Webサイトを見る人(ユーザー)側には見えません。
<head>の中には<meta>や<title>といったタグが記述されます。
1-2-2.<meta>タグ
<meta>はそのWebサイトのキーワードや、検索したときタイトルの下に表示される説明文(ディスクリプション)などを記載するタグです。
つまり、Webサイトの情報を書き込むタグと言えます。
ディスクリプションは下記の画像のような、Webサイトの解説が書いているところです。
最近ではSNSにシェアされたときに「こういう内容で表示してほしい」というリクエストのために<meta>を使うことがあります（OGP設定）。
1-2-3.<title>タグ
<title>はそのページのタイトルを決めるタグです。
例えば、下記の画像のようにページ上部にあるタイトルを指定するときに使われます。
<head>の中に記述されるタグの中でも特殊で、検索エンジンのロボットもユーザーも見ることができるタグです。
1-2-4.<link>タグ
<link>は外部のファイルを読み込むときに使われるタグです。
例えば、文章を装飾するCSSのデータを読み込んで、反映するために使われています。
Webフォントの読み込みや、インターネットで検索した際に表示されるWebサイトのアイコン(ファビコン)の読み込みにも使われます。
ここまでのタグは全て<head>の中に記述されます。
1-3.特定のグループをまとめるタグ
| タグ | 意味 |
|---|---|
| <body> | ユーザーに見える文書の情報を意味する |
| <section> | 長い文章の一部をくくる |
| <div> | まとまりをくくる |
| <header> | ページの冒頭であることを意味する |
| <footer> | ページの下部であることを意味する |
| <h1>～<h6> | 見出しを作る |
1-3-1.<body>タグ
<body>はユーザーが見れる文書の情報を書き込むときに使われるタグです。
See the Pen
Body by Sinji Oosawa (@s-Osawa)
on CodePen.
ただ文章を書くだけだと、ロボットが文章だと認識できずブラウザ上に表示されません。
<body>で文章を囲んであげることで、文章だと伝わりブラウザ上に表示されるのです。
1-3-2.<section>タグ
<section>はまとまりをくくるタグです。
See the Pen
セクション by Sinji Oosawa (@s-Osawa)
on CodePen.
主に文章でいうところの1章や2章などの章に分けるときに使われます。
<section>を使うことで、ここで「章分けされている」とロボット側に伝えることができます。
1-3-3.<div>タグ
<div>はそれ自体に特に意味を持たないグループをまとめるタグです。
See the Pen
div by Sinji Oosawa (@s-Osawa)
on CodePen.
<section>と同じようにまとまりをくくる役割があって、主に構成ごとに区切るために使います。
<div>と</div>で囲うことによって、その囲ったものがひとまとまりのグループであることをロボットに伝えることができます。
1-3-4.<header>タグ
See the Pen
ヘッダ by Sinji Oosawa (@s-Osawa)
on CodePen.
<header>はページの冒頭にあたる部分で使われるタグです。
例えば、画像やそのページのタイトル、会社概要などが<header>のタグで囲われます。
つまり<header>は、ページの上部の部分で使われるタグなのです。
1-3-5.<footer>タグ
<footer>は<header>と反対にページの下部で使われるタグのことです。
ページの下部では主に、連絡先やお問い合わせ情報が記載されています。
<footer>のタグを使うことで、ここはページの下部であるとロボットに伝えることができます。
1-3-6.<h1>～<h6>タグ
<h1>～<h6>タグは文章の見出しを表現するタグです。
See the Pen
xoywVX by Sinji Oosawa (@s-Osawa)
on CodePen.
小さい数字ほど、大きい見出しになります。
1-4.文章や画像などのコンテンツであることを意味するタグ
| タグ | 意味 |
|---|---|
| <a> | リンクを表す |
| <img> | 画像を表す |
| <p> | 文章の段落を表す |
| <table> | 表を表す |
1-4-1.<a>タグ
<a>はリンク先を指定したり、外部ファイルを表示させたりするときに使われるタグです。
See the Pen
ANA by Sinji Oosawa (@s-Osawa)
on CodePen.
タグの中にはリンク先の情報が書き込まれます。
1-4-2.<img>タグ
<img>は画像を指定の場所に読み込むタグです。
See the Pen
img by Sinji Oosawa (@s-Osawa)
on CodePen.
タグの中に画像の置いてある場所(パス)を記載することで、画像が読み込まれて表示されます。
<img>は閉じタグ</img>を省略することができます。
1-4-3.<p>タグ
<p>は文章の段落をひとまとめにするタグです。
See the Pen
Ptag by Sinji Oosawa (@s-Osawa)
on CodePen.
<p>と</p>で文章を囲うことで、段落に分けることができます。
1-4-4.<table>タグ
<table>は主に表を作る際に使われるタグです。
See the Pen
table by Sinji Oosawa (@s-Osawa)
on CodePen.
その中でも横の行や縦の行を作るために以下のタグが使われます。
<th>
見出し(一番上の行)を作るタグ
<tr>
縦の列を作るタグ
<td>
横の行を作るタグ
CSSがなかったころは<table>タグでレイアウトをすることがありましたが、今ではCSSでレイアウトの構成を行えるので<table>タグはほぼ表でしか使われることがありません。
1-5.JavaScriptを実行するために使用するタグ
1-5-1.<script>タグ
<script>は文章にJavaScriptを組み込むタグです。
JavaScriptはメニュー(ハンバーガーメニュー)など動きのあるものを作ることができるプログラミング言語です。
そのJavaScriptを動かすときに<script>が使われます。
2.HTMLをブラウザで表示して確認する方法
ここまで各タグについて解説してきましたが、タグは実際に打ち込むことで覚えることが出来ます。
打ち込んでWeb上でどのように表示されるかわかれば、いつ使えば良いのかも更に理解することができるのです。
そのためには、まずテキストエディタと呼ばれるソフトをダウンロードしましょう。
2-1.テキストエディタをダウンロードする
まずはテキストエディタをダウンロードしましょう。
テキストエディタは文字を入力してメモ帳として使ったり、簡単な文書を作成したりできるパソコンのソフトです。
Windowsの「メモ帳や」Macの「テキストエディット」など標準でインストールされているテキストエディタもあります。
テキストエディタの中でも「ATOM」や「DreamWeaver」というソフトは、コーティングする際のサポート機能(プラグインも含む)がついているので、タグを打ち込みやすくなっています。
例えば、下記の画像のように<a と途中まで書き込んだ場合、メモ帳であればそのままタグを打ち込まなければいけません。
しかし「DreamWeaver」などのテキストエディタは<a と途中まで書き込んでくと、その文字から始まるタグを補助表示してくれます。
このようにタグを打ち込む手間が省けるので、テキストエディタをダウンロードすると良いでしょう。
テキストエディタは「ATOM」や「DreamWeaver」がおすすめです。
※まずやってみたい人は、メモ帳のソフトでもhtmlを記述することができます。
2-2.htmlのタグを打ち込む
次に、テキストエディタにHTMLのタグを打ち込んでみましょう。
下記にサンプルのコードを用意したので、そのタグをテキストエディタに打ち込んでください。
<!doctype html>
<html>
<head></head>
<body>
<section>
<h1>見出しが入ります</h1>
<p>本文が入ります</p>
</section>
</body>
</html>
上記ではタグを見やすくするためにスペース(タブスペース)を空けて整理してますが、わからない人は左詰にして書いても問題ありません。
そして、ファイル名を「test.html」にして保存しましょう。
2-3.ブラウザ上にHTMLを表示する
htmlのタグを打ち込むで保存したファイルをブラウザのページにクリックしたまま動かしましょう。(ドラッグ&ドロップ)
そうすると、以下の画像のような文字が表示されるはずです。
テキストエディタによっては特定のキー(ショートカットキー)を押すことでブラウザ上に表示できますが、使っているパソコンによってキーが異なるので今回はドラッグ&ドロップでできる方法を紹介しました。
このようにして、打ち込んだHTMLのタグがどんな表示がされるのか確認していけば、タグを覚えやすいでしょう。
※ここで利用しているブラウザはGoogle Chrome(グーグルクローム)です。
3.HTMLのタグを記述するときの注意点
HTMLのタグは記述するときに注意する点が2つあります。
もしこの2つのことを意識せずにタグを記述すると、正しい表示がされないばかりか、後々別の人がそのHTMLの編集をするときに苦労してしまうでしょう。
3-1.HTMLの構造を理解する
HTMLのタグを記述するときは、HTMLの構造を理解した上で記述するようにしてください。
なぜなら、HTMLはルールに従って記述しないと正しく表示されないからです。
もっともわかりやすいのが、開始タグだけを記述して終了タグを記述しないことです。
・<html>＝開始タグ
・</html>＝終了タグ
終了タグはスラッシュ(/)が入ったタグのことです。
この終了タグを記述しなければ、そのタグがどこまで指定しているのかパソコンがわかってくれないので正しく表示されません。
その他にも理解しておくべき構造があるので、タグを記述する前に構造について理解しておきましょう。
※HTMLの構造を理解するならHTML5&CSS3デザインブックなどの書籍がおすすめです。
3-2.わかりやすい記述をする
HTMLのタグは誰が見てもわかるように、わかりやすく記述する必要があります。
記述したHTMLはあなただけが見るのなら、自分でわかるように記述すれば良いです。
しかし、今後Webデザイナーなどコーディングを職業にするなら、あなた以外の人もあなたが記述したHTMLを見ることがあります。
その際に、自分だけがわかるようにHTMLのタグを記述していては、他の人の仕事に支障をきたしてしまうでしょう。
そのため、誰が見てもわかるようにHTMLのタグを整理して記述する必要があるのです。
4.まとめ
HTMLのタグは全部で100種類以上あるので、全て覚えるには時間がかかってしまいます。
初心者の方はそもそも覚える段階で挫折してしまうかもしれません。
そのため、まずはよく使われるHTMLのタグを20種類覚えるようにしましょう。
そして、HTMLのタグを打ち込んで自分でWeb上に表示するようにすれば、次第にHTMLの理解が深まります。
