公開日: 2017年08月16日

初心者が必ず使うタグからHTMLのタグ一覧を総まとめ

ウェブサイト制作において、どうしても切っても切れないのがHTMLタグの知識。画像を表示するタグや文字を強調するタグなど、多様な意味を持ったタグが多種に渡って存在します。初心者にとっては、このHTMLタグと意味を覚えるのが第一の難問とも言えるでしょう。

そこで、この記事では初心者がウェブサイト制作を行う際に必要なタグと意味を一覧でまとめていきたいと思います。

初心者がまず覚えたいタグ
記事執筆時頻出の要素
HTML5で追加された要素について
その他の目的別タグまとめ
コンテンツの分類
テキストの意味
まとめ

初心者がまず覚えたいタグ

まず初めに、HTMLでウェブサイトを制作する上で欠かせない、基礎となるHTMLタグを紹介します。

タグ	意味
html	HTML文章であることを宣言している基点（ドキュメントルート）を定義する要素です。ドキュメントを構成する他の全ての要素は、このタグの中に配置する必要があります。
head	タイトルなど、ドキュメントにおける設定情報（メタデータ）を内包するための要素です。このタグの中に配置された要素は通常、ブラウザの画面には表示されません。
title	ウェブページの表題（タイトル）を定義します。一般的にはブラウザのタグやタイトルバーなどに定義された文字列が表示されます。前述のように、 `<head>` タグの中に配置する必要があります。
body	ドキュメントにおける表示領域を内包するための要素です。このタグの中に配置された要素が実際にブラウザの画面に表示されます。 `<body>` タグはドキュメント中に一つだけ配置できます。
a	アンカー（Anchor）を意味するタグで、指定の要素に対してリンクを定義する要素です。本来は単一の存在であるドキュメント同士を繋げ、蜘蛛の巣状（ウェブ状）に繋がってネットワークを形成することがウェブサイトの本質です。そういった意味でも、 `<a>` タグはHTMLにおいて重要な要素です。
div	特に意味を持たないタグで、主にこのタグで囲った要素をグループ化する用途の要素です。グループ化を行うことで指定した範囲の背景や文字色の変更など、スタイル（CSS）を指定することが可能となります。似た用途で `<span>` タグがあります。
br	ブレイク（Break）を意味しており、改行を行うための要素です。終了タグを必要とせず、単独で使用します。
table	エクセルのような表組みを意味するタグです。スタイル（CSS）が浸透する以前はレイアウト用途に使用されておりましたが、これは本来の用途ではありませんので留意しましょう。
tr	表組みの行（横方向）を定義するためのタグです。前述の `<table>` タグの中に記述しなければなりません。また、このタグの中には `<th>` または `<td>` を配置する必要があります。
td	表組みの内容を定義するタグです。エクセルでいうとセルにあたる要素です。セルの内容がデータである場合はこのタグを用います。
th	`<td>` タグと同じく内容を定義するセルにあたる要素です。`<td>` と異なる点は、セルの内容がデータに対する見出しである場合にこのタグを用います。

記事執筆時頻出の要素

次に記事などを執筆する際に用いられるHTMLタグを紹介します。主に文章に意味を持たせるタグが登場しますが、これはSEO（検索エンジン最適化）に影響するので是非とも覚えましょう。

