HTML初級者向けに、HTMLでよく使うタグと使用例を目的別にまとめています。
HTMLは、コードを書く前に「このコンテンツには、どのタグを使うべきか」ということをイメージし判断できることが大切です。イメージと判断がスムーズにできるようになると、HTMLの実装が楽になり書くスピードが速くなります。
はじめは、一般的によく使われる基本的なタグの使用例を見ながら書く練習をしてください。
「イメージする > 調べる > 書く > ブラウザで表示する」を繰り返し行うことで、HTMLのスキルが自然に身につきます。
タイトルや見出しに使うHTMLタグ
セクションの見出しには、hタグを使います。「h」は、「heading」の略です。<h1>から<h6>までの6つのレベルがあり、数字が小さいほど大きな見出しになります。
<h1>見出し1<h1>
<h2>見出し2<h2>
<h3>見出し3<h3>
<h4>見出し4<h4>
<h5>見出し5<h5>
<h6>見出し6<h6>使い方のポイントとして、ルールが2つあります。
1. ページ内にh1を多用しないこと
厳密には、h1はページ内に1つだけという制限はありませんが、h1が最も重要な見出しやタイトルと考えた場合、必然的に1つ、2つが妥当です。検索エンジンのSEOにも影響しやすいので、基本的にはページの最上部に1つと覚えておくといいでしょう。
2. h1～h6の順番ルールを守ること
ページ内は、必ずh1から始まります。そして、必ずh6まで使う必要はありません。
h1タグの次はh2、h2の次はh3、h3の次はh4、h4の次はh5、h5の次はh6という順番で階層をつくります。
例えば、h2のあとにh1を配置したり、h3の階層にh2を配置するのは控えましょう。
例として、書籍や資料の目次をイメージするとわかりやすいです。
<h1>タイトル</h1>
<h2>1.見出し</h2>
<h3>1-1.見出し</h3>
<h3>1-2.見出し</h3>
<h2>2.見出し</h2>
<h3>2-1.見出し</h3>
<h4>2-1-1.見出し</h4>
<h4>2-1-2.見出し</h4>
<h2>3.見出し</h2>テキスト文章や段落に使うHTMLタグ
通常のテキストは、pタグを使います。また段落の役割にもなります。
「p」は「Paragraph」の略です。
Webサイトの制作では、最もよく使うHTMLタグのひとつです。
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>キストが入ります。テキストが入ります。</p>テキスト文章の改行に使うHTMLタグ
1つの塊の長い文章の中で、段落ではなく改行したいときがあります。その場合は、brタグを使います。
「b」は「Break」の略です。
ブラウザ上では、<br>を入れた箇所で改行されます。
<p>ここで<br>改行します。</p>ルールとしては、見た目の余白やデザインのためにbrタグを使用してはいけません。
例えば、<br><br><br>にようにbrタグを連続で使って行間に空白を開けたりすることです。
HTMLの構造では不適切な使い方となりますので、段落の場合は、pタグを使ってください。
リスト文に使うHTMLタグ
箇条書き（リスト項目）を表すときは、ul、ol、liタグを使います。
「ul」は「unordered list」、「ol」は「ordered list」、「li」は「list item」の略です。
ulとolは、順序なしとありの２つの違いがあります。liは、ulとolタグの中でリスト項目として使います。
順序なしのリスト
<h2>本日のランチメニュー</h2>
<ul>
<li>トマトクリームパスタ</li>
<li>ビーフシチュー</li>
<li>グラタン</li>
</ul>順序ありのリスト
<h2>好きなフルーツ TOP3</h2>
<ol>
<li>いちご</li>
<li>りんご</li>
<li>みかん</li>
</ol>Webサイトにおいて、特にul、liタグは、ナビゲーションメニューなど使う場面が多くあります。
リスト文に使うHTMLタグ
項目と値のセットを表すときは、dl、dt、ddタグを使います。
「dl」は「definition list」、「dt」は「definition team」、「dd」は「definition description」の略です。
dtを項目、ddを値としてイメージすると使いやすいです。
<dl>
<dt>名前<dt>
<dd>HIKARI</dd>
<dt>居住地域<dt>
<dd>東京</dd>
</dl>dtとddはセットの意味が適当であれば、dlの中に複数セット入れることができます。
<dl>
<dt>名前<dt>
<dd>HANA</dd>
<dt>居住地域<dt>
<dd>大阪</dd>
<dd>福岡</dd>
</dl>CSSでの調整は必要ですが、表形式のレイアウトデザインでもよく使います。
画像に使うHTMLタグ
imgタグは、画像を表示するための要素です。「img」は「Image」の略です。
他のタグと異なるポイントは、終了タグが不要なことです。
src属性に画像のURLや画像ファイルの場所までのパスを指定します。
指定できる画像形式は、JPEG・PNG・GIF・SVG・PDFなどがあります。
<img src="image/sample.jpg">その他、よく使う属性としては、alt属性、width属性、height属性があります。
alt属性は、画像の代替テキスト（簡易説明）を指定します。
width属性・height属性には、イメージの横幅・縦幅（一般的にpxサイズ）を指定します。
<img src="image/sample.jpg" alt="サンプルの画像" width="200" height="200">必須の属性ではありませんが、特にalt属性は重要です。
検索エンジンなどにテキストベースで画像の情報を伝えることができるため、SEO対策になります。
なお、画像が表示されなかった場合は、代わりにテキストを表示してくれます。
装飾以外の画像には、alt属性を設定するように心がけましょう。
また、スマートフォンの音声機能やスクリーンリーダーなどの画面読み上げソフトウェアにおいては、音声で読み上げてくれます。これが何を意味するかと言うと、視覚障害や読字障害の場合に優しい仕様になります。
結果として、ユーザービリティに優れたHTMLの使い方と言えます。
パスの書き方
HTMLでパスを指定する場合、2つの書き方があります。それが、相対パスと絶対パスと言います。
相対パスと絶対パスの詳しい解説はこちらをご覧ください。
リンクに使うHTMLタグ
aタグは、リンクを指定することができます。
「a」は「Anchor」の略で、アンカータグまたはエータグと言います。
<a href="リンク先のURL">リンクはこちら</a>書き方は、href属性にリンク先のURLを指定し、終了タグの前にコンテンツを挟みます。
リンク先のURLは、相対パスと絶対パスが利用できます。
コンテンツには、テキストや画像のほか、HTML5からはインライン要素やブロック要素も挿入することができます。
言い換えると、aタグの中にdivタグで作成した塊を配置することができるということです。
pタグ内の一部のテキストにaタグを使う例
<p>リンクは、<a href="リンク先のURL">こちら</a>です。</p>画像にaタグを使う例
<a href="リンク先のURL"><img src="https://ドメイン名/フォルダ名/画像ファイル名"></a>ブロック要素にaタグを使う例
<a href="リンク先のURL">
<div>
<h2>タイトル</h2>
<p>詳細はこちら</p>
</div>
</a>リンクを別タブのウィンドウで開きたいときのコード
aタグのよく使う属性として、リンクをクリックしたときにブラウザ上の新しいウィンドウ（別タブ）でリンク先を表示するtarget属性があります。target属性の値には「_blank」を指定します。
<a href="リンク先のURL" target="_blank">新しいウインドウで開くリンクはこちら</a>リンク先が外部のWebサイトで、リンク元のWebサイトを開いた状態を維持させたい場合に有効です。
ただし、target=”_blank”にはセキュリティに関する問題が注意喚起されています。ここでの詳しい説明は省きますが、リンク先のJavaScriptの実行で、リンク元の改ざんされてしまう問題の可能性があるということです。
セキュリティ対策としては、2つの属性を付ける方法があります。
リンク先がリンク元の情報を参照できないようにする属性「rel=”noopener”」。
リンク元の情報をリンク先に送らないようにする属性「rel=”noreferrer”」。
まとめて書くとこのようになります。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新しいウインドウで開くリンクはこちら</a>「target=”_blank”」を使用する際は、セキュリティ上「rel=”noopener noreferrer”」を付けておいたほうが良いでしょう。
また、「target=”_blank”」は、Webページのパフォーマンス低下につながることも言われていますので、SEOの観点から目的なく多用することは控えましょう。
テキストで重要性を強調するときに使うHTMLタグ
strongタグは、重要性や強調性を伝えるためにテキストの要素に付けて使います。
ビジュアル面では、標準仕様で文字を太くして強調することができますが、基本的には意味付けの要素だということを覚えておいてください。決して、太文字にするだけの目的で使用してはいけません。
<p><strong>重要な文章です</strong></p>また、strongタグは、重要度の応じて入れ子にして使用することも可能です。
重要な一文の中に、さらに重要な一文がある場合は、このように書くことができます。
<p><strong>重要な文章ですが、さらに<strong>一番重要な文章</strong>です</strong></p>見た目だけを強調するときはbタグを使おう
もし、単に太文字で表現したい場合は、bタグを使用しましょう。
「b」は「bold」の略です。ボールドタグまたはビータグと言います。
bタグは、重要性や強調性は持ちません。
<p><b>太文字の文章です</b></p>いずれも標準仕様では太文字として強調することができますが、重要性として意味があるものは「strong」タグ。意味がないものは「b」タグとして、使い分けてください。
テキスト内で使用するHTMLタグ
span（スパン）タグは、便利なタグのひとつです。
意味をもたない要素ですが、テキスト内で他のテキストと区別したり、インライン要素をグループ化するときに使います。
意味がない分、CSSを指示する際に使いやすいタグです。テキストをデザインすることが多くあります。
<p>テキストの<span class="クラス名">この部分</span>を青色の太文字にします</p>クラス名をCSSに紐づけて、色やフォントサイズ、配置など変えることができます。
CSSを使って、いろいろな場面で活用する機会がありますので覚えておきましょう。
レイアウトでよく使うHTMLタグ
divタグは、最もよく使用する汎用的なタグのひとつです。
「div」は「division」の略です。ディブタグと言います。
意味をもたない要素ですが、ひとまとまりのブロックを作ったり、コンテンツをグループ化するために使います。
意味がない分、レイアウトを構成する際に使いやすいタグです。CSSと組み合わせてレイアウトデザインすることが多いです。
<div>
<h2>グループA</h2>
<p>テキスト</p>
</div>
<div>
<h2>グループB</h2>
<p>テキスト</p>
</div>例えば、div要素で囲まれたブロックを2つ配置して、CSSでブロックごとに色分けしたり、横並びの配置にレイアウトするときに使ったりします。
ただし、意味のある要素のグループ化には、専用タグが用意されていますので活用しましょう。
例を挙げると、header要素、footer要素、nav要素、section要素、article要素、aside要素などがあります。
どのような意味をもつタグなのかということを、ざっくり覚えておくと便利です。
これらの要素に意味が当てはまる場合は該当するタグを使い、当てはまらない場合は、divタグを使うようにすると良いでしょう。とは言っても、divタグの使用頻度は非常に高いです。
headerタグ
headerは、ヘッダーのセクションを意味します。
一般的には、Webページの最上部のヘッダー部分が該当します。サイト名、ロゴ、メニューボタンなどのコンテンツを入れることが多いです。
<header>ヘッダーコンテンツ</header>また、headerタグは、1ページの中で何回でも使うことができます。例えば、記事一覧ページがあるようなサイトでは、各記事ごとのブロック内でheaderタグを利用することがあります。
footerタグ
footerは、フッターのセクションを意味します。
一般的には、Webページの最下部のフッター部分が該当します。サイト名、ロゴ、メニューボタン、著作権情報などのコンテンツを入れることが多いです。また、headerタグと同様に1ページの中で何回でも使うことができます。
<footer>フッターコンテンツ</footer>navタグ
navは、ナビゲーションのセクションを意味します。
ページヘッダー内のメインとなるメニューボタン（グローバルナビゲーション）で使用することが多いです。
ルール上、ページ内での使用数の制限はありませんが、主要なナビゲーションで使用することが基本となっていますので、意味なく多用しないようにしましょう。多くても3つくらいまでが一般的です。
<nav>
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/page1">ページ1</a></li>
<li><a href="/page2">ページ2</a></li>
<li><a href="/page3">ページ3</a></li>
</ul>
</nav>sectionタグ
sectionは、セクションを意味します。1つのコンテンツを複数の章に区切って表現するイメージで使いましょう。
ルールとして、sectionタグで囲まれた中は、見出しで使うhタグから始まるようにしてください。
<h1>メインタイトル</h1>
<section>
<h2>サブタイトル1</h2>
<p>説明文</p>
</section>
<section>
<h2>サブタイトル2</h2>
<p>説明文</p>
</section>もし、セクションとして意味のないコンテンツの場合は、divタグを使ってください。
articleタグ
articleは、ニュースやブログ、情報サイトなどにある記事やコンテンツの単体を意味します。
言い換えると、サイトの中で独立した1つのコンテンツに該当していれば、articleタグを使うことができます。
よくある例としては、ブログサイトの個々の記事の構成でarticleタグを使います。
<article>
<h1>記事タイトル</h1>
<p>テキスト</p>
<p>投稿日</p>
</article>asideタグ
asideは、ページのメインコンテンツに関連性の薄い情報や、メインコンテンツの参考情報を意味します。
よく使う例としては、補足コンテンツやサイドバー、バナー・広告の表示などでasideタグを活用します。
意外にも使い道が難しいのですが、asideタグを使う場所によってメインコンテンツとの関連性の位置づけが異なることを覚えておきましょう。
例えば、メインコンテンツの中でasideタグを使用した場合は、メインコンテンツに関連する参考情報として認識されます。
反対に、メインコンテンツの外でasideタグを使用した場合は、メインコンテンツとは関連の薄いまたは関連のない情報として認識されます。
<header>ヘッダー</header>
<div>
メインコンテンツ
<article>記事コンテンツ
<aside>補足情報（関連性あり）</aside>
</article>
<aside>バナー（関連性なし）</aside>
</div>
<div>
サイドバーコンテンツ
<aside>広告（関連性なし）</aside>
</div>
<footer>フッター</footer>これらのHTMLは、divタグとは異なり、HTMLの構造やSEOを意識して使うタグとして重要です。
表の作成に使うHTMLタグ
表（テーブル）を作成する際は、tableタグを使います。
HTMLの表を使えば、Excelやスプレッドシートのように行と列でコンテンツを配置できます。
ここではシンプルなtableタグを例に、表を作る手順を解説します。
1. 表の開始場所と終了場所に、tableタグを終了タグ付きで書きます。
<table></table>2. trタグを終了タグ付きで挿入します。trは行を意味するタグです。
<table>
<tr></tr>
</table>3. thタグとtdタグを各々終了タグ付きで挿入します。
thは、ヘッダー・セルを意味し、tdは表のデータ・セルを意味しています。
従って、thの部分には、見出しタイトルなどを。tdの部分には、その内容を入れることが基本です。
また、thは、配置場所によって、列と行それぞれのヘッダーの役割をします。
<table>
<tr>
<th>見出し</th>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</table>ちなみに、thなしでtdのみで構成した表も可能です。
<table>
<tr>
<td>データ内容</td>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</table>例えば、行を増やす場合は、行の数だけtrタグを配置します。
<table>
<tr>
<th>列の見出し</th>
<th>列の見出し</th>
<th>列の見出し</th>
</tr>
<tr>
<th>行の見出し</th>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</table>以上が最もシンプルなtableのHTMLタグの構成となります。
テーブル関連のHTMLは、他にもいくつかありますので、よく出てくるタグを紹介します。
captionタグ
captionは、表のタイトルや説明を意味する要素です。
タイトル以外にもpタグを使って説明文を入れることができます。
<table>
<caption>
表のタイトル
<p>表の説明文</p>
</caption>
<tr>
<th>見出し</th>
<td>データ内容</td>
<td>データ内容</td>
</tr>
<tr>
<th>見出し</th>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</table>tbodyタグ
tbodyは、表のブロックを意味する要素です。
例えば、表の中で複数の行を1つのブロックとして意味付けする場合に使います。
ルールとしては、captionタグやtheadタグがある場合は、その後ろで使うこと。tbodyタグの中ではtrタグが最初に入ること。基本的には、この2つを覚えておくと良いでしょう。
<table>
<tbody>
<tr>
<td>データ内容</td>
<td>データ内容</td>
<td>データ内容</td>
</tr>
<tr>
<td>データ内容</td>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</tbody>
</table>なお、HTML5では、tabaleタグには、tbodyタグを入れることを推奨しています。一般的には、tbodyがない場合でもブラウザ側でtbodyあるものとして認識されています。必須ではありませんが、使ったほうが良いということを覚えておきましょう。
theadタグ
theadは、表のヘッダーを意味する要素です。
基本は表の最初に配置します。tableタグの中で、1つだけ入れることができます。
<table>
<thead>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ内容</td>
<td>データ内容</td>
<td>データ内容</td>
</tr>
<tr>
<td>データ内容</td>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</tbody>
</table>tfootタグ
tfootは、表のフッターを意味する要素です。
基本は表の最後に配置します。tableタグの中で、1つだけ入れることができます。
例えば、表の結果を最後の行で示す場合（数値の合計結果）でよく利用されます。
<table>
<thead>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ内容</td>
<td>データ内容</td>
<td>データ内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計内容</td>
<td>合計内容</td>
<td>合計内容</td>
</tr>
</tfoot>
</table>これらのテーブル関連タグを組み合わせて、さまざまな表のカタチを表現できます。
応用すると、行や列のセルを連結して複雑な表を構成したり、CSSを使って罫線や背景色などをデザインすることが可能です。
table関連タグを使う際の注意点としては、レイアウトを目的としての使用は非準拠となっていますので、表（テーブル）以外では、できるかぎり使用しないようにしましょう。
レイアウトだけが目的の場合は、divタグなどを使って、CSSで表デザインを作ることをおすすめします。
まとめ
HTMLタグの種類は100以上ありますが、ここで紹介したタグを一通り理解したあとに、その他多数の要素タグや属性を入門書などで見た際は、頭にスッーと入ってくると思います。
はじめは、辞書を引く感覚で必要なタグを調べながら使うことができれば問題ありません。
ただし、HTMLのルールとして、「コンテンツの目的にあったタグを使う」ということを覚えておいてください。