タグ	意味
h1 〜 h6	`h` はヘディング（Heading）を意味しており、文章中の見出しを定義するタグです。`h`に続く６段階の数値が見出しの重要度を表していて、`<h1>` が最重要の大見出しとなって数値が下がるごとに小見出しという扱いとなります。
p	パラグラフ（Paragraph）を意味しており、文章中の段落を定義するタグです。通常の文章における段落と同じく、ひとかたまりの文章をこのタグで囲うことでグループ化します。また、このタグの後には自動的に改行が入ります。
img	イメージ（Image）を意味しており、文章中にイメージ画像を挿入するためのタグです。画像のパスや縦横サイズの指定など、このタグには様々な属性があるので留意が必要です。
strong	重要なテキストであると定義して、強調するためのタグです。SEO（検索エンジン最適化）として、重要キーワードをこのタグで囲むことによってクローラーがページ内容を理解しやすくするといった対策も存在します。
ul	順不同リスト（Unordered List）を意味する通り、表示順序に意味を持たないリストを定義するためのタグです。このタグの中にはリストの項目を定義する `<li>`を配置する必要があります。スタイル（CSS）の指定がない場合は通常、項目の前に黒丸や白丸などのアイコンが表示されます。
ol	順序付きリスト（Ordered List）を意味する通り、表示順序に意味を持つリストを定義するためのタグです。`<ul>`タグと同じくリストの項目を定義する `<li>`を配置する必要があります。スタイル（CSS）の指定がない場合は通常、項目の前に算用数字などのアイコンが表示されます。
li	リストアイテム（List Item）を意味しており、前述の `<ul>` や `<ol>` のリスト項目を定義するためのタグです。

HTML5で追加された要素について

2014年に新しく勧告されたHTML5。以前のバージョンより更に、多様な意味を持つタグが追加されました。タグの持つ意味を理解して、正しく利用することによってSEO（検索エンジン最適化）にも繋がります。

タグ	意味
section	このタグで囲った要素が１つのセクションであることを定義するためのタグです。セクションとは文章の１つのまとまりとみなす節目です。また仕様上、見出しを伴う意味的なグループの単位であるため、このタグの中には見出しタグ（ `<h1>` 〜 `<h6>` ）を含める必要があります。
article	上記 `<section>` と同じく、囲った要素が１つのセクションであることを定義するためのタグです。 `<section>` との用途の違いは、タグで囲われた内容が単体で完結しているかという点です。例えばブログ記事などのように単一のテーマについて書かれていて、そのセクションを切り出しても意味が成立する内容なのであれば `<section>` ではなく `<article>` を使用します。
header	ウェブページ全体や個別のセクションの導入部分（ヘッダー）を定義するためのタグです。一般的にはウェブページに対するヘッダーとして `<body>` タグの直下に設置し、サイト名やロゴ、ナビゲーションなどを設置します。
footer	`<header>` タグと同じく、ウェブページ全体や個別のセクションのフッター部分を定義するためのタグです。一般的にはウェブページに対するヘッダーとして `<body>` タグの直下に設置し、著作者に関する情報や関連ドキュメントへのリンク、著作権情報などを設置します。
main	ドキュメントの主となる内容部分を定義するためのタグです。主題に基づいた本文部分をこのタグで囲います。
nav	ナビゲーション（Navigation）を意味するタグで、ウェブページにおいて主要なナビゲーションであることを定義するタグです。例えば、ヘッダーに設置されたサイト内リンクをまとめたメニューリストなどがこれに当たります。
aside	ドキュメントの主題とは関係性が薄い内容を定義するタグです。例えば余談や補足、サイドバーに設置する関連項目などをこのタグで囲います。

その他の目的別タグまとめ

上記の主要タグ以外にも、ドキュメントの文字列に意味を定義するための様々なタグがあります。

コンテンツの分類

タグ	意味
dl	説明リストを意味するタグで、用語とその説明の定義に用います。このタグの中には後述の `<dt>` と `<dd>` を配置する必要があります。
dt	説明リストにおける用語、名前の定義に用います。
dd	説明リストにおける用語の説明の定義に用います。
figure	図表など本文からは独立した自己完結型のコンテンツを定義するタグです。例えば、本文から参考文献として参照されるような画像や図表がこれにあたります。
figcaption	`<figure>` のキャンプションや説明を定義するタグです。そのため、 `<figure>` タグの中に配置する必要があります。

テキストの意味

タグ	意味
sub	表記規則の理由で小文字で、またはメインのテキストより小さく表示されるべきテキストの範囲を定義します。
sup	表記規則の理由でメインのテキストよりも高い位置に、または小さく表示されるべきテキストの範囲を定義します。
ruby	対象の単語の読み仮名を定義するタグです。このタグの中には後述の `<rt>` で読みとなるテキストを定義する必要があります。
rt	`<ruby>` タグで囲われた単語の読み仮名を定義するタグです。